import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { getCaseStudyBySlug } from "@/services/case.service";
import { getPreviewOrFallback } from "@/services/preview.service";
import { BlockRenderer } from "@/blocks/BlockRenderer";
import type { CaseStudyPageDetail } from "@/types/wagtail";

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

export async function generateMetadata({
  params,
}: CaseStudyDetailPageProps): Promise<Metadata> {
  const { slug } = await params;
  const item = await getCaseStudyBySlug(slug).catch(() => null);
  return { title: item?.title ?? "案例未找到" };
}

export default async function CaseStudyDetailPage({
  params,
}: CaseStudyDetailPageProps) {
  const { slug } = await params;
  const item = await getPreviewOrFallback<CaseStudyPageDetail>(
    "cases.casestudypage",
    "body,client_name,industry,published_at,summary",
    () => getCaseStudyBySlug(slug).catch(() => null),
  );

  if (!item) {
    notFound();
  }

  return (
    <article className="mx-auto max-w-3xl px-6 py-24">
      <h1 className="mb-2 text-4xl font-bold text-slate-900">{item.title}</h1>
      <p className="mb-12 text-sm text-slate-500">
        {item.client_name}
        {item.industry ? ` · ${item.industry}` : ""}
      </p>
      <BlockRenderer blocks={item.body} />
    </article>
  );
}