import { readdir, readFile } from "node:fs/promises";
import path from "node:path";
import Link from "next/link";
import BrowseHeader from "@/components/BrowseHeader";
import CopyButton from "@/components/CopyButton";
import CheckSourcesButton from "@/components/dashboard/CheckSourcesButton";
import { fmtAgo, fmtBytes } from "@/lib/format";
import { Markdown } from "@/lib/markdown";
import {
  correctionsOf,
  readClipDetail,
  reviewOf,
  sourcesOf,
  unfetchedNeedingJudgement,
  walkReadiness,
} from "@/lib/projects/report.mjs";
import { EXPORT_FORMATS, exportableVariants } from "@/lib/report/export.mjs";
import { diffManifests, formatChange } from "@/lib/report/manifest-diff.mjs";
import { listSnapshots, readSnapshot } from "@/lib/report/snapshots.mjs";
import { listTakes } from "@/lib/report/takes.mjs";
import DeliverSection from "./DeliverSection";
import FetchUnfetchedButton from "./FetchUnfetchedButton";
import OnscreenSection from "./OnscreenSection";
import ReportBuildChain from "./ReportBuildChain";
import SnapshotButton from "./SnapshotButton";
import TagCitedButton from "./TagCitedButton";
import { RowControls, RowNotes, TimelineList } from "./TimelineEditor";
import GeneratedBanner from "@/components/notes/GeneratedBanner";
import { NotesProvider } from "@/components/notes/NotesProvider";
import { decisionsForProject } from "@/lib/projects";
import { badgeVariants, type BadgeVariants } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import type { Severity } from "@/lib/decisions";
import type { ProjectRef } from "@/lib/project-types";

// ---------------------------------------------------------------------------
// A report video, as a page.
//
// The manifest IS the cut -- array order, absolute source seconds, one entry per
// clip -- so the page is the timeline, read back. What it adds is the three
// things the JSON cannot show you: whether each clip's material is actually on
// disk, whether its window ends where a sentence does, and what the widener
// would do to it if you ran it.
// ---------------------------------------------------------------------------

const hms = (t: number) => {
  const s = Math.max(0, Math.floor(t));
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  return h > 0
    ? `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`
    : `${m}:${String(sec).padStart(2, "0")}`;
};

const TONE: Record<Severity, BadgeVariants["variant"]> = {
  blocking: "blocking",
  open: "open",
  info: "info",
};

function Pill({ tone, children }: { tone?: BadgeVariants["variant"]; children: React.ReactNode }) {
  return <span className={badgeVariants({ variant: tone ?? "info", size: "sm" })}>{children}</span>;
}

