import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ChevronRight } from "lucide-react";
import { fetchSitePageBySlug } from "@/lib/api";
import { formatDate } from "@/lib/format";
import MarkdownBody from "@/components/MarkdownBody";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const data = await fetchSitePageBySlug(slug).catch(() => null);
  if (!data) return { title: "页面不存在" };
  const p = data.page;
  return {
    title: p.title,
    description: p.excerpt || p.title,
    openGraph: {
      title: p.title,
      description: p.excerpt || p.title,
      type: "article",
      publishedTime: p.created_at,
    },
  };
}

export default async function SitePagePublic({ params }: PageProps) {
  const { slug } = await params;
  const data = await fetchSitePageBySlug(slug).catch(() => null);
  if (!data) notFound();

  const p = data.page;
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: p.title,
    description: p.excerpt || undefined,
    datePublished: p.created_at,
    dateModified: p.updated_at,
  };

  return (
    <div className="max-w-3xl mx-auto">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">
          首页
        </Link>
        <ChevronRight size={13} />
        <span className="truncate" style={{ color: "var(--accent)" }}>
          {p.title}
        </span>
      </nav>

      <article className="panel p-6 sm:p-8">
        <time className="meta text-[12px] tabular-nums" dateTime={p.updated_at || p.created_at}>
          {formatDate(p.updated_at || p.created_at)}
        </time>
        <h1
          className="mt-2 text-[24px] sm:text-[28px] font-extrabold leading-snug tracking-tight"
          style={{ color: "var(--ink)" }}
        >
          {p.title}
        </h1>
        {p.excerpt ? (
          <p className="mt-3 text-[14.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
            {p.excerpt}
          </p>
        ) : null}

        <div className="mt-5 pt-5" style={{ borderTop: "1px solid var(--line)" }}>
          <MarkdownBody content={p.content} />
        </div>
      </article>
    </div>
  );
}