import type { StageMap, StageStatus } from '../types/index.js';

const STAGES: { key: keyof StageMap; label: string }[] = [
  { key: 'interpreter', label: 'Interpreting Preferences' },
  { key: 'retrieval', label: 'Generating Candidates' },
  { key: 'ranking', label: 'Ranking Shows' },
  { key: 'curator', label: 'Curating Results' },
];

interface PipelineProgressProps {
  stages: StageMap;
}

function StageIcon({ status }: { status: StageStatus }) {
  switch (status) {
    case 'done':
      return <span class="stage-icon stage-done">✓</span>;
    case 'error':
      return <span class="stage-icon stage-error">✗</span>;
    case 'running':
      return <span class="stage-icon stage-running spinner">⟳</span>;
    default:
      return <span class="stage-icon stage-pending">○</span>;
  }
}

export function PipelineProgress({ stages }: PipelineProgressProps) {
  return (
    <div class="pipeline-progress">
      <h3 class="pipeline-title">Generating Recommendations…</h3>
      <ul class="pipeline-steps">
        {STAGES.map(({ key, label }) => (
          <li key={key} class={`pipeline-step pipeline-step--${stages[key]}`}>
            <StageIcon status={stages[key]} />
            <span class="pipeline-step-label">{label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
