"use client";

import { Fragment, useState, type CSSProperties, type ReactNode } from "react";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { usePolledPayload, useNow } from "../../lib/usePolledPayload";
import { fmtTime } from "../lib/relativeTime";
import type {
  ActiveJobsPayload,
  DiskStatusView,
} from "yt-dlp-transcript-common/views/activeJobs";
import type { JobRowView } from "yt-dlp-transcript-common/views/jobRowView";
import { JobRow } from "../../jobs/components/JobRow";
import type { WorkersPayload, WorkerView } from "yt-dlp-transcript-common/views/workers";
import { InlineActionButton } from "../../components/actions/InlineActionButton";
import type { WidgetActionablePayload } from "yt-dlp-transcript-common/views/widgetActionable";
import type {
  CleanablePayload,
  CleanableChannel,
} from "yt-dlp-transcript-common/views/cleanable";
import type { WidgetSyncPayload } from "yt-dlp-transcript-common/views/widgetSync";
import {
  buildWidgetQuery,
  patchWidgetConfig,
  type WidgetConfig,
} from "../lib/config";
import { hasFillRow, type Cell, type Layout, type Row } from "../lib/placement";
import type { SectionId } from "../lib/sections";
import {
  SectionFrameProvider,
  WidgetSection,
  useSectionFrame,
} from "./WidgetSection";
import { WidgetMenu } from "./WidgetMenu";
import { WidgetControls } from "./WidgetControls";

// Read-only monitor widget. Reuses the existing ~1s poll pattern from the
// /jobs table / WorkersView against the same /api endpoints, but renders a
// compact, control-free view meant to fit in a small pinned window or iframe.

