/**
 * @file The compact lane tile used in the Workspace carousel. It carries only
 * what you need to pick a lane — which lane, is it alive, what stage, how far —
 * because the full card, its controls and its working-copy facts live in the
 * detail panel below. Keeping the tile small is what lets a dozen lanes stay
 * scannable in one horizontal row.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useTranslation } from "react-i18next";
import type { Lane } from "../../lib/types";

const LIVENESS_DOT: Record<Lane["liveness"], string> = {
  active: "bg-status-success",
  idle: "bg-surface-4",
  dead: "bg-status-danger",
};

/** Whether the inferred stage sits ahead of the declared one in node order. */
function detectionLeads(lane: Lane): boolean {
  if (!lane.detected_stage) return false;
  const ids = lane.pipeline_nodes.map((n) => n.id);
  return ids.indexOf(lane.detected_stage) > ids.indexOf(lane.stage);
}

export default function LaneStripCard({
  lane,
  selected,
  onSelect,
}: {
  lane: Lane;
  selected: boolean;
  onSelect: () => void;
}) {
  const { t } = useTranslation(["lanes"]);

  return (
    <button
      type="button"
      data-testid={`lane-tile-${lane.id}`}
      data-selected={selected ? "true" : undefined}
      aria-pressed={selected}
      onClick={onSelect}
      title={lane.cwd}
      className={`w-56 shrink-0 snap-start rounded-lg border p-3 text-left shadow-sm transition-colors ${
        selected
          ? "border-accent bg-accent/10"
          : "border-border bg-surface-2 hover:border-border-light hover:bg-surface-3"
      }`}
    >
      <div className="mb-1.5 flex items-center gap-1.5">
        <span className={`h-2 w-2 shrink-0 rounded-full ${LIVENESS_DOT[lane.liveness]}`} />
        <span className="text-[10px] font-semibold uppercase tracking-widest text-fg-muted">
          {t("cardId", { id: lane.id })}
        </span>
        {lane.needs_action && (
          <span className="ml-auto text-status-warning" title={lane.needs_action}>
            ⚠
          </span>
        )}
      </div>

      <div className="mb-2 truncate text-[13px] font-medium text-fg-primary">
        {lane.title || lane.cwd}
      </div>

      <div className="flex items-center gap-1.5 text-[11px]">
        <span className="truncate rounded bg-surface-4 px-1.5 py-0.5 text-fg-secondary">
          {lane.stage}
        </span>
        {detectionLeads(lane) && (
          <span
            data-testid={`lane-tile-auto-${lane.id}`}
            title={lane.detected_signal || undefined}
            className="shrink-0 rounded border border-dashed border-status-warning/50 px-1 text-status-warning"
          >
            {lane.detected_stage}
          </span>
        )}
        {lane.progress > 0 && (
          <span className="ml-auto shrink-0 tabular-nums text-fg-muted">{lane.progress}%</span>
        )}
      </div>

      {lane.progress > 0 && (
        <div className="mt-1.5 h-0.5 overflow-hidden rounded-full bg-surface-4">
          <div className="h-full rounded-full bg-accent" style={{ width: `${lane.progress}%` }} />
        </div>
      )}
    </button>
  );
}