import { Stepper, Step, StepLabel } from '@mui/material'
import type { PipelineState } from '../../domain/signalPipeline'
import { PIPELINE_STAGE_ORDER, PIPELINE_STAGE_LABELS } from '../../domain/signalPipeline'

interface SignalPipelineStepperProps {
  pipelineState: PipelineState
}

export function SignalPipelineStepper({ pipelineState }: SignalPipelineStepperProps) {
  const currentStageIndex = PIPELINE_STAGE_ORDER.indexOf(pipelineState.currentStage)

  return (
    <Stepper
      activeStep={currentStageIndex}
      alternativeLabel
      sx={{
        mb: 1,
        '& .MuiStepIcon-root': { fontSize: '1.6rem', color: '#cbd5e1' },
        '& .MuiStepIcon-root.Mui-active': { color: '#152642' },
        '& .MuiStepIcon-root.Mui-completed': { color: '#15803d' },
        '& .MuiStepLabel-label': { fontSize: '0.68rem', mt: 0.5, color: '#64748b' },
        '& .MuiStepLabel-label.Mui-active': { color: '#152642', fontWeight: 700 },
        '& .MuiStepLabel-label.Mui-completed': { color: '#15803d' },
        '& .MuiStepConnector-line': { borderTopWidth: 2, borderColor: '#e8e7e4' },
        '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': { borderColor: '#15803d' },
        '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': { borderColor: '#152642' },
      }}
    >
      {PIPELINE_STAGE_ORDER.map((stage) => (
        <Step key={stage}>
          <StepLabel>{PIPELINE_STAGE_LABELS[stage]}</StepLabel>
        </Step>
      ))}
    </Stepper>
  )
}