export function MonitorWidget({
  config: initialConfig,
  initialJobs,
  initialWorkers,
}: {
  config: WidgetConfig;
  initialJobs: ActiveJobsPayload | null;
  initialWorkers: WorkersPayload | null;
}) {
  // The URL (parsed into `initialConfig` server-side) is authoritative, so we
  // seed state from the prop only — never localStorage — to keep the first
  // client render byte-identical to the server's. The in-widget settings gear
  // edits this state and mirrors it back into the address bar (see `patch`), so
  // a reload re-parses the same config.
  const [config, setConfig] = useState<WidgetConfig>(initialConfig);
  const [settingsOpen, setSettingsOpen] = useState(false);
  // Drives the relative "5m ago" labels in the sync readouts; null until mounted.
  const now = useNow();

  const pollMs = config.pollSeconds * 1000;
  // The controls row needs live `paused` state, so poll workers whenever either
  // the Workers section or the controls are shown.
  const workersEnabled = config.workers || config.controls;
  // The DISK strip rides this payload too, so the gate can't just be
  // `config.jobs`: `?jobs=0&disk=1` polled nothing and rendered nothing, with
  // no clue that it was the gate rather than the disk gate being off. Same
  // pre-existing shape as the sync payload's gate below.
  const { data: jobsPayload } = usePolledPayload<ActiveJobsPayload>(
    "/api/view/activeJobs",
    config.jobs || config.disk,
    pollMs,
    initialJobs,
  );
  const { data: workersPayload, refetch: refetchWorkers } =
    usePolledPayload<WorkersPayload>(
      "/api/view/workers",
      workersEnabled,
      pollMs,
      initialWorkers,
    );
  // One poll serves both cleanable sections: the total-bytes strip and the
  // per-channel "Needs cleaning" list come from the same payload.
  const { data: cleanablePayload } = usePolledPayload<CleanablePayload>(
    "/api/view/cleanable",
    config.cleanable || config.cleanChannels,
    pollMs,
    null,
  );
  // The worklist changes on job completions (minutes), not seconds, and reading
  // every channel snapshot each tick is heavier than the other endpoints — so
  // poll it no faster than every 15s regardless of the configured cadence.
  const { data: actionablePayload } = usePolledPayload<WidgetActionablePayload>(
    "/api/view/widgetActionable",
    config.actionable,
    Math.max(pollMs, 15000),
    null,
  );
  // Freshness/scheduler markers move on the order of minutes, so poll no faster
  // than every 15s regardless of the configured cadence. `refetchSync` lets the
  // Sync button refresh the readouts the moment a sweep is queued.
  //
  // FOUR sections read this one payload, not two. The gate used to name only
  // lastSync and scheduler, so `/widget?backfill=1` polled nothing and rendered
  // nothing at all unless one of those happened to be on too. Controls is in the
  // list because the backfill pause reads its lane state from here.
  const { data: syncData, refetch: refetchSync } =
    usePolledPayload<WidgetSyncPayload>(
      "/api/view/widgetSync",
      config.lastSync || config.scheduler || config.backfill || config.controls,
      Math.max(pollMs, 15000),
      null,
    );

  // Apply a config change and mirror it into the address bar so the widget is
  // self-describing: a reload re-parses the same config and the link stays
  // copyable. `history.replaceState` (not router.replace) avoids a server
  // round-trip and the global AutoRefresh race. An all-default config drops the
  // query entirely.
  function patch(p: Partial<WidgetConfig>) {
    const next = patchWidgetConfig(config, p);
    setConfig(next);
    const q = buildWidgetQuery(next);
    window.history.replaceState(null, "", q ? `?${q}` : window.location.pathname);
  }

  const jobs = (jobsPayload?.jobs ?? []).filter(
    (j) => !config.channel || j.channelSlug === config.channel,
  );
  const workers = workersPayload?.workers ?? [];
  const disk = jobsPayload?.disk;

  const actionableChannels = actionablePayload?.channels ?? [];
  const cleanableChannels = cleanablePayload?.channels ?? [];

  const nothingActive =
    (!config.jobs || jobs.length === 0) &&
    (!config.workers || workers.every((w) => !w.busy));

  // The settings gear + its in-place overlay. Shared by the idle and full
  // renders so you can reconfigure a collapsed widget too. Positioned against
  // the widget's own relative container (or the viewport, for the overlay).
  const settingsLayer = (
    <SettingsLayer
      enabled={config.settings}
      open={settingsOpen}
      onToggle={() => setSettingsOpen((o) => !o)}
      onClose={() => setSettingsOpen(false)}
      config={config}
      onChange={patch}
    />
  );

  // A low-disk warning is worth showing even when nothing is running, since it
  // explains why no downloads start — so it overrides hideIdle. Interactive
  // controls also stay visible when idle (you may want to pause preemptively),
  // as do the Sync button and the freshness/scheduler readouts — checking sync
  // health is exactly what you do when nothing's active.
  const keepWhenIdle =
    config.controls || config.sync || config.lastSync || config.scheduler;
  if (config.hideIdle && nothingActive && !disk?.low && !keepWhenIdle) {
    return (
      <div
        className="relative p-2 text-xs text-muted-foreground"
        aria-label="monitor idle"
      >
        Idle
        {settingsLayer}
      </div>
    );
  }

  // What each placeable section renders. Only the `config.columns` layout
  // decides whether and where it appears — the guards left here are the ones
  // about data, not configuration (a strip with nothing to show yet).
  function renderSection(id: SectionId): ReactNode {
    switch (id) {
      case "controls":
        return (
          <WidgetControls
            controls={config.controls}
            sync={config.sync}
            channel={config.channel}
            confirmSyncAll={config.syncConfirm}
            workersData={workersPayload}
            syncData={syncData}
            jobsData={jobsPayload}
            actionableData={actionablePayload}
            onWorkersChange={refetchWorkers}
            onSynced={refetchSync}
          />
        );
      case "lastSync":
        return syncData ? (
          <LastSyncStrip
            data={syncData}
            now={now}
            absolute={config.syncTimeAbsolute}
          />
        ) : null;
      case "scheduler":
        return syncData ? (
          <SchedulerStrip
            data={syncData}
            now={now}
            absolute={config.syncTimeAbsolute}
          />
        ) : null;
      case "disk":
        return disk?.enabled ? <DiskStrip disk={disk} /> : null;
      case "cleanable":
        return cleanablePayload ? (
          <CleanableStrip bytes={cleanablePayload.bytes} />
        ) : null;
      case "cleanChannels":
        return (
          <CleanableChannelsStrip
            channels={cleanableChannels}
            showTitle={config.showTitles}
            interactive={config.controls}
          />
        );
      case "workers":
        return (
          <WorkersStrip
            workers={workers}
            paused={workersPayload?.paused ?? false}
            showTitle={config.showTitles}
            showLabels={config.workerLabels}
          />
        );
      case "jobs":
        return (
          <ActiveJobsStrip
            jobs={jobs}
            showTitle={config.showTitles}
            compact={config.compact}
            jobBar={config.jobBar}
            headingProgress={config.headingProgress}
            eta={config.eta}
          />
        );
      case "backfill":
        return syncData ? <BackfillStrip data={syncData} /> : null;
      case "actionable":
        return (
          <ActionableStrip
            channels={actionableChannels}
            showTitle={config.showTitles}
            interactive={config.controls}
          />
        );
    }
  }

  const layout = config.layout;
  // One fill row anywhere changes what the widget IS: content-height (the
  // pre-rows behaviour, and still the default) becomes exactly-its-frame, so the
  // fill rows have a leftover to share. `h-dvh` is right for both a pinned popup
  // and an <iframe>, which is what the widget is always embedded as.
  const fill = hasFillRow(layout);
  const stack = config.stackNarrow && layout.cols > 1;
  // The one genuinely combinatorial part of the grid — N rows, each auto or 1fr
  // — so it rides a custom property. Everything else stays a literal class,
  // because an inline `style` would out-specify the stackNarrow overrides.
  const rowTracks = layout.rows
    .map((r) => (r.size === "fill" ? "minmax(0,1fr)" : "auto"))
    .join(" ");

  return (
    // @container so the stack-when-narrow thresholds below measure the widget's
    // own box — the popup or iframe it was embedded at — rather than the
    // viewport, which for an embedded widget is the host page's.
    <div
      className={`@container relative p-2 text-foreground ${
        fill ? "flex h-dvh flex-col" : ""
      }`}
    >
      {settingsLayer}
      <div
        className={`grid grid-rows-[var(--wrows)] gap-3 ${
          COLS_CLASS[layout.cols] ?? "grid-cols-1"
        } ${fill ? "min-h-0 flex-1" : ""} ${
          stack ? (STACK_GRID[layout.cols] ?? "") : ""
        }`}
        style={{ "--wrows": rowTracks } as CSSProperties}
      >
        {layout.rows.map((row, r) =>
          row.cells.map((cell, c) => (
            <WidgetCell
              key={`${r}-${c}`}
              cell={cell}
              row={row}
              cols={layout.cols}
              stack={stack}
              render={renderSection}
            />
          )),
        )}
      </div>
    </div>
  );
}

