"use client";

import Link from "next/link";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import type { AutoQueueKindStatus } from "yt-dlp-transcript-common/views/autoQueueStatus";
import type { LaneWorker } from "yt-dlp-transcript-common/views/autoQueueLanes";
import { PauseLaneButton } from "../../components/lanes/pauseControl";
import { formatElapsed, idleReasonText } from "./dispatch";

// The lane's identity line: the <h2> every e2e lookup keys off, the state pill,
// the figures, and the three controls.
//
// PINNED, do not rename: the heading text, the pill's "Runner running" /
// "Runner stopped" wording, and the Start/Drain/Stop aria-labels. The suite
// scopes whole tests on them. What is NEW is that the payload's startedAt and
// jobId are finally rendered — both have always been on the wire and both were
// dropped on the floor, so "how long has this been up" and "show me its log"
// had no answer on the page.

export function LaneHeader({
  title,
  status,
  runsOn,
  now,
  busy,
  onControl,
  onChange,
}: {
  title: string;
  status: AutoQueueKindStatus;
  // Delegate workers that can take this lane's work besides this machine. See
  // WhereItRuns below.
  runsOn: LaneWorker[];
  now: number | null;
  busy: boolean;
  onControl: (action: "start" | "stop" | "drain") => void;
  // Re-poll after the lane's gate moves. The pause is not one of the three
  // runner controls — it holds the LANE, which outlives any runner — so it does
  // not go through onControl.
  onChange: () => void | Promise<void>;
}) {
  const running = status.runner.running;
  const inFlight = status.runner.inFlight.length;
  const pending = Object.values(status.pendingByLeaf).reduce((a, b) => a + b, 0);
  const idle = running ? idleReasonText(status.runner.idleReason, status.kind) : null;

  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <h2 className="font-display text-lg font-semibold tracking-tight">
          {title}
        </h2>
        <span
          className={`rounded-full border px-3 py-1 text-sm ${
            running
              ? "border-success/30 bg-success-soft text-success"
              : "border-border bg-card text-muted-foreground"
          }`}
        >
          {running ? "Runner running" : "Runner stopped"}
        </span>
        <span className="ml-auto flex gap-2">
          <Button
            type="button"
            size="sm"
            aria-label={`Start ${title}`}
            onClick={() => onControl("start")}
            disabled={busy || running}
          >
            Start
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            aria-label={`Drain ${title}`}
            title="Finish the in-flight items, start no new ones, then stop"
            onClick={() => onControl("drain")}
            disabled={busy || !running}
            className="border-warning/30 text-warning hover:bg-warning-soft hover:text-warning"
          >
            Drain
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            aria-label={`Stop ${title}`}
            title="Stop now, aborting any in-flight item"
            onClick={() => onControl("stop")}
            disabled={busy || !running}
          >
            Stop
          </Button>
          {/* THE FOURTH CONTROL, and the one that was missing. Start, Drain and
              Stop all act on the RUNNER; this holds the LANE, which is a
              different thing with a different lifetime — a held lane stays held
              across a runner restart, and a stopped runner can still be holding.
              The same button the dashboard and the widget draw, so there is
              one idea of what holding looks like.

              A plain <button> plus a role="alert" span on error only: no nested
              <section>, and role="status" stays reserved for "Saved." */}
          <PauseLaneButton
            lane={status.kind}
            held={status.held}
            onChange={onChange}
          />
        </span>
      </div>

      <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
        <span className="tabular-nums text-foreground">{inFlight}</span>
        <span>in flight</span>
        <Sep />
        <span className="tabular-nums text-foreground">
          {pending.toLocaleString()}
        </span>
        <span>pending</span>
        {running && status.runner.startedAt !== null && (
          <>
            <Sep />
            <span>
              up{" "}
              <span className="tabular-nums">
                {now !== null ? formatElapsed(now - status.runner.startedAt) : "—"}
              </span>
            </span>
          </>
        )}
        {status.runner.jobId && (
          <>
            <Sep />
            <Link
              href={`/jobs/${status.runner.jobId}`}
              className="underline underline-offset-2 hover:text-foreground"
            >
              job log
            </Link>
          </>
        )}
      </p>

      <WhereItRuns runsOn={runsOn} />

      {/* The page's answer to the most common question an operator arrives
          with. Only rendered while the runner is UP: for a stopped runner the
          pill above already says everything, and a second line repeating it
          would collide with the suite's getByText("Runner stopped"). */}
      {idle && (
        <p className="text-sm text-warning">
          <span className="font-mono text-xs uppercase tracking-[0.14em]">
            Idle
          </span>{" "}
          — {idle}.
        </p>
      )}
    </div>
  );
}

function Sep() {
  return (
    <span aria-hidden="true" className="text-border">
      ·
    </span>
  );
}

// WHERE THE LANE'S WORK CAN RUN besides this machine: the delegate workers (LLM
// endpoints, tagged unit executors) whose tags match one of its operations,
// folded to one row per configured worker with its slot count.
//
// READ-ONLY, and never part of any policy — delegation is a worker-pool concern
// decided per item at dispatch, and this only reports it. Derived through the
// SAME workerMatches rule the dispatchers grant by (views/autoQueueLanes.ts),
// so this line and the actual routing cannot disagree.
//
// It moved here from the sweep console's scope list, which drew it per
// operation row. A lane is the right scope: the slots belong to the machine, so
// two operations served by one endpoint are one row, not two.
//
// Rendered only when delegates are configured — the lane always runs here, and
// stating that on every console would be noise. The one loud case: capacity is
// configured and NONE of it can currently take work (degraded or disabled),
// which looks identical to "distributed" from the Start button.
function WhereItRuns({ runsOn }: { runsOn: LaneWorker[] }) {
  if (runsOn.length === 0) return null;
  const noneAvailable = runsOn.every((w) => w.available === 0);
  return (
    <p className="text-xs text-muted-foreground">
      also runs on{" "}
      {runsOn
        .map(
          (w) =>
            `${w.name} (${w.kind === "llm" ? "LLM endpoint" : "executor"}${
              w.slots > 1 ? ` ×${w.slots}` : ""
            })`,
        )
        .join(", ")}
      {noneAvailable && (
        <span className="text-warning">
          {" "}
          — none of it is available right now (degraded or disabled); this
          machine carries the whole lane until one is re-enabled.
        </span>
      )}
    </p>
  );
}