import { notFound } from "next/navigation";
import { reportCitationNumbers } from "yt-dlp-transcript-common/lib/report/uses";
import BrowseHeader from "@/components/BrowseHeader";
import EvidenceWalk, { type WalkItem } from "@/components/articles/EvidenceWalk";
import { readArticleNotes, readReportFile, siteById } from "@/lib/articles/sites";
import { corpusNotesFile } from "@/lib/paths";
import { linkedProjects } from "@/lib/articles/links.mjs";
import { sourceFor } from "@/lib/articles/sources.mjs";
import type { NotesRead } from "@/lib/annotations/types";

export const dynamic = "force-dynamic";

// Every citation of one article, one per screen, in the article's own
// numbering. `?c=<citationId>` opens on that citation.
export default async function EvidenceWalkPage({
  params,
  searchParams,
}: {
  params: Promise<{ site: string; report: string }>;
  searchParams: Promise<{ c?: string }>;
}) {
  const { site: siteId, report: reportId } = await params;
  const { c } = await searchParams;
  const site = siteById(siteId);
  if (!site) notFound();
  const read = await readReportFile(site.siteId, reportId);
  if (!read.report) notFound();
  const r = read.report;
  const numbers = reportCitationNumbers(r);
  const items: WalkItem[] = [...numbers.entries()]
    .sort((a, b) => a[1] - b[1])
    .map(([id, number]) => ({ id, number, kind: r.citations?.[id]?.kind ?? "?", quote: r.citations?.[id]?.quote ?? "" }));
  const at = Math.max(0, items.findIndex((i) => i.id === c));
  const [notes, source] = await Promise.all([readArticleNotes(site.siteId, reportId), sourceFor(site.siteId, reportId)]);
  const links = await linkedProjects(site.siteId, reportId, { workspace: source?.workspace ?? null });
  const initialNotes: NotesRead = {
    subject: { kind: "article", site: site.siteId, report: reportId },
    file: corpusNotesFile(site.siteId, reportId) ?? "",
    token: notes.token,
    doc: notes.doc,
    source: notes.doc?.source ?? null,
  };
  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        active="articles"
        crumbs={[
          { href: "/sites", label: "articles" },
          { href: `/sites/${site.siteId}`, label: site.siteId },
          { href: `/sites/${site.siteId}/${reportId}`, label: reportId },
          { label: "evidence" },
        ]}
        note={`${items.length} citations`}
      />
      <EvidenceWalk site={site.siteId} report={reportId} items={items} initial={at} initialNotes={initialNotes}
        videoProjects={links.linked.map((p: { id: string; title: string; generatedBy: string | null }) => ({ id: p.id, title: p.title, generatedBy: p.generatedBy }))}
      />
    </div>
  );
}