// Tailwind needs literal class names in the source, so the track counts, the
// spans and the stack thresholds are static maps rather than interpolated
// `grid-cols-${n}`.
const COLS_CLASS: Record<number, string> = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
  5: "grid-cols-5",
  6: "grid-cols-6",
};

const SPAN_CLASS: Record<number, string> = {
  1: "col-span-1",
  2: "col-span-2",
  3: "col-span-3",
  4: "col-span-4",
  5: "col-span-5",
  6: "col-span-6",
};

// Collapse back to one stack below the width at which that many tracks stop
// being readable at all. Container queries, not viewport media queries, so an
// embedded widget measures its own box.
const STACK_GRID: Record<number, string> = {
  2: "@max-[24rem]:grid-cols-1 @max-[24rem]:grid-rows-none",
  3: "@max-[36rem]:grid-cols-1 @max-[36rem]:grid-rows-none",
  4: "@max-[48rem]:grid-cols-1 @max-[48rem]:grid-rows-none",
  5: "@max-[60rem]:grid-cols-1 @max-[60rem]:grid-rows-none",
  6: "@max-[72rem]:grid-cols-1 @max-[72rem]:grid-rows-none",
};

// The matching per-cell override: a stacked grid has one track, so nothing may
// still claim two.
const STACK_CELL: Record<number, string> = {
  2: "@max-[24rem]:col-span-1",
  3: "@max-[36rem]:col-span-1",
  4: "@max-[48rem]:col-span-1",
  5: "@max-[60rem]:col-span-1",
  6: "@max-[72rem]:col-span-1",
};

