import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { SiteHeader } from "@/components/site-header";
import { SiteFooter } from "@/components/site-footer";
import { JsonLd } from "@/components/json-ld";
import { renderMarkdown } from "@/lib/render-markdown";
import { getPublishedPage } from "@/lib/pages-repo";
import { settingValue } from "@/lib/settings";

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://v2.finzone.io.vn";

export interface RenderPageProps {
  slug: string;
}

/**
 * Render a static Page (CMS-managed) by slug.
 * Returns null if not found — caller decides whether to 404.
 */
export async function buildPageMetadata(slug: string): Promise<Metadata | null> {
  const page = await getPublishedPage(slug);
  if (!page) return null;

  const canonical = page.canonicalUrl ?? `${SITE_URL}/${slug}`;
  const title = page.metaTitle ?? page.title;
  const description = page.metaDesc ?? undefined;
  const ogImage = page.ogImage ?? undefined;

  return {
    title,
    description,
    keywords: page.metaKeywords ?? undefined,
    alternates: { canonical },
    robots: page.noIndex ? "noindex, nofollow" : "index, follow",
    openGraph: {
      title,
      description,
      url: canonical,
      type: "article",
      images: ogImage ? [{ url: ogImage }] : undefined,
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: ogImage ? [ogImage] : undefined,
    },
  };
}

export async function StaticPageView({ slug }: RenderPageProps) {
  const page = await getPublishedPage(slug);
  if (!page) notFound();

  const html = renderMarkdown(page.content);

  // Build minimal JSON-LD for static page
  const siteName = (await settingValue("site.title")) ?? "Finzone Network";
  const url = page.canonicalUrl ?? `${SITE_URL}/${slug}`;
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebPage",
    name: page.metaTitle ?? page.title,
    headline: page.title,
    description: page.metaDesc ?? undefined,
    url,
    isPartOf: { "@type": "WebSite", name: siteName, url: SITE_URL },
    inLanguage: "vi-VN",
    datePublished: page.publishedAt?.toISOString(),
    dateModified: page.updatedAt.toISOString(),
  };

  return (
    <>
      <SiteHeader />
      <JsonLd blocks={[JSON.stringify(jsonLd)]} />
      <main
        id="main"
        className="mx-auto max-w-[var(--container-reading)] px-6 lg:px-10 py-10 lg:py-16"
      >
        <h1 className="display-xl mb-6">{page.title}</h1>
        <div
          className="prose-fz"
          dangerouslySetInnerHTML={{ __html: html }}
        />
        <div
          className="mt-10 pt-5 text-xs font-mono uppercase tracking-wider border-t hairline"
          style={{ color: "var(--ink-3)" }}
        >
          Cập nhật {page.updatedAt.toLocaleDateString("vi-VN")}
        </div>
      </main>
      <SiteFooter />
    </>
  );
}