import Link from "next/link";
import { deliverStateOf } from "@/lib/report/deliver.mjs";
import { badgeVariants } from "@/components/ui/badge";
import type { ProjectRef } from "@/lib/project-types";
import DeliverActions from "./DeliverActions";

// ---------------------------------------------------------------------------
// DELIVER: the half of the work that starts when the walk ends.
//
// The bench answers one question per clip. What the report owes its readers is
// a different list -- which sections were actually confirmed, which confirmed
// clips have no file yet, which prose still cites a clip the walk threw out --
// and until now that list lived in one project's shell scripts and in whoever
// remembered to run them in order.
//
// COUNTED BY SECTION, because that is how the report is read and how it falls
// apart: "69 of 163 confirmed" says nothing about a section where eleven of
// nineteen clips were ruled wrong, and that section is the one whose argument
// has to change.
// ---------------------------------------------------------------------------

type Section = {
  letter: string;
  heading: string | null;
  folder: string;
  total: number;
  confirmed: number;
  incorrect: number;
  unreviewed: number;
  cut: number;
};

type State = {
  sections: Section[];
  review: { total: number; confirmed: number; incorrect: number; unreviewed: number };
  cut: number;
  needCut: { id: string; seconds: number }[];
  notFetched: string[];
  batches: { name: string; label: string; count: number; hasList: boolean }[];
  excluded: { shared: string[]; incorrect: string[] };
  candidates: { id: string; section: string; file: string }[];
  nextName: string;
  variants: { file: string; module: string; out: string }[];
  incorrect: { id: string; correction: string; hits: { file: string; line: number; text: string }[] }[];
  hasApplyScript: boolean;
  hasBuildScript: boolean;
  storage: Storage;
};

/** Where the deliverables live (lib/report/storage.mjs deliverablesState, release 17). */
type Storage = {
  mode: "local" | "media" | null;
  value: unknown;
  error?: string;
  tiered: boolean;
  mediaRoot: string | null;
  dirs: { name: string; state: string; target?: string; leftovers: string[] }[];
  cutBlocked: string[];
  shareBlocked: string[];
};