// One grid cell: a stack of sections, or a dense rail of them.
//
// Both variants style their CHILDREN through `[&>section]` variants rather than
// wrapping each one in a div. That is deliberate: a section can render nothing
// (the backfill strip with no backfill feature on, say), and a wrapper div would
// still take its share of a fill row's height, or draw a divider with nothing
// beside it. Selecting the elements that actually exist can't do that.
function WidgetCell({
  cell,
  row,
  cols,
  stack,
  render,
}: {
  cell: Cell;
  row: Row;
  cols: Layout["cols"];
  stack: boolean;
  render: (id: SectionId) => ReactNode;
}) {
  const fillRow = row.size === "fill";
  const place = `${SPAN_CLASS[cell.span] ?? "col-span-1"} ${
    stack ? (STACK_CELL[cols] ?? "") : ""
  }`;
  const children = cell.sections.map((id) => (
    <Fragment key={id}>{render(id)}</Fragment>
  ));

  // A rail: one shared border around the lot, hairlines between, and every
  // strip inside told to shorten itself. Four totals as one instrument cluster.
  if (cell.flow === "row") {
    return (
      <SectionFrameProvider value={{ scroll: false, dense: true }}>
        <div
          className={`${place} flex min-w-0 flex-wrap items-center gap-y-1 self-start rounded border border-border bg-card px-2 py-1 [&>section]:px-3 [&>section+section]:border-l [&>section+section]:border-border/60 [&>section:first-child]:pl-0 [&>section:last-child]:pr-0`}
        >
          {children}
        </div>
      </SectionFrameProvider>
    );
  }
  return (
    <SectionFrameProvider value={{ scroll: fillRow, dense: false }}>
      <div
        className={`${place} flex min-h-0 min-w-0 flex-col gap-3 ${
          // In a fill row the stacked sections SPLIT the height they were given,
          // which is what makes "two lists, half each, both scrolling" free.
          fillRow ? "[&>section]:min-h-0 [&>section]:flex-1" : ""
        }`}
      >
        {children}
      </div>
    </SectionFrameProvider>
  );
}

// Compact state → dot color, mirroring stateBadge() in WorkersView.
function workerDotClass(w: WorkerView): string {
  if (w.degraded) return "bg-destructive";
  switch (w.state) {
    case "enabled":
      return w.busy ? "bg-success" : "bg-success/40";
    case "draining":
      return "bg-warning";
    default:
      return "bg-muted-foreground/50";
  }
}

function workerStateLabel(w: WorkerView): string {
  if (w.degraded) return "degraded";
  if (w.state === "enabled") return w.busy ? "busy" : "idle";
  return w.state; // draining | disabled
}

function WorkersStrip({
  workers,
  paused,
  showTitle,
  showLabels,
}: {
  workers: WorkerView[];
  paused: boolean;
  showTitle: boolean;
  showLabels: boolean;
}) {
  const busy = workers.filter((w) => w.busy).length;
  return (
    <WidgetSection
      label="Workers"
      title={showTitle ? "Workers" : undefined}
      meta={`${busy}/${workers.length} busy`}
      extra={
        paused && (
          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-warning-soft text-warning border border-warning/30">
            paused
          </span>
        )
      }
    >
      {workers.length === 0 ? (
        <p className="text-xs text-muted-foreground">No workers configured.</p>
      ) : (
        <ul className="flex flex-wrap gap-1.5">
          {workers.map((w) => (
            <li
              key={w.id}
              title={`${w.name} — ${workerStateLabel(w)}`}
              aria-label={`worker ${w.name} ${workerStateLabel(w)}`}
              className={
                showLabels
                  ? "flex items-center gap-1.5 rounded border border-border bg-card px-1.5 py-0.5 text-xs"
                  : "flex items-center"
              }
            >
              <span
                className={`inline-block h-2 w-2 shrink-0 rounded-full ${workerDotClass(w)}`}
              />
              {showLabels && (
                <span className="truncate max-w-[10rem]">{w.name}</span>
              )}
            </li>
          ))}
        </ul>
      )}
    </WidgetSection>
  );
}

// The dense rail has room for a number and not much else, so "3m ago" becomes
// "3m" and "in 12m" becomes "12m" — the direction is implied by the label.
function bareTime(t: string | null): string {
  if (t === null) return "\u2026";
  return t.replace(/^in /, "").replace(/ ago$/, "");
}

// 1,204 → "1.2k". Only ever rendered in the dense rail, whose payload arrives on
// the first client poll, so the locale-dependent formatting can't produce a
// hydration mismatch.
function compactCount(n: number): string {
  return new Intl.NumberFormat(undefined, {
    notation: "compact",
    maximumFractionDigits: 1,
  })
    .format(n)
    .toLowerCase();
}

