import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import {
  readGlobalAliases,
  readSiteAliases,
} from "yt-dlp-transcript-common/lib/aliasesStore";
import { EditorAliasesClient } from "../../components/EditorAliasesClient";
import { getSiteCached } from "../lib/siteCache";

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

// Both sections live here: the global dictionary AND this site's overrides. A
// per-site alias shadows the global one with the same id at compose time
// (aliasesStore.ts), so a tab that showed only the overlay would hide the thing
// it overlays.
export default async function SiteAliasesPage({
  params,
}: {
  params: Promise<{ siteId: string }>;
}) {
  const { siteId } = await params;
  if (!getSiteCached(siteId)) notFound();
  const paths = getPaths();
  const globalConfig = readGlobalAliases(paths);
  const siteConfig = readSiteAliases(paths, siteId);
  return (
    <section className="flex flex-col gap-4">
      <p className="max-w-2xl text-sm text-muted-foreground">
        When a searcher types a known term, the viewer offers a better regex they
        can apply — never forced. A concept groups the spellings that trigger it
        (transcription often mangles them) with one replacement pattern. Global
        aliases apply everywhere; per-site aliases below add to or override them
        for <strong>{siteId}</strong>. Changes bake into the site&apos;s next
        export build.
      </p>
      <EditorAliasesClient
        key={siteId}
        globalConfig={globalConfig}
        siteConfig={siteConfig}
        siteId={siteId}
      />
    </section>
  );
}