"use client";

import { useId } from "react";
import type { AutoQueueOrder } from "yt-dlp-transcript-common/jobs/autoQueuePolicy";
import { ORDER_LABEL, RECENCY_ORDERS, SELECT_CLASS } from "./dispatch";

// ORDER, at the foot of the lane where the decision lives.
//
// Not in /settings. An operator asking "why is it working on a 2019 video" is
// looking at this lane, and the answer is one control away or it is nowhere.
//
// IT WAS `OrderReach`, AND REACH IS GONE. Reach was a second axis — sort within
// each channel, or order the channels too — and it belonged to the corpus
// sweeps, which visited channels heaviest-first and therefore had a channel
// order to argue about. A RUNNER has no such axis: a rule already orders every
// video it claims across every channel and bucket, and which RULE goes first is
// the tree's job. Slice 1.3 retired the sweeps and every caller passed
// `reach={null}`; slice 1.4 deleted the branch, the enum and its sanitizer
// rather than leaving a control nothing could reach.
//
// Native <select>, like every other policy control on this page. That is
// load-bearing, not stylistic — see the note at the foot of dispatch.ts.

export function LaneOrder({
  order,
  // The trade-off sentence for this particular lane, or null when there is
  // none. Supplied rather than derived so each lane keeps its own copy verbatim.
  tradeoff,
  busy,
  // Pinned by the e2e suite for every lane ("video order for auto-transcribe").
  // Optional because the visible <label> already names the control.
  orderAriaLabel,
  // WHICH ORDERS THIS LANE OFFERS. Defaults to the three date-keyed ones, which
  // is every order that existed before the lanes did — so no console gains an
  // option it has no comparator for. A lane whose runner supplies one passes
  // its own list.
  orders = RECENCY_ORDERS,
  onChange,
}: {
  order: AutoQueueOrder;
  tradeoff: string | null;
  busy: boolean;
  orderAriaLabel?: string;
  orders?: ReadonlyArray<AutoQueueOrder>;
  onChange: (next: { order: AutoQueueOrder }) => void;
}) {
  const orderId = useId();
  const listed = order === "listed";

  return (
    <div className="flex flex-col gap-2 rounded-md border border-border bg-card px-3 py-2">
      <p className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Order
      </p>
      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
        <span className="flex items-center gap-2">
          <label htmlFor={orderId} className="text-muted-foreground">
            Order
          </label>
          <select
            id={orderId}
            aria-label={orderAriaLabel}
            className={SELECT_CLASS}
            value={order}
            disabled={busy}
            onChange={(e) =>
              onChange({ order: e.target.value as AutoQueueOrder })
            }
          >
            {orders.map((o) => (
              <option key={o} value={o}>
                {ORDER_LABEL[o]}
              </option>
            ))}
          </select>
        </span>
      </div>
      <p className="text-xs text-muted-foreground">
        {listed
          ? "Listed order is whatever order the work list already had — bucket order, then channel order."
          : "A rule orders every video it claims, across every channel and bucket. Which RULE goes first is still the rule list's job; for a pure newest-first archive, use one catch-all rule."}
      </p>
      {tradeoff && <p className="text-xs text-warning">{tradeoff}</p>}
    </div>
  );
}