ScenarioSelector.tsx

/**
 * Scenario selector component with Material-UI
 */
import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Alert,
  Typography,
} from '@mui/material';
import type { SelectChangeEvent } from '@mui/material';
import { Info as InfoIcon } from '@mui/icons-material';
import { useSimulationStore } from '../../store/simulationStore';

export default function ScenarioSelector() {
  const {
    scenarios,
    selectedScenarioId,
    loadScenario,
    isLoading,
    isRunning,
  } = useSimulationStore();

  const handleScenarioChange = (e: SelectChangeEvent) => {
    const scenarioId = e.target.value;
    if (scenarioId && scenarioId !== 'custom') {
      loadScenario(scenarioId);
    }
  };

  const currentScenario = scenarios.find((s) => s.id === selectedScenarioId);

  return (
    <div>
      <FormControl fullWidth disabled={isLoading || isRunning}>
        <InputLabel id="scenario-select-label">Scénario prédéfini</InputLabel>
        <Select
          labelId="scenario-select-label"
          id="scenario-select"
          value={selectedScenarioId || 'custom'}
          label="Scénario prédéfini"
          onChange={handleScenarioChange}
        >
          <MenuItem value="custom">
            <em>Configuration personnalisée</em>
          </MenuItem>
          {scenarios.map((scenario) => (
            <MenuItem key={scenario.id} value={scenario.id}>
              {scenario.name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>

      {/* Scenario description */}
      {currentScenario && (
        <Alert severity="info" icon={<InfoIcon />} sx={{ mt: 2 }}>
          <Typography variant="subtitle2" fontWeight={600}>
            {currentScenario.name}
          </Typography>
          <Typography variant="caption">
            {currentScenario.description}
          </Typography>
        </Alert>
      )}

      {/* Custom configuration indicator */}
      {!selectedScenarioId && (
        <Alert severity="info" icon={<InfoIcon />} sx={{ mt: 2 }}>
          <Typography variant="caption">
            Configuration personnalisée - Modifiez les paramètres ci-dessous
          </Typography>
        </Alert>
      )}
    </div>
  );
}