import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { readTemplates } from "yt-dlp-transcript-common/lib/chartsStore";
import { EditorChartsClient } from "../../components/EditorChartsClient";
import { getSiteCached } from "../lib/siteCache";

export const dynamic = "force-dynamic";
// → "Charts — <id> — Sites" through the layout's title template.
export const metadata: Metadata = { title: "Charts" };

export default async function SiteChartsPage({
  params,
}: {
  params: Promise<{ siteId: string }>;
}) {
  const { siteId } = await params;
  if (!getSiteCached(siteId)) notFound();
  const templates = readTemplates(getPaths(), siteId);
  return (
    <section className="flex flex-col gap-4">
      <p className="text-sm text-muted-foreground">
        Author the default dashboard for <strong>{siteId}</strong>. Edits save
        automatically and bake into this site&apos;s next export build. Requires
        the stats dataset — build it in the Pool on the{" "}
        <Link className="underline" href="/sites">
          Sites
        </Link>{" "}
        page. The preview draws the stats dataset as last composed, which may be
        another site&apos;s.
      </p>
      <EditorChartsClient key={siteId} templates={templates} siteId={siteId} />
    </section>
  );
}