import Link from "next/link";
import { readdir, readFile, stat } from "node:fs/promises";
import path from "node:path";
import BrowseHeader from "@/components/BrowseHeader";
import { Markdown } from "@/lib/markdown";
import { fmtAgo } from "@/lib/format";
import type { ProjectRef } from "@/lib/project-types";

// A report that is not yet a video. There is nothing to judge and nothing to
// build, so the page is the report itself plus the one action that matters:
// what it would take to make it a cut.

const SWEEP_RE = /(^|[-_])sweep([-_]report)?\.md$|^sweep-report\.md$/i;

export default async function SweepProject({ project }: { project: ProjectRef }) {
  const names = await readdir(project.dir).catch(() => [] as string[]);
  const reportName = names.find((n) => SWEEP_RE.test(n));
  const file = reportName ? path.join(project.dir, reportName) : null;
  const [text, st] = await Promise.all([
    file ? readFile(file, "utf8").catch(() => null) : null,
    file ? stat(file).catch(() => null) : null,
  ]);
  const citations = text ? (text.match(/\]\([^)]*[?&]v=/g) ?? []).length : 0;

  return (
    <div className="flex h-full flex-col">
      <BrowseHeader
        crumbs={[{ href: "/browse", label: "projects" }, { label: project.id }]}
        note={`${citations} citation${citations === 1 ? "" : "s"} · no manifest`}
      />
      <main className="deck-main flex-1 space-y-4 p-4">
        <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
          <h2 className="mb-1 text-[13px] text-[var(--color-text)]">A report, not yet a video</h2>
          <p className="text-[12px] text-[var(--color-dim)]">
            Turning it into one means writing a{" "}
            <code className="font-mono">video.manifest.json</code> beside it: one entry per
            clip, each with a window in absolute source seconds taken from{" "}
            <code className="font-mono">transcript.cues.json</code>. A report only records a
            single start second per citation, so the windows cannot be recovered from it alone —
            that matching is the work.
          </p>
          <p className="mt-1.5 text-[12px] text-[var(--color-dim)]">
            {citations > 0
              ? `${citations} citation${citations === 1 ? "" : "s"} to work from.`
              : "No `?v=` citations found, so there is nothing to match windows against yet."}{" "}
            See <code className="font-mono">umtool/docs/authoring.md</code>.
          </p>
        </section>

        {text ? (
          <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
            <div className="mb-2 flex items-baseline gap-2">
              <span className="font-mono text-[12px] text-[var(--color-text)]">{reportName}</span>
              {st && <span className="micro">{fmtAgo(st.mtimeMs)}</span>}
            </div>
            <div className="max-h-[60vh] overflow-y-auto">
              <Markdown text={text} />
            </div>
          </section>
        ) : (
          <p className="text-[12px] text-[var(--color-dim)]">
            No report file found under{" "}
            <code className="font-mono">{project.id}</code>.
          </p>
        )}

        <Link href="/browse" className="text-[12px] text-[var(--color-sel)] hover:underline">
          ← every project
        </Link>
      </main>
    </div>
  );
}