import Link from "next/link";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import {
  STATION_DOT,
  STATION_TEXT,
  formatCount,
} from "yt-dlp-transcript-common/views/pipeline/tone";
import type { StageTone } from "yt-dlp-transcript-common/views/pipeline/stageStatus";
import type { CleanupSummary } from "../lib/loadCleanup";

// THE SIEVE. The cleanup sweep is a cascade of `continue`s — a video leaves at
// the FIRST gate it hits — so this is the shape the page takes: all the audio on
// disk enters at the top, each gate siphons off its share, and the remainder
// steps down the column to the reclaimable figure the hero already prints.
//
// The gates are NUMBERED because they genuinely are a sequence. The order IS the
// attribution rule, and it is the only thing stopping the five figures from
// double-counting each other.
//
// No new colours, no new type. The rail and its station dots are the transit
// vocabulary the channel page established (flow/tone.ts, which the two maps are
// imported from rather than copied — laneState.ts warns that a third copy would
// guarantee drift), and the bars use the same --chart-N tokens as the hero bar
// directly above.

type Gate = {
  n: number;
  label: string;
  // What clears it. Split so the prescription can be a link where one exists.
  clears: React.ReactNode;
  bytes: number;
  count: number;
  // Bytes inside this gate that NOTHING queued will ever release.
  neverClears?: number;
};

export function HoldSieve({ summary }: { summary: CleanupSummary }) {
  const {
    totalAudioBytes,
    heldBytes,
    heldCounts,
    measuredReclaimBytes,
    atRiskBytes,
    staleSnapshotCount,
  } = summary;

  // Nothing measured at all: every figure would be a zero nobody computed.
  if (totalAudioBytes <= 0) {
    return (
      <section
        aria-label="audio hold sieve"
        className="flex flex-col gap-2 rounded-xl border border-border bg-card p-5"
      >
        <Eyebrow>Audio on disk</Eyebrow>
        <p
          className="font-display text-3xl font-semibold tabular-nums text-muted-foreground"
          aria-label="total audio on disk"
        >
          —
        </p>
        <p className="text-sm text-muted-foreground">
          {staleSnapshotCount > 0 ? (
            <>
              No report yet says what is holding this audio.{" "}
              <RefreshLink /> to measure it.
            </>
          ) : (
            <>No audio on disk.</>
          )}
        </p>
      </section>
    );
  }

  const gates: Gate[] = [
    {
      n: 1,
      label: "no transcript yet",
      clears: "run: Transcribe",
      bytes: heldBytes.noTranscript,
      count: heldCounts.noTranscript,
    },
    {
      n: 2,
      label: "keep-latest window",
      clears: "setting: keepLatest",
      bytes: heldBytes.keepLatest,
      count: heldCounts.keepLatest,
    },
    {
      n: 3,
      label: "do-not-clean pins",
      clears: "unpin on the video",
      bytes: heldBytes.doNotClean,
      count: heldCounts.doNotClean,
    },
    {
      n: 4,
      label: "awaiting diarization",
      clears: "run: Diarize",
      bytes: heldBytes.awaitingDiarization,
      count: heldCounts.awaitingDiarization,
      neverClears: heldBytes.diarizationNeverClears,
    },
  ];

  // The remainder after each gate, which is what the column steps down.
  let remainder = totalAudioBytes;
  const steps = gates.map((gate) => {
    remainder -= gate.bytes;
    return { gate, remainder: Math.max(0, remainder) };
  });

  const pct = (n: number) => (n / totalAudioBytes) * 100;

  return (
    <section
      aria-label="audio hold sieve"
      className="flex flex-col gap-4 rounded-xl border border-border bg-card p-5"
    >
      {/* Everything on disk enters here. */}
      <div className="flex flex-wrap items-end justify-between gap-x-4 gap-y-1">
        <Eyebrow>Audio on disk</Eyebrow>
        <p
          className="font-display text-3xl font-semibold tabular-nums text-foreground"
          aria-label="total audio on disk"
        >
          ~{formatBytes(totalAudioBytes)}
        </p>
      </div>
      <Bar>
        <span className="h-full bg-[var(--chart-1)]" style={{ width: "100%" }} />
      </Bar>

      {/* The rail. One gate per station, in the sweep's own order. */}
      <ol className="flex flex-col border-l border-border pl-4 sm:pl-5">
        {steps.map(({ gate, remainder: left }) => (
          <GateRow key={gate.n} gate={gate} remainder={left} pct={pct} />
        ))}
      </ol>

      {/* What survives all four — the number the page already leads with. */}
      <div className="flex flex-col gap-1.5">
        <div className="flex flex-wrap items-end justify-between gap-x-4 gap-y-1">
          <span className="flex items-center gap-2">
            <span
              aria-hidden="true"
              className={`inline-block h-2 w-2 shrink-0 rounded-full ${STATION_DOT.ok}`}
            />
            <Eyebrow>Reclaimable now</Eyebrow>
          </span>
          <p
            className="font-display text-3xl font-semibold tabular-nums text-foreground"
            aria-label="reclaimable after holds"
          >
            ~{formatBytes(measuredReclaimBytes)}
          </p>
        </div>
        <Bar>
          <span
            className="h-full bg-[var(--chart-1)]"
            style={{ width: `${pct(measuredReclaimBytes)}%` }}
          />
        </Bar>
      </div>

      {atRiskBytes > 0 && (
        <p className="font-mono text-[11px] text-muted-foreground">
          the upstream check may still refuse ~{formatBytes(atRiskBytes)} cached
          as gone-from-source
        </p>
      )}
      {staleSnapshotCount > 0 && (
        <p className="font-mono text-[11px] text-muted-foreground">
          {staleSnapshotCount} channel{staleSnapshotCount === 1 ? "" : "s"} not
          in this measurement — <RefreshLink /> to include{" "}
          {staleSnapshotCount === 1 ? "it" : "them"}.
        </p>
      )}
    </section>
  );
}

