import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import { resetVarrometerState } from '../../../store/varrometerSlice';
import { BIOTECHNICAL_METHODS, BiotechnicalMethod } from '../../../constants/biotechnicalMethods';
import { VarrometerTreatment } from '../../../types/varrometer';
import { MONITORING_METHODS } from '../../../constants/monitoringMethods';
import {
  Container,
  Typography,
  Button,
  Box,
  Grid,
  Paper,
  List,
  ListItem,
  ListItemText,
  Divider
} from '@mui/material';

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

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

  return (
    <Container maxWidth={false}>
      <Box sx={{ p: 3 }}>
        <Typography variant="h4" gutterBottom>
          Treatment Summary
        </Typography>

        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper sx={{ p: 3, mb: 3 }}>
              <Typography variant="h6" gutterBottom>
                Colony Information
              </Typography>
              <List>
                <ListItem>
                  <ListItemText
                    primary="Beekeeping Type"
                    secondary={state.beekeepingType || 'Not available'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Colony Strength"
                    secondary={state.colonyStrength || 'Not available'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Hive Type"
                    secondary={state.hiveType || 'Not available'}
                  />
                </ListItem>
              </List>
            </Paper>
          </Grid>

          <Grid item xs={12}>
            <Paper sx={{ p: 3, mb: 3 }}>
              <Typography variant="h6" gutterBottom>
                Monitoring Results
              </Typography>
              <List>
                <ListItem>
                  <ListItemText
                    primary="Method"
                    secondary={MONITORING_METHODS.find(m => m.id === state.selectedMethod)?.name || 'Not selected'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Sample Size"
                    secondary={state.sampleSize || 'Not available'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Mite Count"
                    secondary={state.miteCount || 'Not available'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Infestation Rate"
                    secondary={state.infestationRate ? `${state.infestationRate}%` : 'Not available'}
                  />
                </ListItem>
                <ListItem>
                  <ListItemText
                    primary="Infestation Level"
                    secondary={state.infestationLevel || 'Not available'}
                  />
                </ListItem>
              </List>
            </Paper>
          </Grid>

          {state.selectedBiotechnicalMethods.length > 0 && (
            <Grid item xs={12}>
              <Paper sx={{ p: 3, mb: 3 }}>
                <Typography variant="h6" gutterBottom>
                  Selected Biotechnical Methods
                </Typography>
                <Grid container spacing={2}>
                  {state.selectedBiotechnicalMethods.map((methodId: string) => {
                    const method = BIOTECHNICAL_METHODS.find(m => m.id === methodId);
                    if (!method) return null;
                    return (
                      <Grid item xs={12} md={6} key={method.id}>
                        <Paper>
                          <Typography variant="h6" gutterBottom>
                            {method.name}
                          </Typography>
                          <Typography variant="body1" gutterBottom>
                            {method.description}
                          </Typography>
                          <Typography variant="subtitle1" gutterBottom>
                            Implementation Steps:
                          </Typography>
                          <List>
                            {method.implementation.map((step: string, index: number) => (
                              <ListItem key={index}>
                                • {step}
                              </ListItem>
                            ))}
                          </List>
                        </Paper>
                      </Grid>
                    );
                  })}
                </Grid>
              </Paper>
            </Grid>
          )}

          {state.selectedTreatments && state.selectedTreatments.length > 0 && (
            <Grid item xs={12}>
              <Paper sx={{ p: 3 }}>
                <Typography variant="h6" gutterBottom>
                  Selected Treatments
                </Typography>
                <List>
                  {state.selectedTreatments.map((treatment: VarrometerTreatment) => (
                    <React.Fragment key={treatment.id}>
                      <ListItem>
                        <Box sx={{ width: '100%' }}>
                          <Typography variant="subtitle1" gutterBottom>
                            {treatment.name}
                          </Typography>
                          <Typography variant="body2" color="text.secondary" paragraph>
                            Duration: {treatment.duration}
                          </Typography>
                          <Grid container spacing={2}>
                            <Grid item xs={12} sm={6}>
                              <Typography variant="body2">
                                <strong>Active Substance:</strong> {treatment.activeSubstance}
                              </Typography>
                              <Typography variant="body2">
                                <strong>Effectiveness:</strong> {treatment.effectiveness}%
                              </Typography>
                            </Grid>
                            <Grid item xs={12} sm={6}>
                              <Typography variant="body2">
                                <strong>Cost:</strong> {treatment.cost}
                              </Typography>
                              <Typography variant="body2">
                                <strong>Availability:</strong> {treatment.availability}
                              </Typography>
                            </Grid>
                          </Grid>
                        </Box>
                      </ListItem>
                      <Divider />
                    </React.Fragment>
                  ))}
                </List>
              </Paper>
            </Grid>
          )}
        </Grid>

        <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
          <Button variant="contained" onClick={handleReset}>
            Start Over
          </Button>
        </Box>
      </Box>
    </Container>
  );
};

export default End;