import React from 'react';
import { 
  Box, 
  Container, 
  Typography, 
  Grid, 
  Card, 
  CardContent, 
  CardMedia, 
  CardActions,
  IconButton, 
  Button, 
  Stack, 
  Chip
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../../store/store';
import { updateVarrometerState } from '../../../store/varrometerSlice';
import { MONITORING_METHODS, MonitoringMethod } from '../../../constants/monitoringMethods';
import InfoIcon from '@mui/icons-material/Info';
import MethodInfoDialog from '../MethodInfoDialog';

const HeroSection = styled(Box)(({ theme }) => ({
  position: 'relative',
  color: 'white',
  minHeight: '10vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  textAlign: 'center',
  overflow: 'hidden',
  marginTop: '0',
  marginBottom: theme.spacing(4),
  padding: theme.spacing(4, 0),
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: `linear-gradient(45deg, ${theme.palette.primary.main}dd 30%, ${theme.palette.secondary.main}dd 90%)`,
    zIndex: 1
  }
}));

const HeroContent = styled(Box)({
  position: 'relative',
  zIndex: 2,
  width: '100%',
  padding: '10px'
});

const Surveillance: React.FC = () => {
  const dispatch = useDispatch();
  const state = useSelector((state: RootState) => state.varrometer);
  const { selectedMethod } = state;
  const [openInfoDialog, setOpenInfoDialog] = useState<string | null>(null);

  const handleMethodSelect = (method: MonitoringMethod) => {
    dispatch(updateVarrometerState({ 
      selectedMethod: method.id,
      miteCount: undefined,
      sampleSize: undefined,
      infestationRate: undefined,
      infestationLevel: undefined
    }));
    
    // Navegar automáticamente a la pantalla de entrada de datos
    dispatch(updateVarrometerState({ currentPhase: 'data_entry' }));
  };

  const handleBack = () => {
    // Since this is now the first screen, we can navigate to the end phase or do nothing
    dispatch(updateVarrometerState({ currentPhase: 'end' }));
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', margin: 0, padding: 0, pb: 12 }}>
      <HeroSection>
        <HeroContent>
          <Container maxWidth="md">
            <Typography variant="h2" component="h1" gutterBottom>
            Counting method
            </Typography>
            <Typography variant="body1" sx={{ mb: 2, maxWidth: '800px', mx: 'auto' }}>
              Monitor and assess the level of Varroa infestation in your colonies
            </Typography>
          </Container>
        </HeroContent>
      </HeroSection>

      <Container maxWidth="lg">
        <Box sx={{ mt: 4 }}>
          {/* Monitoring Methods Cards */}
          <Grid container spacing={3} sx={{ mb: 4 }}>
            {MONITORING_METHODS.map((method) => (
              <Grid item xs={12} sm={6} md={2.4} key={method.id}>
                <Card 
                  elevation={method.id === selectedMethod ? 4 : 1}
                  sx={{ 
                    height: '100%',
                    cursor: 'pointer',
                    transition: 'all 0.2s',
                    transform: method.id === selectedMethod ? 'scale(1.02)' : 'scale(1)',
                    '&:hover': {
                      transform: 'scale(1.02)',
                    }
                  }}
                  onClick={() => handleMethodSelect(method)}
                >
                  <CardMedia
                    component="img"
                    height="140"
                    image={`/images/monitoring/${method.id}.jpg`}
                    alt={method.name}
                    sx={{ objectFit: 'cover' }}
                  />
                  <CardContent>
                    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
                      <Typography variant="h6" gutterBottom>
                        {method.name}
                      </Typography>
                      <IconButton
                        size="small"
                        onClick={(e) => {
                          e.stopPropagation();
                          setOpenInfoDialog(method.id);
                        }}
                      >
                        <InfoIcon />
                      </IconButton>
                    </Stack>

                    <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                      {method.description}
                    </Typography>

                    <Chip 
                      label={`${method.accuracy}% accuracy`}
                      color={method.accuracy > 90 ? 'success' : method.accuracy > 80 ? 'primary' : 'warning'}
                      size="small"
                    />
                  </CardContent>
                  <CardActions>
                    <Button 
                      size="small" 
                      color="primary"
                      onClick={(e) => {
                        e.stopPropagation();
                        setOpenInfoDialog(method.id);
                      }}
                    >
                      Learn More
                    </Button>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>

          {/* Navigation Buttons */}
          <Stack direction="row" spacing={2} justifyContent="flex-end">
            <Button onClick={handleBack}>
              Back
            </Button>
          </Stack>
        </Box>

        <MethodInfoDialog
          method={openInfoDialog ? MONITORING_METHODS.find(m => m.id === openInfoDialog) : undefined}
          open={!!openInfoDialog}
          onClose={() => setOpenInfoDialog(null)}
        />
      </Container>
    </Box>
  );
};

export default Surveillance;