export default async function DeliverSection({
  project,
  manifest,
  entries,
}: {
  project: ProjectRef;
  manifest: unknown;
  /** readClipDetail's entries, so `fetched` is the bench's own answer. */
  entries: unknown[];
}) {
  const state = (await deliverStateOf(project, { manifest, entries })) as State | null;
  // A timeline with no clips has nothing to deliver, and a panel of zeroes on
  // every card-only cut is noise on a page that is already long.
  if (!state || !state.review.total) return null;
  const { review } = state;

  return (
    <section
      data-deliver=""
      data-deliver-confirmed={review.confirmed}
      data-deliver-incorrect={review.incorrect}
      data-deliver-unreviewed={review.unreviewed}
      data-deliver-need-cut={state.needCut.length}
      className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2"
    >
      <div className="mb-1.5 flex flex-wrap items-baseline gap-3">
        <h2 className="micro">deliver</h2>
        <span className="num text-[11px] text-[var(--color-dim)]">
          {review.confirmed} confirmed · {review.incorrect} incorrect · {review.unreviewed} not yet
          judged · {state.cut} of {review.confirmed} cut
        </span>
      </div>

      {/* --- by section ------------------------------------------------- */}
      <div className="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">section</th>
              <th className="px-1.5 py-0.5">clips</th>
              <th className="px-1.5 py-0.5">confirmed</th>
              <th className="px-1.5 py-0.5">incorrect</th>
              <th className="px-1.5 py-0.5">unjudged</th>
              <th className="px-1.5 py-0.5">cut</th>
            </tr>
          </thead>
          <tbody>
            {state.sections.map((s) => (
              <tr
                key={s.letter}
                data-section={s.letter}
                data-section-confirmed={s.confirmed}
                data-section-incorrect={s.incorrect}
                data-section-unreviewed={s.unreviewed}
                className="border-t border-[var(--color-line)] align-top"
              >
                <td className="px-1.5 py-1">
                  <span className="font-mono text-[var(--color-sel)]">{s.letter}</span>{" "}
                  <span className="text-[var(--color-dim)]">{s.heading ?? "—"}</span>
                </td>
                <td className="num px-1.5 py-1">{s.total}</td>
                <td className="num px-1.5 py-1 text-[var(--color-good)]">{s.confirmed}</td>
                <td className="num px-1.5 py-1">
                  {s.incorrect ? (
                    <span className="text-[var(--color-bad)]">{s.incorrect}</span>
                  ) : (
                    <span className="text-[var(--color-dim)]">—</span>
                  )}
                </td>
                <td className="num px-1.5 py-1 text-[var(--color-dim)]">{s.unreviewed || "—"}</td>
                <td className="num px-1.5 py-1 text-[var(--color-dim)]">
                  {s.cut} / {s.confirmed}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* --- the actions ------------------------------------------------ */}
      <div className="mt-2">
        <DeliverActions
          project={project.id}
          needCut={state.needCut.length}
          notFetched={state.notFetched.length}
          candidates={state.candidates.length}
          nextName={state.nextName}
          unreviewed={review.unreviewed}
          hasApply={state.hasApplyScript}
          hasBuild={state.hasBuildScript}
          variants={state.variants.map((v) => ({ module: v.module, out: v.out }))}
          storage={{
            mode: state.storage.mode,
            tiered: state.storage.tiered,
            // What would stop a move: a link whose drive is not there, or a cut
            // move's leftovers (a move refuses over both, and says so).
            blocked: state.storage.dirs.flatMap((d) =>
              d.state === "dangling"
                ? [`${d.name}/ is a link to ${d.target}, which is not there — is the media drive mounted?`]
                : [],
            ),
            cutBlocked: state.storage.cutBlocked,
            shareBlocked: state.storage.shareBlocked,
          }}
        />
      </div>

      {/* --- where the deliverables live (release 17) --------------------- */}
      {/*
        clips/ and every share-* live in the project, or on the media root
        behind a link, as the manifest's storage.deliverables says. A reader
        opens them by path either way; this line is the one place that says
        which, and what each directory is right now.
      */}
      <p
        data-deliverables={state.storage.mode ?? "invalid"}
        className="mt-2 text-[11px] text-[var(--color-dim)]"
      >
        <span className="micro">deliverables — </span>
        {state.storage.mode === "media"
          ? "on the media root"
          : state.storage.mode === "local"
            ? "in the project"
            : `storage.deliverables is not "local" or "media"`}
        {state.storage.mode === "media" && state.storage.mediaRoot && (
          <>
            {" "}
            (<code className="font-mono">{state.storage.mediaRoot}</code>)
          </>
        )}
        {state.storage.dirs.map((d) => (
          <span key={d.name} data-deliverable={d.name} data-deliverable-state={d.state}>
            {" · "}
            <code className="font-mono">{d.name}/</code>{" "}
            <span
              className={
                d.state === "dangling" || d.leftovers.length ? "text-[var(--color-bad)]" : undefined
              }
            >
              {d.state === "dangling"
                ? "link, NOT THERE"
                : d.state === "dir"
                  ? "here"
                  : d.state === "absent"
                    ? "moving"
                    : d.state}
              {d.leftovers.length ? ` (a cut move left ${d.leftovers.join(", ")})` : ""}
            </span>
          </span>
        ))}
        {state.storage.dirs.length === 0 && " · nothing cut or shared yet"}
      </p>

      {/* --- confirmed, but no file yet ---------------------------------- */}
      {state.needCut.length > 0 && (
        <p data-need-cut="" className="mt-2 text-[11px] text-[var(--color-dim)]">
          <span className="micro">no file yet — </span>
          {state.needCut.map((c, i) => (
            <span key={c.id}>
              {i > 0 && " "}
              <Link
                href={`/browse/${project.id}/clip/${c.id}`}
                data-need-cut-id={c.id}
                className="font-mono text-[var(--color-sel)] hover:underline"
              >
                {c.id}
              </Link>
            </span>
          ))}
        </p>
      )}

      {/* --- confirmed, and nothing cached to cut from -------------------- */}
      {/*
        A DIFFERENT PROBLEM, and it needs a different button. Nothing here
        fetches: the clip's window is a download, which the bench already has a
        managed path for (the editor's fetch, with its cookie policy and its
        per-platform sleeps). So this lists them and links to the clip page
        where that button lives.
      */}
      {state.notFetched.length > 0 && (
        <p data-not-fetched="" className="mt-1 text-[11px]">
          <span className="micro">not fetched — </span>
          {state.notFetched.map((id, i) => (
            <span key={id}>
              {i > 0 && " "}
              <Link
                href={`/browse/${project.id}/clip/${id}`}
                data-not-fetched-id={id}
                className="font-mono text-[var(--color-dirty)] hover:underline"
              >
                {id}
              </Link>
            </span>
          ))}
          <span className="ml-1 text-[var(--color-dim)]">
            — open one and fetch its window through the editor, then cut.
          </span>
        </p>
      )}

      {/* --- prose that still cites a clip the walk threw out -------------- */}
      {state.incorrect.length > 0 && (
        <div data-incorrect-citations="" className="mt-2 space-y-1.5">
          <h3 className="micro">
            prose citing an incorrect clip — {state.incorrect.length}
          </h3>
          {state.incorrect.map((c) => (
            <div key={c.id} data-incorrect={c.id} className="text-[11px] leading-snug">
              <Link
                href={`/browse/${project.id}/clip/${c.id}`}
                className="font-mono text-[var(--color-sel)] hover:underline"
              >
                {c.id}
              </Link>{" "}
              <span className="text-[var(--color-dim)]">{c.correction}</span>
              {c.hits.length === 0 ? (
                <div className="text-[var(--color-dim)]">(no reference found in the prose)</div>
              ) : (
                <ul className="mt-0.5 space-y-0.5">
                  {c.hits.map((h) => (
                    <li key={`${h.file}:${h.line}`} className="font-mono text-[10px] text-[var(--color-dim)]">
                      <span className="text-[var(--color-text)]">
                        {h.file}:{h.line}
                      </span>{" "}
                      {h.text}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}
          <p className="text-[11px] text-[var(--color-dim)]">
            Nothing here rewrites prose: what a wrong clip does to an argument is a judgement about
            the argument. Fix the lines, then rebuild.
          </p>
        </div>
      )}

      {/* --- batches already sent ---------------------------------------- */}
      <p className="mt-2 text-[11px] text-[var(--color-dim)]">
        {state.batches.length ? (
          <>
            <span className="micro">batches — </span>
            {state.batches.map((b, i) => (
              <span key={b.name} data-batch={b.name}>
                {i > 0 && " · "}
                <code className="font-mono">{b.name}</code> ({b.count})
              </span>
            ))}
            {". "}
          </>
        ) : (
          "no batch has been packaged yet. "
        )}
        The next one ships {state.candidates.length} clip
        {state.candidates.length === 1 ? "" : "s"}: every confirmed clip with a file, minus the{" "}
        {state.excluded.shared.length} already shared and the {state.excluded.incorrect.length}{" "}
        ruled incorrect.
      </p>

      {state.variants.length > 0 && (
        <p className="mt-1 text-[11px] text-[var(--color-dim)]">
          <span className="micro">reports — </span>
          {state.variants.map((v, i) => (
            <span key={v.module}>
              {i > 0 && " · "}
              <code className="font-mono">{v.file}</code> →{" "}
              <span className={badgeVariants({ variant: "info", size: "sm" })}>{v.out}</span>
            </span>
          ))}
        </p>
      )}
    </section>
  );
}