import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { Alert, AlertDescription } from "yt-dlp-transcript-common/components/ui/alert";
import { buildCleanupLedger, loadCleanupSummary } from "./lib/loadCleanup";
import { ChannelCleanupCard } from "./components/ChannelCleanupCard";
import { HoldSieve } from "./components/HoldSieve";
import { ReleaseLedger } from "./components/ReleaseLedger";
import { ChannelWorkTable } from "../components/channelWork/ChannelWorkTable";
import { sectionsFor } from "../components/channelWork/sections";
import { getActionableSummary } from "../lib/actionable/loadActionable";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Cleanup" };

export default async function CleanupPage() {
  const paths = getPaths();
  const summary = await loadCleanupSummary(paths);
  // The same request-cached briefs loadCleanupSummary just read, folded a
  // second way. The two cleanup sections are the only channel-work sections
  // that belong to no operation: they are bytes, and bytes are this page.
  const actionable = await getActionableSummary(paths);
  const {
    rows,
    includedReclaimBytes,
    totalReclaimBytes,
    includedExtraFormatsBytes,
    includedForeignBytes,
    includedCount,
    excludedCount,
  } = summary;

  const excludedReclaimBytes = totalReclaimBytes - includedReclaimBytes;
  const hasAnything = rows.length > 0;

  // Breakdown bar segments (share of the three reclaimable estimates across
  // INCLUDED channels). They overlap — alternative sweeps, not additive — so the
  // bar is a relative sense of where reclaimable audio sits, not a sum.
  const segTotal =
    includedReclaimBytes + includedExtraFormatsBytes + includedForeignBytes;
  const seg = (n: number) => (segTotal > 0 ? (n / segTotal) * 100 : 0);

  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <h1 className="text-2xl font-semibold">Cleanup</h1>
      </div>

      {/* Hero readout — the reclamation console. */}
      <section
        aria-label="reclaimable total"
        className="flex flex-col gap-4 rounded-xl border border-border bg-card p-5"
      >
        <div className="flex flex-wrap items-end justify-between gap-3">
          <div>
            <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
              Reclaimable across {includedCount} channel
              {includedCount === 1 ? "" : "s"}
            </p>
            <p
              className="font-display text-5xl font-semibold tabular-nums text-foreground"
              aria-label="total reclaimable bytes"
            >
              {formatBytes(includedReclaimBytes)}
            </p>
          </div>
          {excludedCount > 0 && (
            <p className="font-mono text-xs text-muted-foreground">
              {excludedCount} channel{excludedCount === 1 ? "" : "s"} excluded
              {excludedReclaimBytes > 0 && (
                <> · ~{formatBytes(excludedReclaimBytes)} held back</>
              )}
            </p>
          )}
        </div>

        {segTotal > 0 && (
          <div className="flex flex-col gap-1.5">
            <div
              className="flex h-2 w-full overflow-hidden rounded-full bg-muted"
              role="img"
              aria-label="reclaimable audio breakdown"
            >
              <span
                className="h-full bg-[var(--chart-1)]"
                style={{ width: `${seg(includedReclaimBytes)}%` }}
              />
              <span
                className="h-full bg-[var(--chart-3)]"
                style={{ width: `${seg(includedExtraFormatsBytes)}%` }}
              />
              <span
                className="h-full bg-[var(--chart-5)]"
                style={{ width: `${seg(includedForeignBytes)}%` }}
              />
            </div>
            <div className="flex flex-wrap gap-x-4 gap-y-1 font-mono text-[11px] text-muted-foreground">
              <Legend swatch="var(--chart-1)" label="Transcribed audio" value={includedReclaimBytes} />
              <Legend swatch="var(--chart-3)" label="Extra formats" value={includedExtraFormatsBytes} />
              <Legend swatch="var(--chart-5)" label="Wrong-format" value={includedForeignBytes} />
            </div>
          </div>
        )}

        <Alert role="status">
          <AlertDescription>
            The total is the primary <strong>Clean audio</strong> reclaim (audio
            kept beside finished transcripts). Extra-format and wrong-format
            sweeps overlap it, so they&apos;re shown per channel rather than
            added in. Per-video <em>do-not-clean</em> pins and the keep-latest
            window are already excluded. Toggle a channel to hold its space back
            from the total without losing the sweep.
          </AlertDescription>
        </Alert>
      </section>

      {/* Why the rest of it is still on disk, and what to run to get it back.
          The hero answers "how much can I reclaim right now"; these two answer
          the question an operator with weeks of queued GPU work actually has. */}
      <HoldSieve summary={summary} />
      <ReleaseLedger ledger={buildCleanupLedger(summary)} />

      {!hasAnything ? (
        <p className="text-sm text-muted-foreground border border-dashed border-border rounded p-4">
          No channels yet.
        </p>
      ) : (
        <section aria-label="channel cleanup ledger" className="flex flex-col gap-3">
          {rows.map((r) => (
            <ChannelCleanupCard
              key={r.channel.slug}
              slug={r.channel.slug}
              name={r.channel.config.name ?? r.channel.slug}
              included={r.included}
              transcribedBytes={r.transcribedBytes}
              extraFormatsBytes={r.extraFormatsBytes}
              foreignBytes={r.foreignBytes}
              hasTargetFormat={r.hasTargetFormat}
              failedTranscriptions={r.failedTranscriptions}
            />
          ))}
        </section>
      )}

      {/* BELOW the cards, because the page is an argument in order: hero, then
          the sieve, then the release ledger, then the per-channel cards — and
          these tables are the "do it" step at the end of it.

          NOT merged into ChannelCleanupCard, deliberately, and out of scope for
          this slice: the card is per-channel and these are per-bucket lists
          across channels, and collapsing one into the other is a redesign of
          the card, not a move. */}
      <ChannelWorkTable sections={sectionsFor(null)} summary={actionable} />

      <p className="text-xs text-muted-foreground">
        Estimates come from each channel&apos;s last report — run{" "}
        <Link href="/channels" className="underline hover:text-foreground">
          Refresh reports
        </Link>{" "}
        to recompute. Whole-channel and per-video deletion stay on the{" "}
        <Link href="/channels" className="underline hover:text-foreground">
          channel
        </Link>{" "}
        pages.
      </p>
    </div>
  );
}

function Legend({
  swatch,
  label,
  value,
}: {
  swatch: string;
  label: string;
  value: number;
}) {
  return (
    <span className="inline-flex items-center gap-1.5">
      <span
        aria-hidden="true"
        className="inline-block h-2 w-2 rounded-[2px]"
        style={{ background: swatch }}
      />
      {label} · {value > 0 ? `~${formatBytes(value)}` : "—"}
    </span>
  );
}