import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/db";
import { PageForm } from "../_form";

export const dynamic = "force-dynamic";

export default async function EditPagePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const page = await prisma.page.findUnique({ where: { id } });
  if (!page) notFound();

  return (
    <div>
      <div className="flex items-start justify-between gap-4 mb-6">
        <div>
          <Link
            href="/admin/pages"
            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">
            {page.title}
          </h1>
          <p className="text-sm text-ink-muted">
            ID:{" "}
            <code className="text-xs px-1.5 py-0.5 rounded bg-bg-overlay">{page.id}</code>
            {page.status === "published" ? (
              <>
                {" · "}
                <Link
                  href={`/${page.slug}`}
                  target="_blank"
                  className="text-accent-primary hover:underline"
                >
                  Xem trên site →
                </Link>
              </>
            ) : null}
          </p>
        </div>
      </div>

      <PageForm
        mode="edit"
        page={{
          id: page.id,
          slug: page.slug,
          title: page.title,
          content: page.content,
          status: page.status,
          metaTitle: page.metaTitle,
          metaDesc: page.metaDesc,
          metaKeywords: page.metaKeywords,
          ogImage: page.ogImage,
          canonicalUrl: page.canonicalUrl,
          noIndex: page.noIndex,
          showInFooter: page.showInFooter,
          footerOrder: page.footerOrder,
          isSystem: page.isSystem,
        }}
      />
    </div>
  );
}