import styles from './DeploymentProgress.module.css';

const STAGES = [
  { key: 'PRE_FLIGHT', label: 'Pre-flight' },
  { key: 'PULL_IMAGE', label: 'Pull' },
  { key: 'CREATE_NETWORK', label: 'Network' },
  { key: 'START_REPLICAS', label: 'Start' },
  { key: 'HEALTH_CHECK', label: 'Health' },
  { key: 'SWAP_TRAFFIC', label: 'Swap' },
  { key: 'COMPLETE', label: 'Done' },
];

interface DeploymentProgressProps {
  currentStage: string | null;
  failed?: boolean;
}

export function DeploymentProgress({ currentStage, failed }: DeploymentProgressProps) {
  if (!currentStage) return null;

  const currentIndex = STAGES.findIndex((s) => s.key === currentStage);

  return (
    <div className={styles.container}>
      {STAGES.map((stage, i) => {
        const isCompleted = i < currentIndex;
        const isActive = i === currentIndex && !failed;
        const isFailed = i === currentIndex && failed;

        return (
          <div key={stage.key} className={styles.step}>
            {i > 0 && (
              <div className={`${styles.line} ${isCompleted || isActive || isFailed ? styles.lineCompleted : ''}`} />
            )}
            <div className={styles.stepColumn}>
              <div className={`${styles.dot} ${isCompleted ? styles.dotCompleted : ''} ${isActive ? styles.dotActive : ''} ${isFailed ? styles.dotFailed : ''}`} />
              <span className={`${styles.label} ${isActive ? styles.labelActive : ''} ${isFailed ? styles.labelFailed : ''}`}>
                {stage.label}
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}