"use client";

import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import type { AutoQueueKind } from "yt-dlp-transcript-common/jobs/autoQueueState";
import type {
  AutoQueueKindStatus,
  PlatformCooldownView,
  PlatformPaceView,
  SubtitleDeferralView,
  VideoDeferralView,
} from "yt-dlp-transcript-common/views/autoQueueStatus";
import type { LaneWorker } from "yt-dlp-transcript-common/views/autoQueueLanes";
import { InFlightList } from "./InFlightList";
import { LaneHeader } from "./LaneHeader";
import { NextUp } from "./NextUp";
import { PolicyTreeEditor } from "./PolicyTreeEditor";
import { SnoozeControl } from "./SnoozeControl";
import { type Channel, formatClock, formatCooldown, leafOrder } from "./dispatch";
import { clearPlatformHoldAction } from "../pacingActions";
import {
  drainAutoQueueAction,
  startAutoQueueAction,
  stopAutoQueueAction,
} from "../actions";

// The idle reasons that mean "paused or gated", not "waiting for work".
const LANE_PAUSE_REASONS: ReadonlySet<string> = new Set([
  "lane-held",
  "downloads-paused",
  "snoozed",
  "disk-gate",
]);

// ONE LANE'S RUNNER, IN FULL — any of the four.
//
// Lifted VERBATIM out of AutoQueueView's KindLane when the console became one
// page per operation. The only thing that changed is what is around it: there
// is no lane <select> any more, so there is no `hidden` prop, no second lane
// mounted beside this one, and no reason to keep an unmounted pane's React
// state alive.
//
// STRUCTURAL CONTRACT, load-bearing for ~1,200 lines of e2e. Every clause below
// survived the move and must keep surviving:
//  * this is a literal <section> containing an <h2> named exactly
//    "Auto-transcribe" / "Auto-download", with the policy editor and the
//    Start/Drain/Stop buttons inside it;
//  * NOTHING inside it is itself a <section> — the suite scopes with
//    locator("section", { has: heading }), and a nested one would match two
//    ancestors, failing every scoped lookup on strict mode;
//  * the rail above names pipelines in plain text, never as headings, for the
//    same reason;
//  * policy controls stay native <select> / <input type=checkbox> — Radix
//    portals its options and unmounts them while closed, which would take the
//    page-wide option counts the suite asserts to zero;
//  * role="status" stays reserved for "Saved.";
//  * data-hydrated stays on the section.
export function RunnerOperationView({
  kind,
  title,
  status,
  channels,
  platforms,
  buckets,
  operations,
  runsOn,
  onRefresh,
}: {
  kind: AutoQueueKind;
  title: string;
  status: AutoQueueKindStatus;
  channels: Channel[];
  platforms: string[];
  buckets: string[];
  // The operation ids this lane dispatches. Empty for the two bucket lanes; the
  // ladder draws a select only when there is more than one.
  operations: string[];
  // Delegate workers that can take this lane's work besides this machine.
  // Read-only; the header draws it, and empty draws nothing.
  runsOn: LaneWorker[];
  onRefresh: () => Promise<void>;
}) {
  const [busy, setBusy] = useState(false);
  // What the last Clear hold did. Held HERE, not in the strip: a clear that
  // leaves nothing to list unmounts the strip, and the sentence must outlive it.
  const [holdNote, setHoldNote] = useState<string | null>(null);
  const now = useNow();

  const control = useCallback(
    async (action: "start" | "stop" | "drain") => {
      setBusy(true);
      try {
        // Server actions, not /api/auto-queue/control: that route is behind
        // the ops token since release 19, and a page holds no token.
        await (action === "start"
          ? startAutoQueueAction(kind)
          : action === "stop"
            ? stopAutoQueueAction(kind)
            : drainAutoQueueAction(kind));
        await onRefresh();
      } finally {
        setBusy(false);
      }
    },
    [kind, onRefresh],
  );

  return (
    // data-hydrated is a TESTING AFFORDANCE, and a deliberate one. A React state
    // update that lands before hydration is silently discarded — no error, no
    // request, nothing — and this repo has lost days to that failure mode more
    // than once. `now` is null until the client mount effect runs, so it is an
    // exact "React is live on this subtree" signal that already exists; exposing
    // it lets a test wait for the page rather than race it.
    <section
      className="flex flex-col gap-4"
      data-lane={kind}
      data-hydrated={now !== null ? "true" : undefined}
    >
      <LaneHeader
        title={title}
        status={status}
        runsOn={runsOn}
        now={now}
        busy={busy}
        onControl={control}
        onChange={onRefresh}
      />

      {kind === "transcription" && (
        <p className="text-xs text-muted-foreground">
          Auto-transcribe runs at background priority: a manually-triggered
          transcription preempts it for the next free worker — the in-flight auto
          transcription finishes (drains), then the manual one runs, then auto
          resumes.
        </p>
      )}

      {(status.cooldowns.length > 0 ||
        status.deferred.length > 0 ||
        (status.pace?.length ?? 0) > 0 ||
        (status.subtitleDeferred?.length ?? 0) > 0) && (
        <CooldownStrip
          cooldowns={status.cooldowns}
          deferred={status.deferred}
          pace={status.pace ?? []}
          subtitleDeferred={status.subtitleDeferred ?? []}
          laneRunning={status.runner.running}
          laneHeld={status.held || (status.runner.idleReason !== null && LANE_PAUSE_REASONS.has(status.runner.idleReason))}
          onRefresh={onRefresh}
          onCleared={setHoldNote}
          now={now}
        />
      )}
      {holdNote && (
        <span aria-label="clear hold result" className="text-xs text-muted-foreground">
          {holdNote}
        </span>
      )}

      <SnoozeControl
        kind={kind}
        title={title}
        snoozeUntil={status.policy.snoozeUntil ?? null}
        now={now}
        onChanged={onRefresh}
      />

      <NextUp status={status} channels={channels} />
      <InFlightList status={status} channels={channels} now={now} />

      <PolicyTreeEditor
        kind={kind}
        status={status}
        channels={channels}
        platforms={platforms}
        buckets={buckets}
        operations={operations}
      />

      <RecentPicks status={status} />
    </section>
  );
}

