SimulationControl.tsx

/**
 * Simulation control buttons with Material-UI - Start, Stop, Reset, Clear Results.
 */
import {
  Box,
  Button,
  Typography,
  Divider,
  Stack,
  Chip,
  CircularProgress,
} from '@mui/material';
import {
  PlayArrow as PlayArrowIcon,
  Stop as StopIcon,
  Delete as DeleteIcon,
  Refresh as RefreshIcon,
} from '@mui/icons-material';
import { useSimulationStore } from '../../store/simulationStore';

export default function SimulationControl() {
  const {
    config,
    isRunning,
    isLoading,
    simulationResults,
    startSimulation,
    stopSimulation,
    clearResults,
    reset,
  } = useSimulationStore();

  const canStart = config !== null && !isRunning && !isLoading;
  const canStop = isRunning;
  const canClear = simulationResults !== null && !isRunning;

  return (
    <Box>
      <Divider sx={{ my: 2 }} />

      <Typography variant="subtitle2" fontWeight={600} gutterBottom>
        Contrôle de simulation
      </Typography>

      {/* Status indicator */}
      <Box sx={{ my: 2 }}>
        <Chip
          label={
            isRunning
              ? 'Simulation en cours...'
              : simulationResults
              ? 'Simulation terminée'
              : 'Prêt à simuler'
          }
          color={
            isRunning
              ? 'warning'
              : simulationResults
              ? 'success'
              : 'default'
          }
          size="small"
          sx={{
            animation: isRunning ? 'pulse 2s ease-in-out infinite' : 'none',
            '@keyframes pulse': {
              '0%, 100%': { opacity: 1 },
              '50%': { opacity: 0.6 },
            },
          }}
        />
      </Box>

      {/* Action buttons */}
      <Stack spacing={1.5}>
        {/* Start button */}
        <Button
          onClick={startSimulation}
          disabled={!canStart}
          variant="contained"
          color="primary"
          fullWidth
          startIcon={
            isLoading ? (
              <CircularProgress size={16} color="inherit" />
            ) : (
              <PlayArrowIcon />
            )
          }
        >
          {isLoading ? 'Traitement...' : 'Démarrer la simulation'}
        </Button>

        {/* Stop button */}
        <Button
          onClick={stopSimulation}
          disabled={!canStop}
          variant="contained"
          color="error"
          fullWidth
          startIcon={<StopIcon />}
        >
          Arrêter la simulation
        </Button>

        {/* Clear results button */}
        <Button
          onClick={clearResults}
          disabled={!canClear}
          variant="contained"
          color="warning"
          fullWidth
          startIcon={<DeleteIcon />}
        >
          Effacer les résultats
        </Button>

        {/* Reset button */}
        <Button
          onClick={reset}
          disabled={isRunning}
          variant="outlined"
          color="primary"
          fullWidth
          startIcon={<RefreshIcon />}
        >
          Réinitialiser
        </Button>
      </Stack>

      {/* Simulation info */}
      {config && (
        <Box sx={{ mt: 3, pt: 2, borderTop: 1, borderColor: 'divider' }}>
          <Typography
            variant="caption"
            fontWeight={600}
            color="text.secondary"
            sx={{ textTransform: 'uppercase', display: 'block', mb: 1.5 }}
          >
            Paramètres de simulation
          </Typography>
          <Stack spacing={1}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">
                Temps de préchauffage:
              </Typography>
              <Typography variant="body2" fontFamily="monospace" fontWeight={500}>
                {config.warmup_time?.toLocaleString()} unités
              </Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">
                Durée de simulation:
              </Typography>
              <Typography variant="body2" fontFamily="monospace" fontWeight={500}>
                {config.simulation_time?.toLocaleString()} unités
              </Typography>
            </Box>
            {config.random_seed !== undefined && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Typography variant="body2" color="text.secondary">
                  Graine aléatoire:
                </Typography>
                <Typography variant="body2" fontFamily="monospace" fontWeight={500}>
                  {config.random_seed}
                </Typography>
              </Box>
            )}
          </Stack>
        </Box>
      )}
    </Box>
  );
}