// Compact free-disk indicator. Green when above the floor, red when at/below it
// (downloads blocked). Only rendered when the gate is enabled.
function DiskStrip({ disk }: { disk: DiskStatusView }) {
  const { dense } = useSectionFrame();
  if (dense) {
    return (
      <section
        aria-label="Disk space"
        className={`flex items-center gap-1.5 text-xs ${
          disk.low ? "text-destructive" : "text-muted-foreground"
        }`}
      >
        <span
          className={`inline-block h-2 w-2 shrink-0 rounded-full ${
            disk.low ? "bg-destructive" : "bg-success/60"
          }`}
        />
        <span className="tabular-nums">
          {formatBytes(disk.freeBytes)} free
          {/* The floor is why nothing is downloading; it survives the squeeze. */}
          {disk.low && " \u00b7 downloads paused"}
        </span>
      </section>
    );
  }
  return (
    <section
      aria-label="Disk space"
      className={`flex items-center gap-2 rounded border px-2 py-1 text-xs ${
        disk.low
          ? "border-destructive/30 bg-destructive-soft text-destructive"
          : "border-border bg-card text-muted-foreground"
      }`}
    >
      <span
        className={`inline-block h-2 w-2 shrink-0 rounded-full ${
          disk.low ? "bg-destructive" : "bg-success/60"
        }`}
      />
      <span>
        {formatBytes(disk.freeBytes)} free
        {disk.low && (
          <>
            {" "}
            — below {formatBytes(disk.thresholdBytes)} floor; downloads paused
            {/* Says which of the two bars is being waited on. Without it a
                stop that is already above the floor reads as a contradiction. */}
            {disk.reason === "below-resume-margin" && (
              <> (resumes at {formatBytes(disk.resumeBytes)})</>
            )}
          </>
        )}
      </span>
    </section>
  );
}

// Last-sync freshness readout: the last full "Sync all" sweep, plus the newest
// individual channel sync when it is more recent than that sweep (a per-channel
// Sync since the last global one).
function LastSyncStrip({
  data,
  now,
  absolute,
}: {
  data: WidgetSyncPayload;
  now: number | null;
  absolute: boolean;
}) {
  const { dense } = useSectionFrame();
  const full =
    data.lastSyncAllAt === null
      ? "never"
      : (fmtTime(data.lastSyncAllAt, now, absolute) ?? "…");
  if (dense) {
    return (
      <section
        aria-label="Last sync"
        className="flex items-center gap-1.5 text-xs text-muted-foreground"
      >
        <span className="tabular-nums">
          synced {data.lastSyncAllAt === null ? "never" : bareTime(full)}
        </span>
      </section>
    );
  }
  const showChannel =
    data.lastIndividualSyncAt !== null &&
    (data.lastSyncAllAt === null ||
      data.lastIndividualSyncAt > data.lastSyncAllAt);
  return (
    <section
      aria-label="Last sync"
      className="flex flex-col gap-0.5 rounded border border-border bg-card px-2 py-1 text-xs text-muted-foreground"
    >
      <span className="tabular-nums">Last full sync: {full}</span>
      {showChannel && (
        <span className="tabular-nums">
          Last channel sync:{" "}
          {fmtTime(data.lastIndividualSyncAt as number, now, absolute) ?? "…"}
        </span>
      )}
    </section>
  );
}

// Auto-sync scheduler status: on/off (colored dot), next due, last run. Dims to
// a neutral line when the scheduler is disabled.
function SchedulerStrip({
  data,
  now,
  absolute,
}: {
  data: WidgetSyncPayload;
  now: number | null;
  absolute: boolean;
}) {
  const { dense } = useSectionFrame();
  const s = data.scheduler;
  if (dense) {
    const short = !s.enabled
      ? "auto off"
      : s.overdue
        ? "overdue"
        : s.nextRunAt !== null
          ? `auto ${bareTime(fmtTime(s.nextRunAt, now, absolute))}`
          : "auto on";
    return (
      <section
        aria-label="Auto-sync scheduler"
        className={`flex items-center gap-1.5 text-xs ${
          s.overdue ? "text-warning" : "text-muted-foreground"
        }`}
      >
        <span
          className={`inline-block h-2 w-2 shrink-0 rounded-full ${
            s.enabled ? "bg-success" : "bg-muted-foreground/50"
          }`}
        />
        <span className="tabular-nums">{short}</span>
      </section>
    );
  }
  const nextText = s.overdue
    ? "due now"
    : s.nextRunAt !== null
      ? (fmtTime(s.nextRunAt, now, absolute) ?? "…")
      : "—";
  const lastText =
    s.lastRunAt !== null ? (fmtTime(s.lastRunAt, now, absolute) ?? "…") : "never";
  return (
    <section
      aria-label="Auto-sync scheduler"
      className={`flex items-center gap-2 rounded border px-2 py-1 text-xs ${
        s.enabled
          ? "border-border bg-card text-muted-foreground"
          : "border-border bg-card text-muted-foreground/60"
      }`}
    >
      <span
        className={`inline-block h-2 w-2 shrink-0 rounded-full ${
          s.enabled ? "bg-success" : "bg-muted-foreground/50"
        }`}
      />
      <span className="tabular-nums">
        Auto-sync {s.enabled ? "on" : "off"}
        {s.enabled && (
          <>
            {" · "}next {nextText}
            {" · "}last run {lastText}
          </>
        )}
      </span>
    </section>
  );
}

