import React from 'react';
import { useDispatch } from 'react-redux';
import { 
  Box, 
  Container, 
  Typography, 
  Button, 
  Paper, 
  Grid, 
  Card, 
  CardContent, 
  CardMedia, 
  Stack 
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { updateVarrometerState } from '../../../store/varrometerSlice';
import FastForwardIcon from '@mui/icons-material/FastForward';
import AssessmentIcon from '@mui/icons-material/Assessment';
import HistoryIcon from '@mui/icons-material/History';

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 FeatureCard = styled(Card)(({ theme }) => ({
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  transition: 'transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out',
  '&:hover': {
    transform: 'translateY(-5px)',
    boxShadow: theme.shadows[8],
  },
}));

const CardIconWrapper = styled(Box)(({ theme }) => ({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom: theme.spacing(2),
  '& svg': {
    fontSize: 48,
    color: theme.palette.primary.main,
  }
}));

const Welcome: React.FC = () => {
  const dispatch = useDispatch();

  const handleStartVarrometer = () => {
    dispatch(updateVarrometerState({ currentPhase: 'surveillance' }));
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', margin: 0, padding: 0, pb: 12 }}>
      <HeroSection>
        <HeroContent>
          <Container maxWidth="md">
            <Typography variant="h2" component="h1" gutterBottom>
              Welcome to Varrometer
            </Typography>
            <Typography variant="body1" sx={{ mb: 2, maxWidth: '800px', mx: 'auto' }}>
              Your essential tool for monitoring and controlling varroa mite infestations in your beehives
            </Typography>
          </Container>
        </HeroContent>
      </HeroSection>

      <Container maxWidth="lg">
        <Box sx={{ mt: 4, mb: 6 }}>
          <Paper elevation={0} sx={{ p: 4, borderRadius: 2, bgcolor: 'background.paper' }}>
            <Typography variant="h4" component="h2" gutterBottom align="center" sx={{ mb: 4 }}>
              How Varrometer Works
            </Typography>
            
            <Typography variant="body1" paragraph sx={{ mb: 4 }}>
              Varrometer helps you monitor varroa mite infestations in your beehives through a simple step-by-step process. 
              You'll start with a quick counting test, and if needed, you can perform a more comprehensive assessment 
              and save your results to track the health of your colonies over time.
            </Typography>

            <Grid container spacing={4} sx={{ mb: 6 }}>
              <Grid item xs={12} md={4}>
                <FeatureCard>
                  <CardContent>
                    <CardIconWrapper>
                      <FastForwardIcon />
                    </CardIconWrapper>
                    <Typography variant="h6" component="h3" gutterBottom align="center">
                      Quick Test
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Perform a fast monitoring test to get an immediate assessment of varroa infestation levels in your hives.
                      Choose from several counting methods based on your available time and resources.
                    </Typography>
                  </CardContent>
                </FeatureCard>
              </Grid>
              
              <Grid item xs={12} md={4}>
                <FeatureCard>
                  <CardContent>
                    <CardIconWrapper>
                      <AssessmentIcon />
                    </CardIconWrapper>
                    <Typography variant="h6" component="h3" gutterBottom align="center">
                      Comprehensive Analysis
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Get detailed treatment recommendations based on your test results, colony conditions, and seasonal factors.
                      Access a library of treatment options with implementation guides.
                    </Typography>
                  </CardContent>
                </FeatureCard>
              </Grid>
              
              <Grid item xs={12} md={4}>
                <FeatureCard>
                  <CardContent>
                    <CardIconWrapper>
                      <HistoryIcon />
                    </CardIconWrapper>
                    <Typography variant="h6" component="h3" gutterBottom align="center">
                      History Tracking
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      Save your test results to build a comprehensive history of varroa infestation levels in your apiary.
                      Track effectiveness of treatments and monitor colony health over time.
                    </Typography>
                  </CardContent>
                </FeatureCard>
              </Grid>
            </Grid>

            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <Button 
                variant="contained" 
                size="large" 
                onClick={handleStartVarrometer}
                sx={{ 
                  px: 4, 
                  py: 1.5, 
                  borderRadius: 2,
                  fontSize: '1.1rem'
                }}
              >
                Start Varrometer
              </Button>
            </Box>
          </Paper>
        </Box>
      </Container>
    </Box>
  );
};

export default Welcome;