import { notFound } from "next/navigation";
import Link from "next/link";
import { prisma } from "@/lib/db";
import { ArticleForm } from "../_form";
import { SeoSidebar } from "@/components/admin/seo-sidebar";
import { SerpPreview } from "@/components/admin/serp-preview";

export const dynamic = "force-dynamic";

export default async function EditArticlePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const [article, categories] = await Promise.all([
    prisma.article.findUnique({
      where: { id },
      include: {
        category: { select: { slug: true } },
        tags: {
          include: { tag: { select: { name: true } } },
        },
      },
    }),
    prisma.category.findMany({
      orderBy: { order: "asc" },
      select: { id: true, slug: true, name: true },
    }),
  ]);

  if (!article) notFound();

  return (
    <div>
      <div className="flex items-start justify-between gap-4 mb-6">
        <div>
          <Link
            href="/admin/articles"
            className="text-xs text-ink-muted hover:text-accent-primary mb-1 inline-block"
          >
            ← Quay lại danh sách
          </Link>
          <h1 className="font-display text-2xl lg:text-3xl font-bold mb-1 line-clamp-1">
            {article.title}
          </h1>
          <p className="text-sm text-ink-muted">
            ID:{" "}
            <code className="text-xs px-1.5 py-0.5 rounded bg-bg-overlay">{article.id}</code>
            {article.status === "published" && (
              <>
                {" · "}
                <Link
                  href={`/${article.slug}`}
                  target="_blank"
                  className="text-accent-primary hover:underline"
                >
                  Xem trên site →
                </Link>
              </>
            )}
          </p>
        </div>
      </div>
      <div className="grid grid-cols-1 xl:grid-cols-[1fr_360px] gap-6">
        <ArticleForm
          mode="edit"
          article={{
            id: article.id,
            slug: article.slug,
            title: article.title,
            excerpt: article.excerpt,
            content: article.content,
            coverImage: article.coverImage,
            status: article.status,
            publishedAt: article.publishedAt,
            scheduledFor: article.scheduledFor,
            metaTitle: article.metaTitle,
            metaDesc: article.metaDesc,
            metaKeywords: article.metaKeywords,
            focusKeyword: article.focusKeyword,
            canonicalUrl: article.canonicalUrl,
            noIndex: article.noIndex,
            seoScore: article.seoScore ?? 0,
            readabilityScore: article.readabilityScore ?? 0,
            categorySlug: article.category?.slug ?? null,
            tags: article.tags.map((t) => t.tag.name),
            featured: article.featured,
            pinned: article.pinned,
            pinOrder: article.pinOrder,
          }}
          categories={categories}
        />
        <aside className="xl:sticky xl:top-6 self-start space-y-4">
          <SerpPreview />
          <SeoSidebar articleId={article.id} />
        </aside>
      </div>
    </div>
  );
}