// The backfill readout: what the lane can reach now, and — as a SEPARATE
// figure, never added to it — how much is only reachable by re-acquiring media
// that has already been deleted. On the measured corpus those are 835 and
// ~76,270, so a single total would report the work as untouched forever.
//
// Renders nothing when no backfill feature is on: an empty work list because a
// feature is switched off must not read as "all caught up".
function BackfillStrip({ data }: { data: WidgetSyncPayload }) {
  const { dense } = useSectionFrame();
  const b = data.backfill;
  if (!b.anyKind) return null;
  const done = b.reachable === 0;
  if (dense) {
    return (
      <section
        aria-label="Backfill"
        className={`flex items-center gap-1.5 text-xs ${
          done ? "text-muted-foreground" : "text-warning"
        }`}
      >
        <span
          className={`inline-block h-2 w-2 shrink-0 rounded-full ${
            b.armed ? "bg-success" : done ? "bg-success/40" : "bg-warning"
          }`}
        />
        <span className="tabular-nums">
          {/* The visible word names the WORK; the section's aria-label stays
              "Backfill" because it is how the section registry and the widget
              specs address this strip, and nobody reads it. */}
          {compactCount(b.reachable)} {b.groupLabel.toLowerCase()}
          {/* Still a separate figure, never summed into the one beside it. */}
          {b.needsMedia > 0 && ` \u00b7 ${compactCount(b.needsMedia)} need media`}
        </span>
      </section>
    );
  }
  return (
    <section
      aria-label="Backfill"
      className={`flex items-center gap-2 rounded border px-2 py-1 text-xs ${
        done
          ? "border-border bg-card text-muted-foreground"
          : "border-warning/30 bg-warning-soft text-warning"
      }`}
    >
      <span
        className={`inline-block h-2 w-2 shrink-0 rounded-full ${
          b.armed ? "bg-success" : done ? "bg-success/40" : "bg-warning"
        }`}
      />
      <span className="tabular-nums">
        {b.groupLabel} {b.reachable.toLocaleString()} reachable
        {b.needsMedia > 0 && <> · {b.needsMedia.toLocaleString()} need media</>}
        {b.held && " · lane off"}
        {!b.held && b.armed && " · running"}
      </span>
    </section>
  );
}

function CleanableStrip({ bytes }: { bytes: number }) {
  const { dense } = useSectionFrame();
  if (dense) {
    return (
      <section
        aria-label="Cleanable data"
        className={`flex items-center gap-1.5 text-xs ${
          bytes > 0 ? "text-warning" : "text-muted-foreground"
        }`}
      >
        <span
          className={`inline-block h-2 w-2 shrink-0 rounded-full ${
            bytes > 0 ? "bg-warning" : "bg-muted-foreground/50"
          }`}
        />
        <span className="tabular-nums">
          {bytes > 0 ? `${formatBytes(bytes)} reclaimable` : "nothing to reclaim"}
        </span>
      </section>
    );
  }
  return (
    <section
      aria-label="Cleanable data"
      className={`flex items-center gap-2 rounded border px-2 py-1 text-xs ${
        bytes > 0
          ? "border-warning/30 bg-warning-soft text-warning"
          : "border-border bg-card text-muted-foreground"
      }`}
    >
      <span
        className={`inline-block h-2 w-2 shrink-0 rounded-full ${
          bytes > 0 ? "bg-warning" : "bg-muted-foreground/50"
        }`}
      />
      <span className="tabular-nums">
        {bytes > 0
          ? `${formatBytes(bytes)} reclaimable`
          : "Nothing to reclaim"}
      </span>
    </section>
  );
}

// Both channel lists cap at a handful of rows so the widget fits a pinned
// window, but the payloads are uncapped — the rest is already in memory, so the
// cap is a display choice the reader can undo. Expanded, the list gets its own
// scroll box rather than growing the widget to the height of the corpus.
function useExpandableList<T>(items: T[], limit: number) {
  const [expanded, setExpanded] = useState(false);
  // `hidden` is computed against the LIMIT, not against what's shown, so the
  // control keeps a label once expanded (otherwise it would vanish mid-use).
  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>
  );
}

