// Snapshot picker for the fleet compare: a native select over the usable
// runs (success|partial), one option per run labeled with start stamp,
// trigger, and region count. The other side's current value renders
// disabled so both sides can never point at the same run.

"use client";

import type { RunSummaryFile } from "@/lib/api-types";
import { utc8Stamp } from "@/lib/fmt";
import { inputClassName } from "@/components/ui/input";

/** "2026-09-01 10:00 UTC+8 · schedule · 18 regions" (+ " · partial"). */
export function runOptionLabel(r: RunSummaryFile): string {
  return `${utc8Stamp(r.startedAt)} · ${r.trigger} · ${r.regions.length} regions${
    r.status === "partial" ? " · partial" : ""
  }`;
}

export function RunSelect({
  sideLabel,
  runs,
  value,
  otherValue,
  onChange,
}: {
  sideLabel: string;
  /** usable runs, newest-first */
  runs: RunSummaryFile[];
  value: string;
  /** the other side's runId — its option renders disabled */
  otherValue: string;
  onChange: (runId: string) => void;
}) {
  return (
    <label className="flex items-center gap-2">
      <span className="text-text-secondary">{sideLabel}</span>
      <select
        aria-label={sideLabel}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={inputClassName}
      >
        {runs.map((r) => (
          <option key={r.runId} value={r.runId} disabled={r.runId === otherValue}>
            {runOptionLabel(r)}
          </option>
        ))}
      </select>
    </label>
  );
}