cameleer-server/ui/src/components/DeploymentProgress.tsx

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

const STAGES = [
  { key: 'PRE_FLIGHT', label: 'Prepare' },
  { key: 'PULL_IMAGE', label: 'Image' },
  { key: 'CREATE_NETWORK', label: 'Network' },
  { key: 'START_REPLICAS', label: 'Launch' },
  { key: 'HEALTH_CHECK', label: 'Verify' },
  { key: 'SWAP_TRAFFIC', label: 'Activate' },
  { key: 'COMPLETE', label: 'Live' },
];

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}>
      <div className={styles.track}>
        <div
          className={`${styles.trackFill} ${failed ? styles.trackFailed : ''}`}
          style={{ width: `${(currentIndex / (STAGES.length - 1)) * 100}%` }}
        />
      </div>
      <div className={styles.steps}>
        {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}>
              <div
                className={[
                  styles.dot,
                  isCompleted ? styles.completed : '',
                  isActive ? styles.active : '',
                  isFailed ? styles.failed : '',
                ].join(' ')}
              >
                {isCompleted && (
                  <svg width="8" height="8" viewBox="0 0 12 12" fill="none">
                    <path d="M2 6l3 3 5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                )}
              </div>
              <span
                className={[
                  styles.label,
                  isCompleted ? styles.labelDone : '',
                  isActive ? styles.labelActive : '',
                  isFailed ? styles.labelFailed : '',
                ].join(' ')}
              >
                {stage.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}