"use client";

import type { ReactNode } from "react";
import { useSectionFrame } from "../../widget/components/WidgetSection";
import { LaneRail } from "./LaneRail";
import {
  LANE_DOT,
  LANE_TEXT,
  LANE_WORD,
  type LaneState,
} from "yt-dlp-transcript-common/views/laneState";
import { LaneActionButton, type LaneActionResult } from "./LaneActionButton";

// One lane: its name, its state, its figure and BOTH its switches, in one place.
//
// The card exists because those four things used to live in four places — a
// status word in a grey span after the buttons, the numbers it referred to in
// chips several elements away (the dashboard) or in a strip that could be
// dragged to another corner entirely (the widget). An operator asking "is the
// backfill actually doing anything" had to assemble the answer.
//
// RESTRAINT: the surface stays `bg-card` in every state. The rail says it and
// the dot says it; a third tinted background would be the accessory to remove.

export type LaneControl = {
  key: string;
  label: string;
  glyph: string;
  ariaLabel: string;
  title?: string;
  variant: "active" | "idle";
  disabled?: boolean;
  action: () => Promise<LaneActionResult>;
  onChange?: () => void | Promise<void>;
};

export function LaneCard({
  name,
  state,
  figure,
  detail,
  note,
  controls,
}: {
  name: string;
  state: LaneState;
  // The lane's own number, in the house's tabular mono. For a lane with no sweep
  // this is the sentence saying so.
  figure: ReactNode;
  // About two lines under the figure: what the figure is MADE OF. The backfill
  // lane's is a per-kind breakdown, because its sum is a number in no unit at
  // all — see the sync payload's `kinds`.
  //
  // SUPPRESSED IN THE DENSE FRAME, deliberately, and this is the whole reason it
  // is a separate prop from `note`. A rail cell is one line; `note` survives
  // there because it is one short clause ("the sweep is holding") that the rail-
  // as-edge cannot draw. Two or three lines of breakdown would either wrap the
  // cell to three times its height or be truncated into a lie.
  detail?: ReactNode;
  // Anything the card must keep saying in words — the backfill lane's "the sweep
  // is holding", which the rail now also draws.
  note?: ReactNode;
  controls: LaneControl[];
}) {
  // The widget provides this per cell; outside the widget the default is
  // {scroll:false, dense:false}, so the dashboard needs no provider.
  const { dense } = useSectionFrame();

  const head = (
    <span className="flex items-center gap-1.5 text-xs">
      <span
        className={`inline-block h-2 w-2 shrink-0 rounded-full ${LANE_DOT[state]}`}
      />
      <span className={LANE_TEXT[state]}>{LANE_WORD[state]}</span>
    </span>
  );

  if (dense) {
    // A rail cell has room for one line. The rail becomes the left EDGE — same
    // reading, turned ninety degrees — and the buttons collapse to glyphs, whose
    // aria-labels carry the meaning they always did.
    return (
      <div
        role="group"
        aria-label={`${name.toLowerCase()} lane`}
        className="flex items-center gap-1.5 text-xs"
      >
        <span
          aria-hidden="true"
          className={`h-4 w-0.5 shrink-0 ${
            state === "running"
              ? "bg-info"
              : state === "holding"
                ? "bg-warning"
                : "bg-border"
          }`}
        />
        <span className="font-mono uppercase tracking-[0.14em] text-muted-foreground">
          {name}
        </span>
        {head}
        <span className="font-mono tabular-nums text-muted-foreground">
          {figure}
        </span>
        {/* Kept even here. The rail-as-edge cannot draw a break, so in the one
            frame where the drawing says least, the words are all there is. */}
        {note}
        {controls.map(({ key, ...c }) => (
          <LaneActionButton key={key} dense {...c} />
        ))}
      </div>
    );
  }

  return (
    <div
      role="group"
      aria-label={`${name.toLowerCase()} lane`}
      className="flex flex-col gap-2 rounded-md border border-border bg-card px-3 py-2.5"
    >
      <div className="flex items-baseline justify-between gap-2">
        <h3 className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
          {name}
        </h3>
        {head}
      </div>
      <LaneRail state={state} />
      <p className="font-mono text-xs tabular-nums text-muted-foreground">
        {figure}
      </p>
      {detail && (
        <div className="flex flex-col gap-0.5 text-[11px] text-muted-foreground">
          {detail}
        </div>
      )}
      {note}
      {controls.length > 0 && (
        <div className="flex flex-wrap items-center gap-1.5">
          {controls.map(({ key, ...c }) => (
            <LaneActionButton key={key} {...c} />
          ))}
        </div>
      )}
    </div>
  );
}