export default async function ReportProject({
  project,
  search,
}: {
  project: ProjectRef;
  search: Record<string, string | undefined>;
}) {
  const detail = await readClipDetail(project.dir);
  const decisions = await decisionsForProject(project);

  if (!detail) {
    return (
      <div className="flex h-full flex-col">
        <BrowseHeader crumbs={[{ href: "/browse", label: "projects" }, { label: project.id }]} />
        <main className="deck-main flex-1 p-4">
          <p className="text-[12px] text-[var(--color-bad)]">
            <code className="font-mono">video.manifest.json</code> could not be parsed.
          </p>
        </main>
      </div>
    );
  }

  const { manifest: m, build, entries, channelsDir, shadowExists } = detail;
  const corrections = correctionsOf(m) as {
    id: string;
    channel: string | null;
    video: string;
    at: number;
    href: string;
    text: string;
    verdict: "confirmed" | "incorrect" | "unreviewed";
  }[];
  const clips = entries.filter((e) => e.kind === "clip");
  // How much of the cut has been walked. One definition, shared with the bench
  // header and `umtool corrections`.
  const review = reviewOf(m);
  // And how much of it can be walked TODAY: the walk visits the clips that
  // still need judgement and have something to play, so the gap between these
  // two numbers is what is waiting on a download rather than on somebody.
  const readiness = walkReadiness(clips);
  // What the walk is waiting on: the same clips the rows below mark "not
  // fetched yet".
  const pendingFetch = unfetchedNeedingJudgement(clips) as string[];
  const walkStart = (readiness.readyIds[0] as string | undefined) ?? clips[0]?.id;
  const nonClips = entries.filter((e) => e.kind !== "clip");
  const runtime = clips.reduce((n, e) => n + Math.max(0, e.end - e.start), 0);
  const showAll = search.all === "1";
  const p = (m.provenance ?? {}) as Record<string, unknown>;

  // ---- the long-form reads: sources, revisions, notes, exports ------------
  const sources = await sourcesOf(project.dir, { manifest: m });
  const snapshots = await listSnapshots(project.dir);
  const diffs = await Promise.all(
    snapshots.map(async (sn) => {
      try {
        return diffManifests(await readSnapshot(project.dir, sn.rel), m);
      } catch {
        return null;
      }
    }),
  );
  const readme = await readFile(path.join(project.dir, "README.md"), "utf8").catch(() => null);
  // Sibling notes: every .md that is neither the report nor the README.
  const names = await readdir(project.dir).catch(() => [] as string[]);
  const noteFiles = names.filter((n) => /\.md$/i.test(n) && !/^readme\.md$/i.test(n) && n !== "sweep-report.md").sort();
  const noteTexts = await Promise.all(noteFiles.map((n) => readFile(path.join(project.dir, n), "utf8").catch(() => "")));
  const variants = await exportableVariants(project.dir);
  const takes = await listTakes(project.dir);

  // Provenance splits by SHAPE: a scalar or a URL stays in the table; a long
  // string, or one with a newline, is prose the author wrote and reads as a
  // paragraph under Notes. No field is moved or rewritten.
  const isProse = (v: unknown) => typeof v === "string" && (v.length > 120 || v.includes("\n"));
  const scalars = Object.entries(p).filter(([, v]) => !isProse(v) && (typeof v !== "object" || v === null));
  const prose = Object.entries(p).filter(([, v]) => isProse(v)) as [string, string][];
  const structured = Object.entries(p).filter(([, v]) => typeof v === "object" && v !== null);
  const days = (ms: number) => Math.floor((Date.now() - ms) / 86_400_000);

  // ---- what a clip's "mix" link opens ---------------------------------------
  //
  // The widest cached RAW window, not the built segment. Three reasons: it
  // exists as soon as a clip has been fetched once (segments only exist after a
  // build), it has NO CHROME burned in -- which is what a mix is looking at --
  // and it is the file the bench already has peaks for. The built segment is the
  // fallback, and the link says which it is.
  //
  // start/end are the clip's window MINUS the file's own start, because a mix
  // spec is relative to the file it names. The arithmetic is exact and known
  // here; making the client do it would be a second place to get it wrong.
  const mixHref = (e: {
    id: string;
    start: number;
    end: number;
    widest: { name: string; path: string; from: number } | null;
    segment: string | null;
  }): string | null => {
    const q = new URLSearchParams();
    if (e.widest) {
      // The window's own path, not a rebuild of it: the editor fetches into
      // the corpus, so "out/clips-raw/<name>" is a file that is not there.
      q.set("body", e.widest.path);
      q.set("start", (e.start - e.widest.from).toFixed(2));
      q.set("end", (e.end - e.widest.from).toFixed(2));
    } else if (e.segment) {
      q.set("body", path.join(project.dir, e.segment));
    } else {
      return null;
    }
    q.set("from", project.id);
    q.set("clip", e.id);
    return `/mix?${q}`;
  };

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ href: "/browse", label: "projects" }, { label: project.id }]}
        note={
          `${clips.length} clips` +
          (nonClips.length ? ` · ${nonClips.length} other` : "") +
          ` · ${hms(runtime)} · ${build.built ? "built" : "not built"}`
        }
      />

      <div className="flex flex-wrap items-start gap-3 border-b border-[var(--color-line)] px-4 py-2">
        <div className="min-w-0 flex-1">
          <h1 className="truncate text-[15px] text-[var(--color-text)]">{m.title}</h1>
          {m.subtitle && <p className="text-[12px] text-[var(--color-dim)]">{m.subtitle}</p>}
          <div className="num mt-1 flex flex-wrap items-center gap-x-3 text-[11px] text-[var(--color-dim)]">
            {typeof p.channel === "string" && p.channel && <span>{p.channel}</span>}
            {m.generatedOn && <span>generated {m.generatedOn}</span>}
            {typeof p.videosCited === "number" && <span>{p.videosCited} videos cited</span>}
            {typeof p.enumeratedMatches === "number" && (
              <span>{p.enumeratedMatches} enumerated matches</span>
            )}
          </div>
        </div>
        {/* ---- the way in ----
            Every clip row carries a bench link, which is the right control for
            "go to that one" and the wrong one for "start". Reviewing a cut is
            watching every clip in order, and the first clip is where that
            begins -- so it is a button in the title bar rather than the
            eleventh link on a page whose first screenful is decisions,
            sources and the build chain. */}
        {clips.length > 0 && (
          <div data-walk-cut="" className="flex flex-col items-start gap-1">
            {/* Where the walk STARTS is where the walk goes: the first clip
                that still needs an answer and can be played. A cut whose
                first clip is already judged (or not fetched) would otherwise
                open on a clip `n` immediately leaves. */}
            <Link
              href={`/browse/${project.id}/clip/${walkStart}`}
              data-walk-start={walkStart}
              className={buttonVariants({ variant: "primary", size: "lg" })}
            >
              Walk the cut → start at {walkStart}
            </Link>
            <span className="text-[11px] text-[var(--color-dim)]" data-walk-progress="">
              <kbd>p</kbd> / <kbd>n</kbd> move between clips · {review.reviewed} of {review.total}{" "}
              reviewed{review.incorrect > 0 ? ` · ${review.incorrect} incorrect` : ""}
              {" · "}
              <span data-ready-count="">
                ready {readiness.ready} of {readiness.needing} needing judgement
              </span>
            </span>
          </div>
        )}
        {/* Alternative renders of part of the cut, made elsewhere and judged
            on their own page. Only when there is a takes/ to look at. */}
        {takes.exists && (
          <Link
            href={`/browse/${project.id}/takes`}
            data-takes-link={takes.takes.length}
            className={buttonVariants({ size: "lg" })}
          >
            Takes — {takes.takes.length}
          </Link>
        )}
        {build.built && (
          <div className="text-right text-[11px] text-[var(--color-dim)]">
            <div className="font-mono text-[var(--color-text)]">{build.slug}.mp4</div>
            <div className="num">
              {fmtBytes(build.finalSize)} · {fmtAgo(build.finalMtimeMs)}
            </div>
            {/* No window: the whole thing is the point of a deliverable link. */}
            <Link
              href={`/mix?body=${encodeURIComponent(build.finalPath)}&from=${encodeURIComponent(project.id)}`}
              data-mix-deliverable=""
              className="text-[var(--color-sel)] hover:underline"
            >
              open in mix
            </Link>
          </div>
        )}
      </div>

      <NotesProvider target={{ project: project.id }}>
      <main className="deck-main flex-1 space-y-4 p-4">
        <GeneratedBanner generatedBy={typeof m.generatedBy === "string" ? m.generatedBy : null} />
        {/* --- the author's own account of the cut, first ------------------ */}
        {readme && (
          <section data-readme="" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
            <div className="max-h-[40vh] overflow-y-auto">
              <Markdown text={readme} />
            </div>
          </section>
        )}

        {/* --- what is wrong, first ------------------------------------- */}
        {decisions.length > 0 && (
          <section data-project={project.id}>
            <h2 className="micro mb-1.5">
              {decisions.filter((d) => d.severity !== "info").length} waiting of {decisions.length}
            </h2>
            <ul className="space-y-1">
              {decisions.map((d, i) => (
                <li
                  key={`${d.kind}-${d.target}-${i}`}
                  data-decision={d.kind}
                  data-severity={d.severity}
                  data-target={d.target}
                  className="flex flex-wrap items-baseline gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-1.5"
                >
                  <span className={badgeVariants({ variant: TONE[d.severity], size: "sm" })}>
                    {d.severity}
                  </span>
                  <span className="font-mono text-[12px] text-[var(--color-text)]">{d.target}</span>
                  <span className="text-[12px] text-[var(--color-dim)]">{d.why}</span>
                  <span className="micro ml-auto">{d.kind}</span>
                </li>
              ))}
            </ul>
          </section>
        )}

        {/* --- the sources ---------------------------------------------- */}
        <section data-sources="" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
          <div className="mb-1 flex flex-wrap items-baseline gap-3">
            <h2 className="micro">
              sources — {sources.rows.length}
            </h2>
            <span className="num text-[11px] text-[var(--color-dim)]" data-sources-checked={sources.checkedAtMs ? String(Math.round(sources.checkedAtMs)) : "never"}>
              {sources.checkedAtMs
                ? `availability checked ${days(sources.checkedAtMs)} d ago`
                : "availability never checked"}
            </span>
            <span className="ml-auto">
              <CheckSourcesButton projects={[project.id]} label="re-check availability" />
            </span>
          </div>
          {/* Beside the sources, because these ARE the sources: tagging them in
              the archive is a statement about the recordings this table lists,
              and the count in the control is the count in its heading. */}
          <div className="mt-1.5">
            <TagCitedButton project={project.id} />
          </div>
          <div className="num text-[11px] text-[var(--color-dim)]">
            cues from <code className="font-mono">{channelsDir}</code>
            {shadowExists && (
              <span className="ml-2 text-[var(--color-meter)]">
                (this project&rsquo;s own shadow tree)
              </span>
            )}
            {" · "}QR codes resolve to{" "}
            <code className="font-mono">{String(p.siteOrigin ?? "") || "(nothing — siteOrigin is unset)"}</code>
          </div>
          {sources.rows.length > 0 && (
            <div className="mt-2 overflow-x-auto">
              <table className="w-full border-collapse text-[11px]">
                <thead>
                  <tr className="micro text-left">
                    <th className="px-1.5 py-0.5">source</th>
                    <th className="px-1.5 py-0.5">clips</th>
                    <th className="px-1.5 py-0.5">cues</th>
                    <th className="px-1.5 py-0.5">coverage</th>
                    <th className="px-1.5 py-0.5">availability</th>
                    <th className="px-1.5 py-0.5">cite target</th>
                  </tr>
                </thead>
                <tbody>
                  {sources.rows.map((r) => {
                    const a = r.availability;
                    return (
                      <tr
                        key={r.key}
                        data-source={r.key}
                        data-cues={r.cues}
                        data-cue-gap={r.coverageGap ? r.coverageGap.clip : ""}
                        data-availability={a ? a.state : "never"}
                        data-cite-override={r.cite.differs ? "1" : "0"}
                        className="border-t border-[var(--color-line)] align-top"
                      >
                        <td className="px-1.5 py-1">
                          <a href={r.cite.override ?? r.cite.derived} target="_blank" rel="noreferrer" className="font-mono text-[var(--color-sel)] hover:underline">
                            {r.key}
                          </a>
                          {r.title && <div className="truncate text-[var(--color-dim)]" style={{ maxWidth: "24rem" }}>{r.title}</div>}
                        </td>
                        <td className="px-1.5 py-1 font-mono">
                          {r.clips.map((c, i) => (
                            <span key={c}>
                              {i > 0 && " "}
                              <Link href={`/browse/${project.id}/clip/${c}`} className="text-[var(--color-sel)] hover:underline">
                                {c}
                              </Link>
                            </span>
                          ))}
                        </td>
                        <td className="px-1.5 py-1">
                          {r.cues === "missing" ? (
                            <Pill tone="blocking">missing</Pill>
                          ) : r.cues === "no-punctuation" ? (
                            <Pill>no punctuation</Pill>
                          ) : (
                            <span className="text-[var(--color-dim)]">present</span>
                          )}
                        </td>
                        <td className="num px-1.5 py-1">
                          {r.coverageGap ? (
                            <span className="text-[var(--color-dirty)]">
                              cues end {r.coverageGap.cuesEnd.toFixed(0)} s · {r.coverageGap.clip} needs {r.coverageGap.needs.toFixed(0)} s
                            </span>
                          ) : r.cuesEnd != null ? (
                            <span className="text-[var(--color-dim)]">cues to {r.cuesEnd.toFixed(0)} s</span>
                          ) : (
                            <span className="text-[var(--color-dim)]">—</span>
                          )}
                        </td>
                        <td className="num px-1.5 py-1">
                          {a ? (
                            <span className={a.ok ? "text-[var(--color-dim)]" : "text-[var(--color-bad)]"} title={a.error ?? undefined}>
                              {a.state} · {days(a.checkedAtMs)} d ago
                            </span>
                          ) : (
                            <span className="text-[var(--color-dim)]">never checked</span>
                          )}
                        </td>
                        <td className="px-1.5 py-1">
                          {r.cite.differs ? (
                            <span className="text-[var(--color-dim)]">
                              <Pill>citeUrl</Pill>{" "}
                              <a href={r.cite.override!} target="_blank" rel="noreferrer" className="font-mono text-[var(--color-sel)] hover:underline">
                                override
                              </a>
                            </span>
                          ) : (
                            <span className="text-[var(--color-dim)]">derived</span>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* --- building it ---------------------------------------------- */}
        <ReportBuildChain
          project={project.id}
          entries={entries.map((e) => ({ id: e.id, kind: e.kind }))}
        />

        {/* --- what is drawn over it --------------------------------------- */}
        {/* The on-screen panel: its settings, its words and a live preview of
            both. After the build chain, because "re-render on-screen" is a run
            of that chain over segments it already built; before Deliver,
            because the panel is part of the video that gets delivered. */}
        <OnscreenSection
          project={project.id}
          generatedBy={typeof m.generatedBy === "string" ? m.generatedBy : null}
          entries={entries.map((e) => ({ id: e.id, kind: e.kind, segment: !!e.segment }))}
          built={!!build.built}
        />

        {/* --- delivering it --------------------------------------------- */}
        {/* After the build chain, because that is the order the work happens
            in: the video is one deliverable and the written report with its
            own clip files is the other, and both wait on the same walk. */}
        <DeliverSection project={project} manifest={m} entries={entries} />

        {/* --- the timeline --------------------------------------------- */}
        <section>
          <h2 className="micro mb-1.5">
            the cut — {entries.length} entries, in array order
          </h2>
          {/* The gap between "ready" and "needing", closed in one press. Every
              row below it that reads "not fetched yet" is one of these, and
              closing them one bench page at a time was the loop this replaces.
              The default pad is the fetch route's own (±20 s), so a clip
              fetched here and a clip fetched from the bench land in the same
              file. */}
          {pendingFetch.length > 0 && (
            <div className="mb-1.5">
              <FetchUnfetchedButton
                project={project.id}
                pending={pendingFetch.map((id) => ({ id, padBefore: 20, padAfter: 20 }))}
              />
            </div>
          )}
          <TimelineList project={project.id} count={entries.length}>
            {entries.map((e, at) => {
              // Anything that is not a CLIP renders generically. The timeline's
              // vocabulary is open -- one real manifest carries `scroll` and
              // `chart` beside its cards -- and a page that only knows two words
              // either crashes on the third or silently drops it.
              if (e.kind !== "clip") {
                return (
                  <li
                    key={`${e.id}@${at}`}
                    data-entry={e.id}
                    data-kind={e.kind}
                    data-at={at}
                    tabIndex={0}
                    className="flex flex-wrap items-baseline gap-2 rounded border border-dashed border-[var(--color-line)] px-3 py-1.5 text-[12px] outline-none focus:border-[var(--color-sel)]"
                  >
                    <RowControls id={e.id} at={at} />
                    <span className="font-mono text-[var(--color-dim)]">{e.id}</span>
                    <Pill>{e.style ? `${e.kind} · ${e.style}` : e.kind}</Pill>
                    <span className="text-[var(--color-text)]">
                      {e.heading ?? e.title ?? e.label ?? ""}
                    </span>
                    {e.seconds != null && <span className="num micro ml-auto">{e.seconds}s</span>}
                    <div className="basis-full">
                      <RowNotes id={e.id} project={project.id} />
                    </div>
                  </li>
                );
              }
              // `endsSentence === null` means the source has no punctuation to
              // read, which is a different thing to say than "this cut is fine".
              const midSentence = e.endsSentence === false && !e.lockEnd && !e.lock;
              return (
                <li
                  key={`${e.id}@${at}`}
                  data-entry={e.id}
                  data-kind="clip"
                  data-at={at}
                  tabIndex={0}
                  data-cached={e.cached ? "1" : "0"}
                  data-fetched={e.fetched ? "1" : "0"}
                  data-mid-sentence={midSentence ? "1" : "0"}
                  className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-1.5 outline-none focus:border-[var(--color-sel)]"
                >
                  <div className="flex flex-wrap items-baseline gap-2 text-[12px]">
                    <RowControls id={e.id} at={at} />
                    <span className="font-mono text-[var(--color-sel)]">{e.id}</span>
                    <span className="num font-mono text-[11px] text-[var(--color-dim)]">
                      {e.video} {hms(e.start)}–{hms(e.end)} ({(e.end - e.start).toFixed(1)}s)
                    </span>
                    {e.lock && <Pill>locked</Pill>}
                    {!e.lock && e.lockStart && <Pill>start pinned</Pill>}
                    {!e.lock && e.lockEnd && <Pill>end pinned</Pill>}
                    {/* The PLAYER's question, and the walk's: is this clip
                        watchable end to end right now. `data-cached` keeps the
                        BUILD's -- the padded window it would fetch -- because
                        the build chain reads it and they are different. */}
                    {e.fetched ? (
                      <Pill>cached</Pill>
                    ) : (
                      <Pill tone="open">
                        not fetched yet
                      </Pill>
                    )}
                    {e.segment && <Pill>segment built</Pill>}
                    {!e.hasCues && (
                      <Pill tone={TONE.blocking}>no cues</Pill>
                    )}
                    {midSentence && <Pill tone="open">ends mid-sentence</Pill>}
                    {e.noPunctuation && <Pill>source unpunctuated</Pill>}
                    {e.proposed && (
                      <Pill tone="open">
                        widener would move it
                      </Pill>
                    )}
                    <span className="ml-auto flex items-center gap-2">
                      {mixHref(e) ? (
                        <Link
                          href={mixHref(e)!}
                          data-mix-link={e.id}
                          className="text-[11px] text-[var(--color-sel)] hover:underline"
                        >
                          mix
                        </Link>
                      ) : (
                        // Never a dead link that 400s: a clip with nothing
                        // fetched has nothing to open.
                        <span className="micro" data-mix-link-disabled={e.id}>
                          fetch it first
                        </span>
                      )}
                      <Link
                        href={`/browse/${project.id}/clip/${e.id}`}
                        data-bench-link={e.id}
                        className="text-[11px] text-[var(--color-sel)] hover:underline"
                      >
                        bench →
                      </Link>
                      <span className="micro">§{e.section ?? 0}</span>
                    </span>
                  </div>
                  {(showAll || midSentence || e.proposed) && e.quote && (
                    <p className="mt-1 text-[11px] leading-snug text-[var(--color-dim)]">
                      &ldquo;{String(e.quote).slice(0, 240)}
                      {String(e.quote).length > 240 ? "…" : ""}&rdquo;
                    </p>
                  )}
                  {midSentence && e.endCueText && (
                    <p className="num mt-1 text-[11px] text-[var(--color-dirty)]">
                      cut lands inside: &ldquo;…{String(e.endCueText).trim().slice(-64)}&rdquo;
                    </p>
                  )}
                  {e.proposed && (
                    <p className="num mt-1 text-[11px] text-[var(--color-dirty)]">
                      resolve-windows would make it {hms(e.proposed.start)}–{hms(e.proposed.end)} —
                      set <code className="font-mono">lock</code> if this window is deliberate
                    </p>
                  )}
                  <RowNotes id={e.id} project={project.id} />
                </li>
              );
            })}
          </TimelineList>
          <div className="mt-2">
            <Link
              href={`/browse/${project.id}${showAll ? "" : "?all=1"}`}
              className="text-[11px] text-[var(--color-sel)] hover:underline"
            >
              {showAll ? "hide quotes" : "show every quote"}
            </Link>
          </div>
        </section>

        {/* --- corrections ------------------------------------------------ */}
        {/*
          Not a decision and not a defect in the CUT: a correction says the
          REPORT got something wrong -- wrong speaker, wrong addressee, wrong
          date -- and the fix belongs to the next sweep, not to this manifest.
          So it is collected here rather than filed in the inbox, in the same
          shape `umtool corrections` prints, because the list's real destination
          is somebody's next prompt.
        */}
        {corrections.length > 0 && (
          <section
            data-corrections=""
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2"
          >
            <h2 className="micro mb-1.5">
              corrections for the next pass —{" "}
              {corrections.filter((c) => c.verdict === "incorrect").length}
              {corrections.some((c) => c.verdict !== "incorrect") &&
                ` · ${corrections.filter((c) => c.verdict !== "incorrect").length} notes on confirmed clips`}
            </h2>
            <ul className="space-y-1.5">
              {corrections.map((c) => (
                <li
                  key={c.id}
                  data-correction={c.id}
                  data-correction-verdict={c.verdict}
                  className="text-[12px] leading-snug"
                >
                  {/* A note on a CONFIRMED clip is not a defect, and a reader
                      who cannot tell the two apart goes off to fix a clip
                      nobody complained about. */}
                  {c.verdict !== "incorrect" && <Pill>note · confirmed</Pill>}{" "}
                  <Link
                    href={`/browse/${project.id}/clip/${c.id}`}
                    className="font-mono text-[11px] text-[var(--color-sel)] hover:underline"
                  >
                    {c.id}
                  </Link>{" "}
                  <span className="text-[11px] text-[var(--color-dim)]">
                    {c.channel}/{c.video} @ {hms(c.at)}
                  </span>{" "}
                  <a
                    href={c.href}
                    target="_blank"
                    rel="noreferrer"
                    className="text-[11px] text-[var(--color-sel)] hover:underline"
                  >
                    the moment
                  </a>
                  <div className="text-[var(--color-dim)]">{c.text}</div>
                </li>
              ))}
            </ul>
            <p className="mt-2 text-[11px] text-[var(--color-dim)]">
              <code className="font-mono">umtool corrections {project.id}</code> prints the same
              list as markdown, with the moment links, ready to paste into the next sweep.
            </p>
          </section>
        )}

        {/* --- revisions ------------------------------------------------- */}
        <section data-revisions="" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
          <div className="mb-1 flex flex-wrap items-baseline gap-3">
            <h2 className="micro">revisions — {snapshots.length}</h2>
            <span className="ml-auto">
              <SnapshotButton project={project.id} />
            </span>
          </div>
          {snapshots.length === 0 ? (
            <p className="text-[11px] text-[var(--color-dim)]">
              no snapshots. One copies <code className="font-mono">video.manifest.json</code> into{" "}
              <code className="font-mono">revisions/</code>; a build that stamps a deliverable aside
              takes one of the manifest that made it.
            </p>
          ) : (
            <ul className="space-y-1">
              {snapshots.map((sn, i) => {
                const d = diffs[i];
                const summary = !d
                  ? "unreadable"
                  : d.same
                    ? "same timeline as now"
                    : Object.entries(d.counts).map(([k, n]) => `${n} ${k}`).join(" · ");
                return (
                  <li
                    key={sn.rel}
                    data-snapshot={sn.rel}
                    data-legacy={sn.legacy ? "1" : "0"}
                    data-diff={d ? d.changes.length : "x"}
                    className="text-[11px]"
                  >
                    <details>
                      <summary className="flex cursor-pointer flex-wrap items-baseline gap-2">
                        <span className="font-mono text-[var(--color-text)]">{sn.rel}</span>
                        {sn.legacy && <Pill>legacy</Pill>}
                        {sn.label && !sn.legacy && <Pill>{sn.label}</Pill>}
                        <span className="num text-[var(--color-dim)]">{fmtAgo(sn.mtimeMs)}</span>
                        <span className={`num ml-auto ${d && !d.same ? "text-[var(--color-dirty)]" : "text-[var(--color-dim)]"}`}>
                          {summary}
                        </span>
                      </summary>
                      {d && !d.same && (
                        <pre className="mt-1 max-h-56 overflow-auto rounded bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-dim)]">
                          {d.changes.map((c) => formatChange(c)).join("\n")}
                        </pre>
                      )}
                    </details>
                  </li>
                );
              })}
            </ul>
          )}
        </section>

        {/* --- exports --------------------------------------------------- */}
        <section data-exports="" className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
          <h2 className="micro mb-1">export</h2>
          {variants.length === 0 ? (
            <p className="text-[11px] text-[var(--color-dim)]">
              nothing built to export from — a TOC needs the build&rsquo;s chapter offsets, and there is
              no <code className="font-mono">chapters.ffmeta</code> and no segments under{" "}
              <code className="font-mono">out/</code>
            </p>
          ) : (
            variants.map((v) => (
              <div key={v} className="flex flex-wrap items-center gap-1.5 text-[11px]" data-export-variant={v}>
                <span className="w-14 font-mono text-[var(--color-dim)]">{v}</span>
                {EXPORT_FORMATS.map((f) => (
                  <CopyButton
                    key={f}
                    label={f}
                    title={`copy the ${f} for the ${v} cut`}
                    url={`/api/report/export?project=${encodeURIComponent(project.id)}&format=${f}&variant=${v}`}
                  />
                ))}
              </div>
            ))
          )}
        </section>

        {/* --- provenance, as written; prose under notes ------------------- */}
        <section data-provenance="">
          <h2 className="micro mb-1.5">provenance</h2>
          <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-0.5 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2 text-[11px]">
            {scalars.map(([k, v]) => (
              <div key={k} className="contents">
                <dt className="micro">{k}</dt>
                <dd className="num break-all text-[var(--color-dim)]">
                  {typeof v === "string" && /^https?:\/\//.test(v) ? (
                    <a href={v} target="_blank" rel="noreferrer" className="text-[var(--color-sel)] hover:underline">
                      {v}
                    </a>
                  ) : (
                    String(v)
                  )}
                </dd>
              </div>
            ))}
            {structured.map(([k, v]) => (
              <div key={k} className="contents">
                <dt className="micro">{k}</dt>
                <dd className="font-mono text-[var(--color-dim)]">{JSON.stringify(v).slice(0, 200)}</dd>
              </div>
            ))}
          </dl>
        </section>

        {(prose.length > 0 || noteFiles.length > 0) && (
          <section data-notes="">
            <h2 className="micro mb-1.5">notes</h2>
            <div className="space-y-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2">
              {prose.map(([k, v]) => (
                <div key={k} data-note={k}>
                  <div className="text-[12px] font-semibold text-[var(--color-text)]">{k}</div>
                  <p className="whitespace-pre-wrap text-[12px] leading-relaxed text-[var(--color-dim)]">{v}</p>
                </div>
              ))}
              {noteFiles.map((n, i) => (
                <details key={n} data-note-file={n}>
                  <summary className="cursor-pointer font-mono text-[12px] text-[var(--color-sel)]">{n}</summary>
                  <div className="mt-1 max-h-[50vh] overflow-y-auto">
                    <Markdown text={noteTexts[i]} />
                  </div>
                </details>
              ))}
            </div>
          </section>
        )}
      </main>
      </NotesProvider>
    </div>
  );
}