"use client";

import Link from "next/link";
import type { ActiveLaneView } from "yt-dlp-transcript-common/views/activeJobs";
import type { JobRowView } from "yt-dlp-transcript-common/views/jobRowView";
import { LANE_DOT, LANE_TEXT, LANE_WORD } from "yt-dlp-transcript-common/views/laneState";
import { JobRowActions } from "./JobRow";

// THE LANE STRIP. One line per pipeline, in place of one card per runner.
//
// Each lane keeps its <section aria-label="System jobs: …"> and its <h2>, so a
// runner is still addressable exactly as it was — what changed is that it costs
// a line instead of a card, and that it now says WHY it is not working. Four
// bordered cards saying "running" above the work with the progress bars is the
// layout this replaces.
//
// A LANE IS NOT A JOB, so this is not a JobRow: it keeps its own line (the
// suite pins the section, the heading and the Drain/Cancel on it). What it
// shares with every job row is the actions — its runner job's buttons are
// JobRowActions, the same status rules as /jobs and the card list.
export function LaneStrip({
  lanes,
  jobs,
}: {
  lanes: ActiveLaneView[];
  // kind -> the channel-less jobs of that kind. A lane has at most one (its own
  // long-lived runner or sweep job); its controls ride on the lane's line.
  jobs: Map<string, JobRowView[]>;
}) {
  if (lanes.length === 0) return null;
  return (
    <div className="rounded-md border border-border bg-card">
      <p className="border-b border-border px-3 py-1.5 font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Lanes
      </p>
      <div className="divide-y divide-border">
        {lanes.map((lane) => (
          <LaneRow key={lane.kind} lane={lane} job={jobs.get(lane.kind)?.[0]} />
        ))}
      </div>
    </div>
  );
}

function LaneRow({
  lane,
  job,
}: {
  lane: ActiveLaneView;
  job: JobRowView | undefined;
}) {
  return (
    <section
      aria-label={`System jobs: ${lane.label}`}
      className="flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-2 text-sm"
    >
      <span
        aria-hidden="true"
        className={`size-2 shrink-0 rounded-full ${LANE_DOT[lane.state]}`}
      />
      {/* Kept an <h2>: the suite finds this runner by heading, and a lane is
          still the thing a screen reader should be able to jump to. */}
      <h2 className="min-w-40 text-sm font-medium">{lane.label}</h2>
      <span className={`text-xs ${LANE_TEXT[lane.state]}`}>
        {LANE_WORD[lane.state]}
        {lane.note ? (
          <span className="text-muted-foreground">: {lane.note}</span>
        ) : null}
      </span>
      {lane.inFlight > 0 && (
        <span className="text-xs text-muted-foreground">
          <span className="tabular-nums text-foreground">{lane.inFlight}</span>{" "}
          in flight
        </span>
      )}
      {job && (
        <span className="ml-auto flex items-center gap-2">
          <Link
            href={`/jobs/${job.id}`}
            className="text-xs underline underline-offset-2 text-muted-foreground hover:text-foreground"
          >
            log
          </Link>
          <JobRowActions job={job} forceRelease="stuck" />
        </span>
      )}
    </section>
  );
}