// The pick log, cross-referenced against the ladder by ORDINAL rather than by a
// leafLabel() id lookup — the rung numbers are right there, so "rule 2" is a
// pointer you can follow with your eye.
function RecentPicks({ status }: { status: AutoQueueKindStatus }) {
  const leaves = leafOrder(status.policy.root);
  return (
    <div className="flex flex-col gap-1">
      <p className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Recent picks
      </p>
      {status.picks.length === 0 ? (
        <p className="text-sm text-muted-foreground">Nothing picked yet.</p>
      ) : (
        <ul className="flex flex-col gap-0.5 text-sm">
          {status.picks.slice(0, 15).map((p, i) => {
            const at = leaves.findIndex((l) => l.id === p.leafId);
            return (
              <li
                key={`${p.at}-${i}`}
                className="flex flex-wrap gap-x-3 text-muted-foreground"
              >
                <span className="tabular-nums">{formatClock(p.at)}</span>
                <span className="font-mono text-foreground">
                  {p.channelSlug}/{p.videoId}
                </span>
                <span className="text-xs">
                  {at >= 0 ? `rule ${at + 1}` : p.leafId}
                </span>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

// Wall-clock that re-renders each second, starting null so SSR and the first
// client render agree (no hydration mismatch from Date.now()).
export function useNow(): number | null {
  const [now, setNow] = useState<number | null>(null);
  useEffect(() => {
    setNow(Date.now());
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

// Platforms paused by a rate-limit/network backoff, and the videos deferred
// after a rate limit. A manual Sync on a cooling platform is refused until it
// lapses; the runner skips it meanwhile. A deferred video is skipped by
// auto-download only — a manual Sync / download-missing still fetches it.
//
// RELEASE 17, SLICE RL adds three lists to the same region: the platforms
// HELD (a rate limit that outlasted the cooldown cap — one probe at a time,
// and every manual fetch on them refused), the request PACE of every platform
// a rate limit slowed, and the videos whose SUBTITLES are deferred (their
// media came down; the platform was not backed off for them).
//
// A <div role="region">, NOT a <section>: this sits inside the lane's own
// <section>, and the structural contract above forbids a nested one. The
// accessible role and name are the same either way.
function CooldownStrip({
  cooldowns,
  deferred,
  pace,
  subtitleDeferred,
  laneRunning,
  laneHeld,
  onRefresh,
  onCleared,
  now,
}: {
  cooldowns: PlatformCooldownView[];
  deferred: VideoDeferralView[];
  pace: PlatformPaceView[];
  subtitleDeferred: SubtitleDeferralView[];
  laneRunning: boolean;
  // The lane is up but paused or gated (its own hold, the downloads pause,
  // a snooze, the disk gate): it is not waiting for a video.
  laneHeld: boolean;
  onRefresh: () => Promise<void>;
  onCleared: (message: string) => void;
  now: number | null;
}) {
  const [clearing, setClearing] = useState<string | null>(null);
  const clearHold = async (platform: string) => {
    setClearing(platform);
    try {
      const res = await clearPlatformHoldAction(platform);
      onCleared(res.ok ? res.message : res.error);
      await onRefresh();
    } finally {
      setClearing(null);
    }
  };
  const left = (untilMs: number) =>
    now === null ? null : Math.max(0, Math.ceil((untilMs - now) / 1000));
  const paceOf = (platform: string) =>
    pace.find((p) => p.platform === platform)?.sleepRequestsSeconds;
  const cooling = cooldowns.filter(
    (c) => !c.hold && (now === null || c.untilMs > now),
  );
  const held = cooldowns.filter((c) => c.hold);
  return (
    <div
      role="region"
      aria-label="Rate-limit cooldown"
      className="flex flex-col gap-1 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-sm"
    >
      {held.length > 0 && (
        <>
          <span className="font-medium text-warning">
            Held — failures outlasted the cooldown cap; auto-download probes
            once at a time, and manual fetches wait for the next probe:
          </span>
          <ul
            aria-label="Platforms held"
            className="flex flex-col gap-1 text-warning"
          >
            {held.map((c) => {
              const secs = left(c.untilMs);
              const p = paceOf(c.platform);
              const overdue = secs !== null && secs <= 0;
              return (
                <li key={c.platform} className="flex flex-wrap items-center gap-x-2 tabular-nums">
                  <span>
                    <span className="font-mono">{c.platform}</span> —{" "}
                    {c.hold!.rateLimited ? "rate-limited" : "failing (network)"}
                    , held since {formatClock(c.hold!.sinceMs)} ({c.fails}{" "}
                    failures in a row)
                    {secs !== null &&
                      (overdue ? (
                        laneRunning && !laneHeld ? (
                          <>
                            , probe due — it waits for a pending video on this
                            platform; a clean manual Sync also lifts it
                          </>
                        ) : laneRunning ? (
                          <>
                            , probe overdue — the lane is paused; a clean
                            manual Sync also lifts it
                          </>
                        ) : (
                          <>
                            , probe overdue — the lane is off; a clean manual
                            Sync also lifts it
                          </>
                        )
                      ) : (
                        <>, next probe in {formatCooldown(secs)}</>
                      ))}
                    {p !== undefined && <> · pace {p}s</>}
                  </span>
                  <button
                    type="button"
                    aria-label={`Clear hold on ${c.platform}`}
                    disabled={clearing !== null}
                    onClick={() => void clearHold(c.platform)}
                    className="rounded border border-warning/40 px-2 py-0.5 text-xs hover:bg-warning/10 disabled:opacity-50"
                  >
                    {clearing === c.platform ? "Clearing…" : "Clear hold"}
                  </button>
                </li>
              );
            })}
          </ul>
        </>
      )}
      {cooling.length > 0 && (
        <>
          <span className="font-medium text-warning">
            Rate-limit cooldown — auto-download and manual sync are paused on:
          </span>
          <ul
            aria-label="Platforms in cooldown"
            className="flex flex-wrap gap-x-4 gap-y-1 text-warning"
          >
            {cooling.map((c) => {
              const secs = left(c.untilMs);
              const p = paceOf(c.platform);
              return (
                <li key={c.platform} className="tabular-nums">
                  <span className="font-mono">{c.platform}</span>
                  {secs !== null && (
                    <> — {formatCooldown(secs)} left (attempt {c.fails})</>
                  )}
                  {p !== undefined && <> · pace {p}s</>}
                </li>
              );
            })}
          </ul>
        </>
      )}
      {pace.length > 0 && (
        <>
          <span className="font-medium text-warning">
            Request pace — seconds between requests, raised by a rate limit:
          </span>
          <ul
            aria-label="Request pace"
            className="flex flex-wrap gap-x-4 gap-y-1 text-warning"
          >
            {pace.map((p) => (
              <li key={p.platform} className="tabular-nums">
                <span className="font-mono">{p.platform}</span> —{" "}
                {p.sleepRequestsSeconds}s between requests (base{" "}
                {p.baseSeconds}s)
              </li>
            ))}
          </ul>
        </>
      )}
      {deferred.length > 0 && (
        <>
          <span className="font-medium text-warning">
            Deferred videos — skipped by auto-download until:
          </span>
          <ul
            aria-label="Deferred videos"
            className="flex flex-wrap gap-x-4 gap-y-1 text-warning"
          >
            {deferred.map((d) => {
              const secs = left(d.untilMs);
              return (
                <li key={d.videoId} className="tabular-nums">
                  <Link
                    href={`/channels/${d.channelSlug}/videos/${d.videoId}`}
                    className="font-mono underline underline-offset-2 hover:text-brand"
                  >
                    {d.channelSlug}/{d.videoId}
                  </Link>
                  {secs !== null && <> — {formatCooldown(secs)} left</>}
                </li>
              );
            })}
          </ul>
        </>
      )}
      {subtitleDeferred.length > 0 && (
        <>
          <span className="font-medium text-warning">
            Deferred subtitles — downloaded, but the subtitles answered HTTP
            429; Download missing subs retries them after:
          </span>
          <ul
            aria-label="Deferred subtitles"
            className="flex flex-wrap gap-x-4 gap-y-1 text-warning"
          >
            {subtitleDeferred.map((d) => {
              const secs = left(d.untilMs);
              return (
                <li key={d.videoId} className="tabular-nums">
                  <Link
                    href={`/channels/${d.channelSlug}/videos/${d.videoId}`}
                    className="font-mono underline underline-offset-2 hover:text-brand"
                  >
                    {d.channelSlug}/{d.videoId}
                  </Link>{" "}
                  — {d.count}×
                  {secs !== null && (
                    <>
                      , {d.held ? "left alone " : ""}
                      {formatCooldown(secs)}
                      {d.held ? "" : " left"}
                    </>
                  )}
                </li>
              );
            })}
          </ul>
        </>
      )}
    </div>
  );
}