function GateRow({
  gate,
  remainder,
  pct,
}: {
  gate: Gate;
  remainder: number;
  pct: (n: number) => number;
}) {
  const held = gate.bytes > 0;
  const never = gate.neverClears ?? 0;
  // A gate holding nothing is an outline, not a filled dot — the tone map's own
  // rule. A gate holding audio nothing will ever release is the one danger on
  // the page, and it earns it.
  const tone: StageTone = never > 0 ? "danger" : held ? "attention" : "neutral";
  const clearsBytes = Math.max(0, gate.bytes - never);

  return (
    <li
      aria-label={`gate ${gate.n} ${gate.label}`}
      data-gate={gate.n}
      data-held-bytes={gate.bytes}
      data-held-count={gate.count}
      className="relative flex flex-col gap-1 py-2"
    >
      {/* The tick joining this station to the rail. */}
      <span
        aria-hidden="true"
        className="absolute -left-4 top-[1.1rem] h-px w-3 bg-border sm:-left-5 sm:w-4"
      />
      <span
        aria-hidden="true"
        className={`absolute -left-[1.3rem] top-4 inline-block h-2 w-2 rounded-full ${STATION_DOT[tone]} sm:-left-[1.55rem]`}
      />

      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5">
        <span
          aria-hidden="true"
          className="font-mono text-[11px] tabular-nums text-muted-foreground"
        >
          {gate.n}
        </span>
        <span className={`text-sm ${STATION_TEXT[tone]}`}>{gate.label}</span>
        <span
          className="font-mono text-xs tabular-nums text-foreground"
          aria-label={`${gate.label} held`}
        >
          {gate.bytes > 0 ? `~${formatBytes(gate.bytes)}` : "—"}
        </span>
        <span className="font-mono text-xs tabular-nums text-muted-foreground">
          {gate.count > 0 ? formatCount(gate.count) : "—"} vids
        </span>
        <span
          className="ml-auto font-mono text-xs tabular-nums text-muted-foreground"
          aria-label={`remaining after gate ${gate.n}`}
        >
          → ~{formatBytes(remainder)}
        </span>
      </div>

      {/* What is left, and what this gate just took out of it. */}
      <Bar>
        <span
          className="h-full bg-[var(--chart-1)]"
          style={{ width: `${pct(remainder)}%` }}
        />
        <span
          className="h-full bg-[var(--chart-3)]"
          style={{ width: `${pct(clearsBytes)}%` }}
        />
        {never > 0 && (
          // The one risk this page takes. Not a new colour — the SAME token,
          // struck through with a repeating gradient, because the honest thing
          // to say about this slice is that it is the rest of the bar plus a
          // permanent defect. It is the one number nothing else in the app can
          // tell you, and the reason the page is worth building.
          <span
            className="h-full bg-[var(--chart-5)]"
            style={{
              width: `${pct(never)}%`,
              backgroundImage:
                "repeating-linear-gradient(45deg, transparent 0 3px, var(--card) 3px 5px)",
            }}
          />
        )}
      </Bar>

      <p className="font-mono text-[11px] text-muted-foreground">
        {gate.clears}
        {never > 0 && (
          <>
            {" · "}
            <span className="text-destructive">
              ~{formatBytes(never)} will not clear on its own
            </span>
          </>
        )}
      </p>
    </li>
  );
}

function Bar({ children }: { children: React.ReactNode }) {
  return (
    <div
      className="flex h-2 w-full overflow-hidden rounded-full bg-muted"
      role="presentation"
    >
      {children}
    </div>
  );
}

function Eyebrow({ children }: { children: React.ReactNode }) {
  return (
    <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
      {children}
    </p>
  );
}

function RefreshLink() {
  return (
    <Link href="/channels" className="underline hover:text-foreground">
      Refresh reports
    </Link>
  );
}