// Compact "needs work" list: channels with videos to download or transcribe,
// echoing the ↓ (download) / ✎ (transcribe) verbs used by the task bars so the
// worklist reads in the same language. Read-only counts by default; when the
// widget is interactive (controls=1), each row gains the same per-channel
// Download/Transcribe buttons as the operation pages.
const ACTIONABLE_LIMIT = 6;

function ActionableStrip({
  channels,
  showTitle,
  interactive,
}: {
  channels: WidgetActionablePayload["channels"];
  showTitle: boolean;
  interactive: boolean;
}) {
  // Given a fill row to scroll in, the cap stops being a kindness: a list you
  // can scroll that still says "+14 more channels" defeats the point of the
  // height it was just handed.
  const { scroll } = useSectionFrame();
  const { shown, hidden, expanded, toggle } = useExpandableList(
    channels,
    scroll ? Number.POSITIVE_INFINITY : ACTIONABLE_LIMIT,
  );
  return (
    <WidgetSection
      label="Needs work"
      title={showTitle ? "Needs work" : undefined}
      meta={`${channels.length} ${channels.length === 1 ? "channel" : "channels"}`}
    >
      {channels.length === 0 ? (
        <p className="text-xs text-muted-foreground">Everything&apos;s handled.</p>
      ) : (
        <ul
          className={`flex flex-col gap-1.5${
            expanded && !scroll ? " max-h-64 overflow-y-auto" : ""
          }`}
        >
          {shown.map((c) => (
            <li
              key={c.slug}
              className="flex flex-col gap-1 rounded border border-border bg-card px-2 py-1"
            >
              <div className="flex items-center justify-between gap-2">
                <span
                  className="font-mono text-xs truncate"
                  title={c.slug}
                >
                  {c.slug}
                </span>
                <span className="flex shrink-0 items-center gap-1">
                  {c.undownloaded > 0 && (
                    <span className="rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-warning-soft text-warning">
                      ↓ {c.undownloaded}
                    </span>
                  )}
                  {c.untranscribed > 0 && (
                    <span className="rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-info-soft text-info">
                      ✎ {c.untranscribed}
                    </span>
                  )}
                </span>
              </div>
              {interactive && (
                <div className="flex flex-wrap items-center gap-1.5">
                  {c.undownloaded > 0 && (
                    <InlineActionButton
                      variant={{ kind: "downloadMissing", slug: c.slug }}
                    />
                  )}
                  {c.untranscribed > 0 && (
                    <InlineActionButton
                      variant={{ kind: "transcribeMissing", slug: c.slug }}
                    />
                  )}
                </div>
              )}
            </li>
          ))}
          <ListOverflowToggle
            hidden={hidden}
            expanded={expanded}
            onToggle={toggle}
            noun="channel"
          />
        </ul>
      )}
    </WidgetSection>
  );
}

// Compact "needs cleaning" list: the channels holding the reclaimable audio the
// Cleanable-data strip totals (same sweep, so the rows sum to that number).
// Read-only bytes by default; when the widget is interactive (controls=1) each
// row gains the same per-channel Clean audio button as /cleanup —
// its own window.confirm covers the destructive step.
const CLEANABLE_LIMIT = 6;

