import { Check, Lock, AlertTriangle, XCircle, Loader2 } from 'lucide-react';

const tone = {
  completed: { ring: 'border-cyan-400/60 bg-cyan-400/15 text-cyan-200', bar: 'bg-cyan-400', Icon: Check },
  active: { ring: 'border-cyan-400 bg-cyan-400/20 text-cyan-100', bar: 'bg-cyan-400', Icon: Loader2 },
  pending: { ring: 'border-white/10 bg-white/[0.02] text-slate-600', bar: 'bg-white/10', Icon: null },
  locked: { ring: 'border-white/10 bg-white/[0.02] text-slate-600', bar: 'bg-white/10', Icon: Lock },
  warning: { ring: 'border-amber-400/50 bg-amber-400/15 text-amber-200', bar: 'bg-amber-400', Icon: AlertTriangle },
  failed: { ring: 'border-red-500/50 bg-red-500/15 text-red-300', bar: 'bg-red-500', Icon: XCircle }
};

/**
 * Horizontal technical workflow rail.
 * stages: string[] — stage labels
 * current: number — active stage index
 * states: { [index]: 'completed'|'active'|'locked'|'warning'|'failed' } override
 */
export default function StageRail({ stages, current, states = {} }) {
  const resolve = (i) => {
    if (states[i]) return states[i];
    if (i < current) return 'completed';
    if (i === current) return 'active';
    return 'pending';
  };
  return (
    <div className="panel-glass overflow-x-auto">
      <ol className="flex min-w-max items-center gap-0 px-1 py-3">
        {stages.map((label, i) => {
          const s = tone[resolve(i)];
          const Icon = s.Icon;
          const next = tone[resolve(i + 1)] || null;
          return (
            <li key={label} className="flex items-center">
              <div className="flex flex-col items-center gap-1.5">
                <span className={`grid h-8 w-8 place-items-center rounded-full border text-xs font-semibold ${s.ring}`}>
                  {Icon ? <Icon size={14} className={resolve(i) === 'active' ? 'animate-spin' : ''} /> : i + 1}
                </span>
                <span className={`whitespace-nowrap text-[11px] font-medium ${resolve(i) === 'pending' || resolve(i) === 'locked' ? 'text-slate-600' : 'text-slate-300'}`}>{label}</span>
              </div>
              {i < stages.length - 1 && (
                <span className={`mx-1 mb-5 h-[2px] w-8 rounded-full ${resolve(i) === 'completed' ? 'bg-cyan-400/70' : 'bg-white/10'} sm:w-12`} />
              )}
            </li>
          );
        })}
      </ol>
    </div>
  );
}