"use client";

import { useState } from "react";
import Link from "next/link";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { formatCount } from "yt-dlp-transcript-common/views/pipeline/tone";
import { cancelJobAction } from "../../jobs/actions";
import {
  transcribeBucketAction,
  transcribeAutoSubsBucketAction,
  diarizeChannelAction,
} from "../../channels/[slug]/whisperActions";
import type { CleanupLedger, LedgerRow } from "../lib/loadCleanup";

// THE RELEASE LEDGER. The sieve says what is holding the audio; this says what
// to run to get it back, split by WHAT IT COSTS to release — a run of a lane
// that is already weeks deep, or a setting that frees the space the moment it
// changes. That split is a true property of the data, and it is the sharpest
// answer to "what frees space quickest".
//
// Channels rank by held bytes, descending, inside each group.

const ROW_LIMIT = 5;

export function ReleaseLedger({ ledger }: { ledger: CleanupLedger }) {
  const { noTranscript, awaitingDiarization, notCounted, keepLatest, doNotClean } =
    ledger;
  const hasRuns = noTranscript.bytes > 0 || awaitingDiarization.bytes > 0;
  const hasSettings =
    notCounted.bytes > 0 || keepLatest.bytes > 0 || doNotClean.bytes > 0;
  if (!hasRuns && !hasSettings) return null;

  return (
    <section
      aria-label="release ledger"
      className="flex flex-col gap-6 rounded-xl border border-border bg-card p-5"
    >
      {hasRuns && (
        <div className="flex flex-col gap-4">
          <Eyebrow>Costs a run</Eyebrow>

          {noTranscript.bytes > 0 && (
            <GateGroup
              n={1}
              label="no transcript"
              bytes={noTranscript.bytes}
              count={noTranscript.count}
              rows={noTranscript.rows}
              action={(row) => <TranscribeButtons row={row} />}
            />
          )}

          {awaitingDiarization.bytes > 0 && (
            <GateGroup
              n={4}
              label="awaiting diarization"
              bytes={awaitingDiarization.bytes}
              count={awaitingDiarization.count}
              rows={awaitingDiarization.rows}
              // Diarize takes no id list, so every row can act — the cap on the
              // Transcribe rows is a payload bound, not a display rule.
              action={(row) => (
                <StreamActionLog
                  trigger={() => diarizeChannelAction(row.slug)}
                  cancelAction={cancelJobAction}
                  buttonLabel="Diarize"
                  runningLabel="Diarizing…"
                  label={`Diarize ${row.slug}`}
                />
              )}
              note={
                awaitingDiarization.neverClearsBytes > 0 ? (
                  <span className="text-destructive">
                    ~{formatBytes(awaitingDiarization.neverClearsBytes)} of this
                    will not clear on its own — those videos are over the
                    diarization limit, have no diarizable input, or the lane is
                    not configured to run at all.
                  </span>
                ) : undefined
              }
            />
          )}
        </div>
      )}

      {hasSettings && (
        <div className="flex flex-col gap-3">
          <Eyebrow>Frees on a setting</Eyebrow>

          {/* Stated precisely, and deliberately NOT called a hold.
              excludeFromCleanup is display-only — the sweep never reads it — so
              this space is already reclaimable today. Excluding a channel hides
              it from the total; it does not protect it. */}
          {notCounted.bytes > 0 && (
            <SettingRow
              label="Not counted"
              bytes={notCounted.bytes}
              meta={`${notCounted.channels} channel${notCounted.channels === 1 ? "" : "s"}`}
              hint="already cleanable — just hidden from the total"
              rows={notCounted.rows}
            />
          )}
          {keepLatest.bytes > 0 && (
            <SettingRow
              label="Keep-latest window"
              bytes={keepLatest.bytes}
              meta={`${formatCount(keepLatest.count)} vids · ${keepLatest.channels} channel${keepLatest.channels === 1 ? "" : "s"}`}
              hint="lower keepLatest on a channel"
            />
          )}
          {doNotClean.bytes > 0 && (
            <SettingRow
              label="Do-not-clean pins"
              bytes={doNotClean.bytes}
              meta={`${formatCount(doNotClean.count)} vids · ${doNotClean.channels} channel${doNotClean.channels === 1 ? "" : "s"}`}
              hint="unpin from the video"
            />
          )}
        </div>
      )}
    </section>
  );
}

function GateGroup({
  n,
  label,
  bytes,
  count,
  rows,
  action,
  note,
}: {
  n: number;
  label: string;
  bytes: number;
  count: number;
  rows: LedgerRow[];
  action: (row: LedgerRow) => React.ReactNode;
  note?: React.ReactNode;
}) {
  const { shown, hidden, expanded, toggle } = useExpandableList(rows, ROW_LIMIT);
  return (
    <div className="flex flex-col gap-1.5" aria-label={`release ${label}`}>
      <p className="flex flex-wrap items-baseline gap-x-2 text-sm">
        <span
          aria-hidden="true"
          className="font-mono text-[11px] tabular-nums text-muted-foreground"
        >
          {n}
        </span>
        <span className="text-foreground">{label}</span>
        <span className="font-mono text-xs tabular-nums text-muted-foreground">
          — ~{formatBytes(bytes)} · {formatCount(count)} vids
        </span>
      </p>
      {note && (
        <p className="font-mono text-[11px] leading-relaxed">{note}</p>
      )}
      <ul className="flex flex-col">
        {shown.map((row) => (
          <li
            key={row.slug}
            aria-label={`${label} ${row.slug}`}
            data-held-bytes={row.bytes}
            className="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border/60 py-1.5 last:border-b-0"
          >
            <Link
              href={`/channels/${row.slug}`}
              className="min-w-0 max-w-[14rem] truncate font-mono text-xs text-foreground hover:text-brand"
              title={row.slug}
            >
              {row.name}
            </Link>
            <span className="font-mono text-xs tabular-nums text-foreground">
              ~{formatBytes(row.bytes)}
            </span>
            <span className="font-mono text-xs tabular-nums text-muted-foreground">
              {formatCount(row.count)} vids
            </span>
            <span className="ml-auto flex flex-wrap items-center gap-1.5">
              {action(row)}
            </span>
          </li>
        ))}
        <ListOverflowToggle
          hidden={hidden}
          expanded={expanded}
          onToggle={toggle}
          noun="channel"
        />
      </ul>
    </div>
  );
}

