import type { HarnessGateStatus, HarnessTraceGraph } from '../../lib/api';

const TONE: Record<HarnessGateStatus, string> = {
  queued: 'border-slate-200 bg-slate-100 text-slate-400',
  running: 'border-blue-300 bg-blue-50 text-blue-700',
  pass: 'border-emerald-300 bg-emerald-50 text-emerald-700',
  warning: 'border-amber-300 bg-amber-50 text-amber-700',
  blocked: 'border-rose-300 bg-rose-50 text-rose-700',
  error: 'border-rose-300 bg-rose-50 text-rose-700',
  skipped: 'border-slate-200 bg-slate-100 text-slate-400',
};

const MARK: Record<HarnessGateStatus, string> = {
  queued: '○',
  running: '●',
  pass: '✓',
  warning: '!',
  blocked: '×',
  error: '×',
  skipped: '–',
};

export function AssuranceRail({ graph }: { graph: HarnessTraceGraph }) {
  return (
    <div className="overflow-x-auto pb-1">
      <div className="flex min-w-[760px] items-center">
        {graph.nodes.map((node, index) => (
          <div key={node.id} className="flex min-w-0 flex-1 items-center">
            <div className={`min-w-0 flex-1 rounded-xl border p-3 ${TONE[node.status]}`}>
              <div className="flex items-center justify-between gap-2">
                <span className="text-[10px] font-black uppercase tracking-[0.12em]">{node.title.split(' · ')[0]}</span>
                <span className={`flex h-5 w-5 items-center justify-center rounded-full border border-current text-[10px] ${node.status === 'running' ? 'animate-pulse' : ''}`}>{MARK[node.status]}</span>
              </div>
              <div className="mt-2 truncate text-xs font-semibold">{node.title.split(' · ')[1]}</div>
            </div>
            {index < graph.nodes.length - 1 && <div className={`h-px w-3 shrink-0 ${node.status === 'pass' ? 'bg-emerald-300' : 'bg-slate-200'}`} />}
          </div>
        ))}
      </div>
    </div>
  );
}