/**
 * Pipeline Step Indicator
 * Shows the current stage in the 5-stage pipeline
 */

export type PipelineStage = 'upload' | 'landmarks' | 'analysis' | 'bodyscan' | 'brace' | 'fitting';

type Props = {
  currentStage: PipelineStage;
  landmarksApproved: boolean;
  analysisComplete: boolean;
  bodyScanComplete: boolean;
  braceGenerated: boolean;
  onStageClick?: (stage: PipelineStage) => void;
};

const stages = [
  { id: 'landmarks' as const, label: 'Landmark Detection', step: 1 },
  { id: 'analysis' as const, label: 'Spine Analysis', step: 2 },
  { id: 'bodyscan' as const, label: 'Body Scan', step: 3 },
  { id: 'brace' as const, label: 'Brace Generation', step: 4 },
  { id: 'fitting' as const, label: 'Fitting Inspection', step: 5 },
];

export default function PipelineSteps({ 
  currentStage, 
  landmarksApproved, 
  analysisComplete,
  bodyScanComplete,
  braceGenerated,
  onStageClick
}: Props) {
  const getStageStatus = (stageId: typeof stages[number]['id']) => {
    if (stageId === 'landmarks') {
      if (landmarksApproved) return 'complete';
      if (currentStage === 'landmarks') return 'active';
      return 'pending';
    }
    if (stageId === 'analysis') {
      if (analysisComplete) return 'complete';
      if (currentStage === 'analysis') return 'active';
      return 'pending';
    }
    if (stageId === 'bodyscan') {
      if (bodyScanComplete) return 'complete';
      if (currentStage === 'bodyscan') return 'active';
      return 'pending';
    }
    if (stageId === 'brace') {
      if (braceGenerated) return 'complete';
      if (currentStage === 'brace') return 'active';
      return 'pending';
    }
    if (stageId === 'fitting') {
      if (currentStage === 'fitting') return 'active';
      if (braceGenerated) return 'available'; // Can navigate to fitting after brace is generated
      return 'pending';
    }
    return 'pending';
  };
  
  const canNavigateToStage = (stageId: typeof stages[number]['id']) => {
    // Can always go back to completed stages
    const status = getStageStatus(stageId);
    if (status === 'complete') return true;
    if (status === 'active') return true;
    if (status === 'available') return true;
    return false;
  };

  return (
    <div className="pipeline-steps">
      {stages.map((stage, idx) => {
        const status = getStageStatus(stage.id);
        const canNavigate = canNavigateToStage(stage.id);
        return (
          <div 
            key={stage.id} 
            className={`pipeline-step pipeline-step--${status} ${canNavigate ? 'clickable' : ''}`}
            onClick={() => canNavigate && onStageClick?.(stage.id)}
            style={{ cursor: canNavigate ? 'pointer' : 'default' }}
          >
            <div className="pipeline-step-number">
              {status === 'complete' ? '✓' : stage.step}
            </div>
            <div className="pipeline-step-label">{stage.label}</div>
            {idx < stages.length - 1 && <div className="pipeline-step-connector" />}
          </div>
        );
      })}
    </div>
  );
}
