import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

import { CmsPageBlocks } from "@/components/site/CmsPageBlocks";
import { fetchPublicSitePageBySlug } from "@/lib/site-content";
import { getSiteOrigin } from "@/lib/site";

type PageProps = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const page = await fetchPublicSitePageBySlug(slug);
  if (!page) return { title: "Không tìm thấy" };
  const title = page.seoTitle?.trim() || page.title;
  const description = page.seoDescription?.trim() || undefined;
  const origin = getSiteOrigin();
  const path = `/pages/${slug}`;
  return {
    title,
    description,
    ...(origin
      ? {
          alternates: { canonical: `${origin}${path}` },
          openGraph: {
            title,
            description,
            url: path,
            type: "article",
          },
        }
      : {}),
  };
}

export default async function CmsSitePage({ params }: PageProps) {
  const { slug } = await params;
  const page = await fetchPublicSitePageBySlug(slug);
  if (!page) notFound();

  const blocks = Array.isArray(page.contentJson?.blocks) ? page.contentJson.blocks : [];

  return (
    <main className="mx-auto max-w-[1100px] flex-1 px-4 py-16 sm:px-8 sm:py-20 lg:py-24">
      <article className="mx-auto max-w-2xl">
        <CmsPageBlocks blocks={blocks} />
        <div className="ctkp-rule mx-auto my-14 max-w-[10rem] opacity-50" aria-hidden />
        <p className="text-center">
          <Link href="/" className="ctkp-text-link text-sm">
            ← Về trang chủ
          </Link>
        </p>
      </article>
    </main>
  );
}