import Link from "next/link";
import BrowseHeader from "@/components/BrowseHeader";
import { listTakes, readVerdicts } from "@/lib/report/takes.mjs";
import type { ProjectRef } from "@/lib/project-types";
import TakesBench, { type Take, type TakeVerdict } from "./TakesBench";

// `/browse/<project>/takes` -- alternative renders of one part of the cut,
// watched side by side and judged like / maybe / no.
//
// The takes are made elsewhere (lib/report/takes.mjs says by whom and in what
// shape); this page only reads them, and writes takes/verdicts.json.

export default async function TakesPage({ project }: { project: ProjectRef }) {
  const [listing, verdicts] = await Promise.all([listTakes(project.dir), readVerdicts(project.dir)]);
  const takes = listing.takes as Take[];
  const judged = takes.filter((t) => verdicts[t.id]?.verdict).length;

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[
          { href: "/browse", label: "projects" },
          { href: `/browse/${project.id}`, label: project.id },
          { label: "takes" },
        ]}
        note={takes.length ? `${takes.length} takes · ${judged} judged` : undefined}
      />
      <main className="deck-main flex-1 space-y-4 p-4">
        {takes.length === 0 ? (
          <p data-takes-empty="" className="text-[12px] text-[var(--color-dim)]">
            No takes yet.{" "}
            <Link href={`/browse/${project.id}`} className="text-[var(--color-sel)] hover:underline">
              back to {project.id}
            </Link>
          </p>
        ) : (
          <TakesBench
            project={project.id}
            groups={listing.groups.map((g) => ({ group: g.group, takes: g.takes as Take[] }))}
            initial={verdicts as Record<string, TakeVerdict>}
          />
        )}
        {listing.skipped.length > 0 && (
          <section data-takes-skipped="" className="text-[11px] text-[var(--color-dim)]">
            <h2 className="micro mb-1">skipped — {listing.skipped.length}</h2>
            <ul className="space-y-0.5">
              {listing.skipped.map((s) => (
                <li key={s.dir} data-skipped={s.dir}>
                  <code className="font-mono text-[var(--color-text)]">takes/{s.dir}</code> — {s.why}
                </li>
              ))}
            </ul>
          </section>
        )}
      </main>
    </div>
  );
}