import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import { updateVarrometerState, resetVarrometerState } from '../../../store/varrometerSlice';
import { VarrometerState, Phase } from '../../../types/varrometer';
import {
  Stack,
  Typography,
  Button,
  Box,
  Alert,
  AlertTitle,
  Container,
  List,
  ListItem,
  ListItemIcon
} from '@mui/material';
import { Warning as WarningIcon } from '@mui/icons-material';

const Stop: React.FC = () => {
  const dispatch = useDispatch();
  const state = useSelector((state: RootState) => state.varrometer);

  const handleRestart = () => {
    dispatch(resetVarrometerState());
  };

  const handleBack = () => {
    // Return to the previous phase based on the current state
    const previousPhase = getPreviousPhase(state);
    dispatch(updateVarrometerState({ currentPhase: previousPhase }));
  };

  const getPreviousPhase = (state: VarrometerState): Phase => {
    // Logic to determine the previous phase based on the current state
    switch (state.currentPhase) {
      case 'surveillance':
        return 'introduction';
      case 'methods':
        return 'surveillance';
      case 'medications':
        return 'methods';
      case 'treatment_results':
        return 'medications';
      default:
        return 'introduction';
    }
  };

  const getMissingFields = () => {
    const missing: string[] = [];
    if (!state.beekeepingType) missing.push('Beekeeping type');
    if (!state.timePerHive) missing.push('Time per hive');
    if (!state.hiveType) missing.push('Hive type');
    if (state.sampleSize === null) missing.push('Sample size');
    if (!state.geneticResistance) missing.push('Genetic resistance information');
    if (!state.treatmentAvailable) missing.push('Treatment Accessibility');
    if (!state.colonyStrength) missing.push('Colony strength');

    return missing;
  };

  return (
    <Container maxWidth="sm">
      <Stack spacing={3} sx={{ p: 2 }}>
        <Box>
          <Typography variant="h4" gutterBottom>
            Process Interrupted
          </Typography>
          <Typography variant="body1" sx={{ mb: 2 }}>
            We cannot proceed with the treatment recommendations due to missing or invalid information.
            Please review and complete all required fields.
          </Typography>
        </Box>

        <Alert severity="error" icon={<WarningIcon />}>
          <AlertTitle>Unable to Continue</AlertTitle>
          We cannot proceed with the treatment recommendations due to missing or invalid information.
          Please review and complete all required fields.
        </Alert>

        <Box>
          <Typography variant="h6" gutterBottom>
            Missing Information:
          </Typography>
          <List>
            {getMissingFields().map((item, index) => (
              <ListItem key={index} sx={{ color: 'red' }}>
                <ListItemIcon>
                  <WarningIcon sx={{ color: 'red' }} />
                </ListItemIcon>
                {item}
              </ListItem>
            ))}
          </List>
        </Box>

        <Box sx={{ mt: 2, display: 'flex', gap: 2 }}>
          <Button variant="outlined" onClick={handleBack}>
            Go Back
          </Button>
          <Button variant="contained" onClick={handleRestart}>
            Start Over
          </Button>
        </Box>
      </Stack>
    </Container>
  );
};

export default Stop;