"use client";

import type { AutoQueueStatusPayload } from "yt-dlp-transcript-common/views/autoQueueStatus";
import Link from "next/link";
import type { SyncRowView } from "../syncRow";
import { OperationRail } from "./OperationRail";
import { railStates } from "./railStates";
import { useHydrated, useOperationsStatus } from "./useOperationsStatus";

// THE BOARD: every operation this install runs, one line each. It is the whole
// of the page — there is nothing here that is about ONE operation, because that
// is what /operations/<id> is for.
//
// There was a dispatcher bar under the rail until slice 1.3: the arbiter's, a
// unified dispatcher that never ran a single unit in production. The four lanes
// each have a runner and a console of their own, and the rail's rows link to
// them.
//
// This is what the lane <select> used to hide. The console before it stacked
// two identical runner panels and had no room for the other pipelines at all,
// so "the digest lane is idle because transcription is hogging the GPU" was a
// fact you could only assemble by visiting three pages. Then it was one page
// with a dropdown, which said the same thing in one place but made "open the
// download lane" an action with no address. Now the rail's rows are links: the
// glance and the drill-down are the same control.
export function OperationsBoard({
  initial,
  sync,
}: {
  initial: AutoQueueStatusPayload;
  sync: SyncRowView;
}) {
  const { data } = useOperationsStatus(initial);
  const hydrated = useHydrated();

  return (
    // data-board is the board's addressing hook, and data-hydrated the signal
    // that React is live on it — the rail's live figures are stale until it
    // is. See useHydrated.
    <div
      data-board="operations"
      data-hydrated={hydrated ? "true" : undefined}
      className="flex flex-col gap-6"
    >
      {/* SYNC IS A ROW ON THE RAIL, not a panel below it. The board would be
          lying by omission without it — a corpus that has stopped noticing new
          videos is not idle, it is broken, and every figure on the rail would
          still read "all caught up" — and it belongs IN the rail now that sync
          is a catalogued operation with a page of its own. */}
      <OperationRail
        bands={data.lanes.bands}
        states={railStates(data)}
        selectedId={null}
        sync={sync}
      />
      {/* THE PUBLISH LANE (release 18) is a pipeline lane, not an operation of
          the catalog: a plain row below the rail, to its own page. */}
      <Link
        href="/operations/publish"
        className="flex items-baseline justify-between gap-3 rounded-md border border-border px-3 py-2 text-sm hover:bg-muted"
      >
        <span className="font-medium">Publishing</span>
        <span className="text-muted-foreground">
          the publish lane — index, builds, deploys
        </span>
      </Link>
    </div>
  );
}