/**
 * Main Dashboard component with Material-UI
 */
import { useEffect } from 'react';
import {
  Box,
  Container,
  Paper,
  AppBar,
  Toolbar,
  Typography,
  Alert,
  IconButton,
  Divider,
  Stack,
} from '@mui/material';
import {
  Close as CloseIcon,
  Science as ScienceIcon,
} from '@mui/icons-material';
import { useSimulationStore } from '../store/simulationStore';
import ScenarioSelector from './simulation/ScenarioSelector';
import ParameterPanel from './simulation/ParameterPanel';
import SimulationControl from './simulation/SimulationControl';
import ResultsDisplay from './results/ResultsDisplay';
import ExportButton from './results/ExportButton';

export default function Dashboard() {
  const { loadScenarios, error, setError } = useSimulationStore();

  useEffect(() => {
    loadScenarios();
  }, [loadScenarios]);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      {/* App Bar */}
      <AppBar position="static" elevation={2}>
        <Toolbar>
          <ScienceIcon sx={{ mr: 2 }} />
          <Box sx={{ flexGrow: 1 }}>
            <Typography variant="h6" component="div">
              Simulation de Réseau de Files d'Attente
            </Typography>
            <Typography variant="caption" sx={{ opacity: 0.8 }}>
              Base de données distribuée - Théorème de Jackson
            </Typography>
          </Box>
          <Typography variant="caption" sx={{ textAlign: 'right' }}>
            MED - Projet 2025-2026
            <br />
            Modélisation Incertitude et Simulation
          </Typography>
        </Toolbar>
      </AppBar>

      {/* Error Alert */}
      {error && (
        <Container maxWidth="xl" sx={{ mt: 2 }}>
          <Alert
            severity="error"
            action={
              <IconButton
                aria-label="close"
                color="inherit"
                size="small"
                onClick={() => setError(null)}
              >
                <CloseIcon fontSize="inherit" />
              </IconButton>
            }
          >
            <Typography variant="body2" fontWeight={600}>
              Erreur
            </Typography>
            {error}
          </Alert>
        </Container>
      )}

      {/* Main Content */}
      <Container maxWidth="xl" sx={{ flexGrow: 1, py: 4 }}>
        <Box sx={{ display: 'flex', gap: 3, flexDirection: { xs: 'column', lg: 'row' } }}>
          {/* Left Sidebar - Configuration */}
          <Box sx={{ flex: { xs: '1', lg: '0 0 400px' } }}>
            <Paper elevation={3} sx={{ p: 3 }}>
              <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
                Configuration
              </Typography>
              <Divider sx={{ mb: 3 }} />

              <Stack spacing={3}>
                <ScenarioSelector />
                <ParameterPanel />
                <SimulationControl />
              </Stack>
            </Paper>
          </Box>

          {/* Right Content - Results */}
          <Box sx={{ flex: 1 }}>
            <Paper elevation={3} sx={{ p: 3 }}>
              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                <Typography variant="h6">
                  Résultats
                </Typography>
                <ExportButton />
              </Box>
              <Divider sx={{ mb: 3 }} />
              <ResultsDisplay />
            </Paper>
          </Box>
        </Box>
      </Container>

      {/* Footer */}
      <Box
        component="footer"
        sx={{
          py: 2,
          px: 2,
          mt: 'auto',
          backgroundColor: (theme) => theme.palette.grey[100],
          borderTop: 1,
          borderColor: 'divider',
        }}
      >
        <Container maxWidth="xl">
          <Typography variant="body2" color="text.secondary" align="center">
            Simulation de réseau de files d'attente avec validation analytique (Théorème de Jackson)
          </Typography>
        </Container>
      </Box>
    </Box>
  );
}