"use client";

import Link from "next/link";
import { useState } from "react";
import type { ActiveJobsPayload } from "yt-dlp-transcript-common/views/activeJobs";
import type { WorkersPayload } from "yt-dlp-transcript-common/views/workers";
import type { WidgetSyncPayload } from "yt-dlp-transcript-common/views/widgetSync";
import type { WidgetActionablePayload } from "yt-dlp-transcript-common/views/widgetActionable";
import { JobsTable } from "../../jobs/components/JobsTable";
import { LaneDeck } from "../lanes/LaneDeck";
import { syncAllChannelsAction, type SyncAllResult } from "../../channels/actions";
import { fmtTime } from "../../widget/lib/relativeTime";

// The hero: a single live instrument readout of the whole pipeline — running/
// queued jobs, worker-pool occupancy + pause state, sync heartbeat + scheduler —
// plus the global pause/sync/add controls, and the live job rows underneath.
// Updates in place from the cockpit's polls (this is the one signature element).
export function PipelineBand({
  jobs,
  workers,
  sync,
  actionable,
  now,
  onWorkersChange,
  onSynced,
}: {
  jobs: ActiveJobsPayload | null;
  workers: WorkersPayload | null;
  sync: WidgetSyncPayload | null;
  // Passed straight through to the lane cards, which state each lane's backlog
  // under its figure. The cockpit already polls it for the Needs-work panel.
  actionable: WidgetActionablePayload | null;
  now: number | null;
  onWorkersChange: () => void | Promise<void>;
  onSynced: () => void | Promise<void>;
}) {
  const jobList = jobs?.jobs ?? [];
  const running = jobList.filter((j) => j.status === "running").length;
  const queued = jobList.filter((j) => j.status === "queued").length;
  // WHAT IS LEFT UP HERE IS PIPELINE-WIDE, AND ONLY THAT. The digest and
  // backfill figures went to their own lane cards first; the workers gauge, the
  // manual downloads pause and the disk gate have now followed them, because
  // each is one lane's fact and a card that states its own numbers next to its
  // own switches makes the chip a second, more distant copy.
  //
  // `running · queued` stays because it is the whole queue rather than any one
  // lane, and so do the sync heartbeat and the scheduler.
  //
  // The two disk/pause nodes are not deleted — they are CARRIED, aria-labels and
  // conditions intact, onto the downloads card. disk-space.spec asserts both by
  // exact label on this page and does not care where on it they are.

  const lastSyncText =
    sync == null
      ? "…"
      : sync.lastSyncAllAt === null && sync.lastIndividualSyncAt === null
        ? "never"
        : fmtTime(
            Math.max(sync.lastSyncAllAt ?? 0, sync.lastIndividualSyncAt ?? 0),
            now,
            false,
          ) ?? "…";
  const schedulerOn = sync?.scheduler.enabled ?? false;

  return (
    <section
      aria-label="Pipeline"
      className="flex flex-col gap-3 rounded-md border border-border bg-card px-4 py-4"
    >
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-baseline gap-3">
          <h2 className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
            Pipeline
          </h2>
          {/* THE MONITOR WIDGET IS REACHED FROM THE THING IT MIRRORS, and no
              longer from the primary nav. It is a PROJECTION of this band's own
              payload drawn for a second screen — the same lanes, the same
              figures — and a projection is not a place. See
              editor/app/lib/nav.ts and plans/editor-operations-ia.md. */}
          <Link
            href="/widget/builder"
            className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground underline underline-offset-4 hover:text-foreground"
          >
            Monitor ↗
          </Link>
        </div>
        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm tabular-nums">
          <Instrument
            dotClass={running > 0 ? "bg-info animate-pulse motion-reduce:animate-none" : "bg-muted-foreground/40"}
            label={
              <>
                <span className="font-medium">{running}</span> running
                {queued > 0 && (
                  <>
                    {" · "}
                    <span className="font-medium">{queued}</span> queued
                  </>
                )}
              </>
            }
          />
          <Instrument
            dotClass={sync?.scheduler.overdue ? "bg-warning" : "bg-muted-foreground/40"}
            label={
              <>
                ⟳ synced <span className="font-medium">{lastSyncText}</span>
              </>
            }
          />
          <Instrument
            dotClass={schedulerOn ? "bg-success" : "bg-muted-foreground/40"}
            label={<>sched {schedulerOn ? "on" : "off"}</>}
          />
        </div>
      </div>

      <LaneDeck
        workers={workers}
        sync={sync}
        jobs={jobs}
        actionable={actionable}
        onWorkersChange={onWorkersChange}
        onSynced={onSynced}
      />

      {/* What is left is not a lane: a one-shot sweep of every channel, and
          the way in for a channel that does not exist yet. */}
      <div className="flex flex-wrap items-center gap-2">
        <SyncAllButton onSynced={onSynced} />
        <Link
          href="/channels/new"
          className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
        >
          + Add a channel
        </Link>
      </div>

      {jobList.length > 0 && jobs ? (
        // The same one list /jobs draws, with no tail: the band is the head.
        // The cockpit above already polls /api/view/activeJobs
        // (DashboardCockpit.tsx) and this component polls it again while
        // anything is live — the double poll predates this change and is out of
        // scope here.
        <JobsTable initial={jobs} history={[]} total={0} embedded />
      ) : (
        <p
          aria-label="pipeline idle"
          className="text-sm text-muted-foreground border border-dashed border-border rounded p-3"
        >
          Pipeline idle — no active jobs.
        </p>
      )}
    </section>
  );
}

function Instrument({
  dotClass,
  label,
}: {
  dotClass: string;
  label: React.ReactNode;
}) {
  return (
    <span className="flex items-center gap-1.5 text-muted-foreground">
      <span className={`inline-block h-2 w-2 shrink-0 rounded-full ${dotClass}`} />
      <span>{label}</span>
    </span>
  );
}

// Sweep every channel now, surfacing the queued/skipped counts briefly. Mirrors
// the widget's Sync-all control; refetches the sync readouts on completion.
function SyncAllButton({
  onSynced,
}: {
  onSynced: () => void | Promise<void>;
}) {
  const [running, setRunning] = useState(false);
  const [result, setResult] = useState<SyncAllResult | null>(null);
  const [error, setError] = useState<string | null>(null);

  async function handleClick() {
    setError(null);
    setResult(null);
    setRunning(true);
    try {
      setResult(await syncAllChannelsAction());
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setRunning(false);
      await onSynced();
    }
  }

  return (
    <span className="flex items-center gap-2">
      <button
        type="button"
        onClick={handleClick}
        disabled={running}
        aria-label="sync all channels"
        className="px-3 py-1.5 rounded-md border border-border text-sm hover:bg-muted disabled:opacity-50"
      >
        {running ? "Syncing…" : "Sync all"}
      </button>
      {result && (
        <span
          aria-label="sync all result"
          className="text-xs text-muted-foreground tabular-nums"
          title={
            result.skipped.length === 0
              ? undefined
              : result.skipped.map((s) => `${s.slug}: ${s.reason}`).join("\n")
          }
        >
          Queued {result.queued.length} · skipped {result.skipped.length}
        </span>
      )}
      {error && (
        <span role="alert" className="text-xs text-destructive">
          {error}
        </span>
      )}
    </span>
  );
}