function CleanableChannelsStrip({
  channels,
  showTitle,
  interactive,
}: {
  channels: CleanableChannel[];
  showTitle: boolean;
  interactive: boolean;
}) {
  const { scroll } = useSectionFrame();
  const { shown, hidden, expanded, toggle } = useExpandableList(
    channels,
    scroll ? Number.POSITIVE_INFINITY : CLEANABLE_LIMIT,
  );
  return (
    <WidgetSection
      label="Needs cleaning"
      title={showTitle ? "Needs cleaning" : undefined}
      meta={`${channels.length} ${channels.length === 1 ? "channel" : "channels"}`}
    >
      {channels.length === 0 ? (
        <p className="text-xs text-muted-foreground">Nothing to reclaim.</p>
      ) : (
        <ul
          className={`flex flex-col gap-1.5${
            expanded && !scroll ? " max-h-64 overflow-y-auto" : ""
          }`}
        >
          {shown.map((c) => (
            <li
              key={c.slug}
              // Deliberately not a string containing "clean audio", so this row
              // can't collide with the button's derived `clean audio <slug>`.
              aria-label={`needs cleaning ${c.slug}`}
              className="flex flex-col gap-1 rounded border border-border bg-card px-2 py-1"
            >
              <div className="flex items-center justify-between gap-2">
                <span className="font-mono text-xs truncate" title={c.slug}>
                  {c.slug}
                </span>
                <span
                  title={`${c.count} ${c.count === 1 ? "video" : "videos"} with reclaimable audio`}
                  className="shrink-0 rounded px-1.5 py-0.5 text-[10px] tabular-nums bg-warning-soft text-warning"
                >
                  ⌫ {formatBytes(c.bytes)}
                </span>
              </div>
              {interactive && (
                <div className="flex flex-wrap items-center gap-1.5">
                  <InlineActionButton
                    variant={{ kind: "cleanTranscribedAudio", slug: c.slug }}
                  />
                </div>
              )}
            </li>
          ))}
          <ListOverflowToggle
            hidden={hidden}
            expanded={expanded}
            onToggle={toggle}
            noun="channel"
          />
        </ul>
      )}
    </WidgetSection>
  );
}

function ActiveJobsStrip({
  jobs,
  showTitle,
  compact,
  jobBar,
  headingProgress,
  eta,
}: {
  jobs: JobRowView[];
  showTitle: boolean;
  compact: boolean;
  jobBar: boolean;
  headingProgress: boolean;
  eta: boolean;
}) {
  const running = jobs.filter((j) => j.status === "running").length;
  const queued = jobs.filter((j) => j.status === "queued").length;
  return (
    <WidgetSection
      label="Active jobs"
      title={showTitle ? "Active" : undefined}
      meta={`${running} running, ${queued} queued`}
    >
      {jobs.length === 0 ? (
        <p className="text-xs text-muted-foreground">No active jobs.</p>
      ) : (
        <ul className="flex flex-col gap-2">
          {jobs.map((j) => (
            <li key={j.id}>
              <JobRow
                job={j}
                variant="compact"
                show={{
                  tasks: !compact,
                  jobBar,
                  headingProgress,
                  eta,
                  actions: false,
                  links: false,
                }}
              />
            </li>
          ))}
        </ul>
      )}
    </WidgetSection>
  );
}

// The settings gear and its in-place config overlay. The gear anchors to the
// widget's own (relative) container; the overlay covers the whole widget window
// (fixed inset-0) and hosts the same form the builder uses, so a pinned widget
// can be reconfigured without opening the full builder page. Rendering nothing
// when the gear is disabled keeps hooks out of this component entirely.
function SettingsLayer({
  enabled,
  open,
  onToggle,
  onClose,
  config,
  onChange,
}: {
  enabled: boolean;
  open: boolean;
  onToggle: () => void;
  onClose: () => void;
  config: WidgetConfig;
  onChange: (patch: Partial<WidgetConfig>) => void;
}) {
  if (!enabled) return null;
  return (
    <>
      <button
        type="button"
        aria-label="Settings"
        aria-expanded={open}
        onClick={onToggle}
        className="absolute right-1 top-1 z-10 flex h-6 w-6 items-center justify-center rounded border border-border bg-card/80 text-muted-foreground backdrop-blur hover:bg-muted hover:text-foreground"
      >
        <span aria-hidden className="text-sm leading-none">
          ⚙
        </span>
      </button>
      {open && (
        <div
          role="dialog"
          aria-label="Widget settings"
          className="fixed inset-0 z-50 overflow-auto bg-background p-3 text-foreground"
        >
          <div className="mb-3 flex items-center justify-between">
            <h2 className="text-sm font-semibold">Widget settings</h2>
            <button
              type="button"
              aria-label="Close settings"
              onClick={onClose}
              className="flex h-6 w-6 items-center justify-center rounded border border-border hover:bg-muted"
            >
              <span aria-hidden className="text-sm leading-none">
                ✕
              </span>
            </button>
          </div>
          <form className="flex flex-col gap-4">
            {/* The same board the builder page shows, at the size a pinned
                widget opens — so a preset behaves identically in both. The
                widget itself is the preview, which is why opening the menu
                covers it rather than sitting beside it. */}
            <WidgetMenu config={config} onChange={onChange} compact />
          </form>
          <p className="mt-3 text-xs text-muted-foreground">
            Changes apply live and update this widget&apos;s link — reload keeps
            them.
          </p>
        </div>
      )}
    </>
  );
}