// The Transcribe half of the prescription. Two buttons at most, and the second
// only when the channel HAS ASR-only videos: those carry an English VTT, so they
// are absent from downloadedNoTranscript and are still holding their audio.
function TranscribeButtons({ row }: { row: LedgerRow }) {
  const ids = row.transcribeIds;
  const auto = row.autoSubsIds;
  if (!ids) {
    // Past the id cap — the same control lives on the channel page.
    return (
      <Link
        href={`/channels/${row.slug}?stage=transcribe`}
        className="font-mono text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
      >
        on the channel
      </Link>
    );
  }
  return (
    <>
      {ids.length > 0 && (
        <StreamActionLog
          trigger={() =>
            transcribeBucketAction(
              row.slug,
              ids,
              undefined,
              undefined,
              false,
              "downloadedNoTranscript",
            )
          }
          cancelAction={cancelJobAction}
          buttonLabel={`Transcribe ${ids.length}`}
          runningLabel="Transcribing…"
          label={`Transcribe ${row.slug}`}
        />
      )}
      {auto && auto.length > 0 && (
        <StreamActionLog
          trigger={() => transcribeAutoSubsBucketAction(row.slug, auto)}
          cancelAction={cancelJobAction}
          buttonLabel={`Transcribe ${auto.length} ASR-only`}
          runningLabel="Transcribing…"
          label={`Transcribe ASR-only ${row.slug}`}
        />
      )}
      {ids.length === 0 && (!auto || auto.length === 0) && (
        <Link
          href={`/channels/${row.slug}?stage=transcribe`}
          className="font-mono text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
        >
          on the channel
        </Link>
      )}
    </>
  );
}

function SettingRow({
  label,
  bytes,
  meta,
  hint,
  rows,
}: {
  label: string;
  bytes: number;
  meta: string;
  hint: string;
  rows?: LedgerRow[];
}) {
  const { shown, hidden, expanded, toggle } = useExpandableList(
    rows ?? [],
    ROW_LIMIT,
  );
  return (
    <div className="flex flex-col gap-1" aria-label={`release ${label}`}>
      <p className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5 text-sm">
        <span className="text-foreground">{label}</span>
        <span
          className="font-mono text-xs tabular-nums text-foreground"
          aria-label={`${label} bytes`}
        >
          ~{formatBytes(bytes)}
        </span>
        <span className="font-mono text-xs tabular-nums text-muted-foreground">
          {meta}
        </span>
        <span className="font-mono text-[11px] text-muted-foreground">
          {hint}
        </span>
      </p>
      {rows && rows.length > 0 && (
        <ul className="flex flex-col pl-3">
          {shown.map((row) => (
            <li
              key={row.slug}
              aria-label={`${label} ${row.slug}`}
              className="flex flex-wrap items-center gap-x-3 py-0.5"
            >
              <Link
                href={`/channels/${row.slug}`}
                className="min-w-0 max-w-[14rem] truncate font-mono text-xs text-muted-foreground hover:text-brand"
                title={row.slug}
              >
                {row.name}
              </Link>
              <span className="font-mono text-xs tabular-nums text-muted-foreground">
                ~{formatBytes(row.bytes)}
              </span>
            </li>
          ))}
          <ListOverflowToggle
            hidden={hidden}
            expanded={expanded}
            onToggle={toggle}
            noun="channel"
          />
        </ul>
      )}
    </div>
  );
}

// Mirrors the widget's list disclosure (MonitorWidget.tsx) — same rule: `hidden`
// is computed against the LIMIT, not against what is shown, so the control keeps
// its label once expanded instead of vanishing mid-use.
function useExpandableList<T>(items: T[], limit: number) {
  const [expanded, setExpanded] = useState(false);
  const hidden = Math.max(0, items.length - limit);
  return {
    shown: expanded ? items : items.slice(0, limit),
    hidden,
    expanded,
    toggle: () => setExpanded((e) => !e),
  };
}

function ListOverflowToggle({
  hidden,
  expanded,
  onToggle,
  noun,
}: {
  hidden: number;
  expanded: boolean;
  onToggle: () => void;
  noun: string;
}) {
  if (hidden === 0) return null;
  return (
    <li>
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={expanded}
        className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground"
      >
        {expanded
          ? "Show fewer"
          : `+${hidden} more ${hidden === 1 ? noun : `${noun}s`}`}
      </button>
    </li>
  );
}

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