import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  Button,
  ButtonProps,
  Container,
  Paper,
  Typography,
  Stack,
  Card,
  CardContent,
  CardActions,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import PersonSearchIcon from '@mui/icons-material/PersonSearch';
import WorkHistoryIcon from '@mui/icons-material/WorkHistory';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';
import DescriptionIcon from '@mui/icons-material/Description';
import professionalConversationPng from 'assets/Conversation.png';
import { ComingSoon } from 'components/ui/ComingSoon';
import { useAuth } from 'hooks/AuthContext';

// Placeholder for Testimonials component
const Testimonials = () => {
  return (
    <Paper elevation={0} sx={{ p: 2, my: 4 }}>
      Testimonials Component (Quotes, Success Stories)
    </Paper>
  );
};

// Styled components
const HeroSection = styled(Box)(({ theme }) => ({
  padding: theme.spacing(8, 0),
  backgroundColor: theme.palette.primary.main,
  color: theme.palette.primary.contrastText,
  [theme.breakpoints.down('md')]: {
    padding: theme.spacing(6, 0),
  },
}));

interface HeroButtonProps extends ButtonProps {
  children?: string;
}
const HeroButton = (props: HeroButtonProps) => {
  const { children, onClick, ...rest } = props;

  const navigate = useNavigate();

  const handleClick = () => {
    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
    navigate(path);
  };

  const HeroStyledButton = styled(Button)(({ theme }) => ({
    marginTop: theme.spacing(2),
    padding: theme.spacing(1, 3),
    fontWeight: 500,
    backgroundColor: theme.palette.action.active,
    color: theme.palette.background.paper,
    '&:hover': {
      backgroundColor: theme.palette.action.active,
      opacity: 0.9,
    },
  }));
  return (
    <HeroStyledButton onClick={onClick ? onClick : handleClick} {...rest}>
      {children}
    </HeroStyledButton>
  );
};

interface ActionButtonProps extends ButtonProps {
  children?: string;
}
const ActionButton = (props: ActionButtonProps) => {
  const { children, onClick, ...rest } = props;

  const navigate = useNavigate();

  const handleClick = () => {
    const path = children?.replace(/ /g, '-').toLocaleLowerCase() || '/';
    navigate(path);
  };

  return (
    <Button onClick={onClick ? onClick : handleClick} {...rest}>
      {children}
    </Button>
  );
};

const FeatureIcon = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.action.active,
  color: theme.palette.background.paper,
  borderRadius: '50%',
  padding: theme.spacing(2),
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  marginBottom: theme.spacing(2),
  width: 64,
  height: 64,
}));

// Feature Card Component
const FeatureCard = ({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
}) => {
  return (
    <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <CardContent sx={{ flexGrow: 1 }}>
        <Box display="flex" justifyContent="center" mb={2}>
          {icon}
        </Box>
        <Typography variant="h5" component="h3" gutterBottom align="center">
          {title}
        </Typography>
        <Typography variant="body1" color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions sx={{ justifyContent: 'center', pb: 2 }}>
        <Button size="small" endIcon={<ArrowForwardIcon />}>
          Learn more
        </Button>
      </CardActions>
    </Card>
  );
};

const HomePage = () => {
  const testimonials = false;
  const { isGuest, guest, user } = useAuth();

  if (isGuest) {
    // Show guest-specific UI
    console.log('Guest session:', guest?.sessionId || 'No guest');
  } else {
    // Show authenticated user UI
    console.log('Authenticated user:', user?.email || 'No user');
  }

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column' }}>
      {/* Hero Section */}
      <HeroSection>
        <Container>
          <Box
            sx={{
              display: 'flex',
              flexDirection: { xs: 'column', md: 'row' },
              gap: 4,
              alignItems: 'center',
              flexGrow: 1,
              maxWidth: '1024px',
            }}
          >
            <Box sx={{ flex: 1, flexGrow: 1 }}>
              <Typography
                variant="h2"
                component="h1"
                sx={{
                  fontWeight: 700,
                  fontSize: { xs: '2rem', md: '3rem' },
                  mb: 2,
                  color: 'white',
                }}
              >
                Your complete professional story, beyond a single page
              </Typography>
              <Typography variant="h5" sx={{ mb: 3, fontWeight: 400 }}>
                Let potential employers discover the depth of your experience through interactive
                Q&A and tailored resumes
              </Typography>
              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                <HeroButton variant="contained" size="large">
                  Get Started as Candidate
                </HeroButton>
                <HeroButton
                  variant="outlined"
                  size="large"
                  sx={{
                    backgroundColor: 'transparent',
                    border: '2px solid',
                    borderColor: 'action.active',
                  }}
                >
                  Recruit Talent
                </HeroButton>
              </Stack>
            </Box>
            <Box
              sx={{
                justifyContent: 'center',
                display: { xs: 'none', md: 'block' },
              }}
            >
              <Box
                component="img"
                src={professionalConversationPng}
                alt="Professional conversation"
                sx={{
                  width: '100%',
                  maxWidth: 200,
                  height: 'auto',
                  borderRadius: 2,
                  boxShadow: 3,
                }}
              />
            </Box>
          </Box>
        </Container>
      </HeroSection>

      {/* How It Works Section */}
      <Container sx={{ py: 8 }}>
        <Typography
          variant="h3"
          component="h2"
          align="center"
          gutterBottom
          sx={{ mb: 6, fontWeight: 600 }}
        >
          How Backstory Works
        </Typography>

        <Box
          sx={{
            display: 'flex',
            flexDirection: { xs: 'column', md: 'row' },
            gap: 4,
          }}
        >
          <Box sx={{ flex: 1 }}>
            <Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
              For Job Seekers
            </Typography>
            <Box sx={{ my: 3 }}>
              <Typography variant="body1" paragraph>
                Backstory helps you tell your complete professional story, highlight your
                achievements, and showcase your skills beyond what fits on a traditional resume.
              </Typography>
            </Box>

            <Stack spacing={3}>
              <Box display="flex" alignItems="center">
                <Box
                  sx={{
                    backgroundColor: 'primary.main',
                    color: 'primary.contrastText',
                    borderRadius: '50%',
                    width: 40,
                    height: 40,
                    minWidth: 40,
                    minHeight: 40,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    mr: 2,
                    fontWeight: 'bold',
                  }}
                >
                  1
                </Box>
                <Typography variant="body1">
                  Upload your complete work history, projects, and achievements
                </Typography>
              </Box>

              <Box display="flex" alignItems="center">
                <Box
                  sx={{
                    backgroundColor: 'primary.main',
                    color: 'primary.contrastText',
                    borderRadius: '50%',
                    width: 40,
                    height: 40,
                    minWidth: 40,
                    minHeight: 40,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    mr: 2,
                    fontWeight: 'bold',
                  }}
                >
                  2
                </Box>
                <Typography variant="body1">
                  Configure your AI assistant to answer questions about your experience
                </Typography>
              </Box>

              <Box display="flex" alignItems="center">
                <Box
                  sx={{
                    backgroundColor: 'primary.main',
                    color: 'primary.contrastText',
                    borderRadius: '50%',
                    width: 40,
                    height: 40,
                    minWidth: 40,
                    minHeight: 40,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    mr: 2,
                    fontWeight: 'bold',
                  }}
                >
                  3
                </Box>
                <Typography variant="body1">
                  Generate targeted resumes based on specific job descriptions
                </Typography>
              </Box>
            </Stack>

            <ActionButton
              variant="contained"
              color="secondary"
              sx={{ mt: 4 }}
              endIcon={<ArrowForwardIcon />}
            >
              Create Your Profile
            </ActionButton>
          </Box>

          <ComingSoon>
            <Box sx={{ flex: 1 }}>
              <Typography variant="h4" component="h3" gutterBottom sx={{ color: 'primary.main' }}>
                For Employers
              </Typography>
              <Box sx={{ my: 3 }}>
                <Typography variant="body1" paragraph>
                  Discover candidates with the perfect skills and experience for your positions by
                  engaging in meaningful Q&A to learn more about their background.
                </Typography>
              </Box>

              <Stack spacing={3}>
                <Box display="flex" alignItems="center">
                  <Box
                    sx={{
                      backgroundColor: 'secondary.main',
                      color: 'secondary.contrastText',
                      borderRadius: '50%',
                      width: 40,
                      height: 40,
                      minWidth: 40,
                      minHeight: 40,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      mr: 2,
                      fontWeight: 'bold',
                    }}
                  >
                    1
                  </Box>
                  <Typography variant="body1">
                    Search the candidate pool based on skills, experience, and location
                  </Typography>
                </Box>

                <Box display="flex" alignItems="center">
                  <Box
                    sx={{
                      backgroundColor: 'secondary.main',
                      color: 'secondary.contrastText',
                      borderRadius: '50%',
                      width: 40,
                      height: 40,
                      minWidth: 40,
                      minHeight: 40,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      mr: 2,
                      fontWeight: 'bold',
                    }}
                  >
                    2
                  </Box>
                  <Typography variant="body1">
                    Ask personalized questions about candidates' experience and skills
                  </Typography>
                </Box>

                <Box display="flex" alignItems="center">
                  <Box
                    sx={{
                      backgroundColor: 'secondary.main',
                      color: 'secondary.contrastText',
                      borderRadius: '50%',
                      width: 40,
                      height: 40,
                      minWidth: 40,
                      minHeight: 40,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      mr: 2,
                      fontWeight: 'bold',
                    }}
                  >
                    3
                  </Box>
                  <Typography variant="body1">
                    Generate targeted resumes that match your job requirements
                  </Typography>
                </Box>
              </Stack>

              <ActionButton
                variant="contained"
                color="secondary"
                sx={{ mt: 4 }}
                endIcon={<ArrowForwardIcon />}
              >
                Start Recruiting
              </ActionButton>
            </Box>
          </ComingSoon>
        </Box>
      </Container>

      {/* Features Section */}
      <Box sx={{ backgroundColor: 'background.paper', py: 8 }}>
        <Container>
          <Typography
            variant="h3"
            component="h2"
            align="center"
            gutterBottom
            sx={{ mb: 6, fontWeight: 600 }}
          >
            Key Features
          </Typography>

          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
            <Box
              sx={{
                flex: '1 1 250px',
                minWidth: {
                  xs: '100%',
                  sm: 'calc(50% - 16px)',
                  md: 'calc(25% - 16px)',
                },
              }}
            >
              <FeatureCard
                icon={
                  <FeatureIcon>
                    <PersonSearchIcon fontSize="large" />
                  </FeatureIcon>
                }
                title="AI-Powered Search"
                description="Find the perfect candidates based on skills, experience, and fit for your specific requirements."
              />
            </Box>
            <Box
              sx={{
                flex: '1 1 250px',
                minWidth: {
                  xs: '100%',
                  sm: 'calc(50% - 16px)',
                  md: 'calc(25% - 16px)',
                },
              }}
            >
              <FeatureCard
                icon={
                  <FeatureIcon>
                    <WorkHistoryIcon fontSize="large" />
                  </FeatureIcon>
                }
                title="Complete Backstory"
                description="Share your full professional journey beyond the limitations of a traditional resume."
              />
            </Box>
            <Box
              sx={{
                flex: '1 1 250px',
                minWidth: {
                  xs: '100%',
                  sm: 'calc(50% - 16px)',
                  md: 'calc(25% - 16px)',
                },
              }}
            >
              <FeatureCard
                icon={
                  <FeatureIcon>
                    <QuestionAnswerIcon fontSize="large" />
                  </FeatureIcon>
                }
                title="Interactive Q&A"
                description="Ask detailed questions about a candidate's experience and get immediate answers."
              />
            </Box>
            <Box
              sx={{
                flex: '1 1 250px',
                minWidth: {
                  xs: '100%',
                  sm: 'calc(50% - 16px)',
                  md: 'calc(25% - 16px)',
                },
              }}
            >
              <FeatureCard
                icon={
                  <FeatureIcon>
                    <DescriptionIcon fontSize="large" />
                  </FeatureIcon>
                }
                title="Custom Resumes"
                description="Generate tailored resumes optimized for specific job descriptions with one click."
              />
            </Box>
          </Box>
        </Container>
      </Box>

      {/* Testimonials Section */}
      {testimonials && (
        <Container sx={{ py: 8 }}>
          <Typography
            variant="h3"
            component="h2"
            align="center"
            gutterBottom
            sx={{ mb: 2, fontWeight: 600 }}
          >
            Success Stories
          </Typography>
          <Typography variant="body1" align="center" sx={{ mb: 6, maxWidth: 800, mx: 'auto' }}>
            See how Backstory has transformed the hiring process for both candidates and employers.
          </Typography>

          <Testimonials />
        </Container>
      )}

      {/* CTA Section */}
      <Box
        sx={{
          backgroundColor: 'primary.main',
          color: 'primary.contrastText',
          py: 8,
        }}
      >
        <Container>
          <Box
            sx={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center',
              maxWidth: 800,
              mx: 'auto',
            }}
          >
            <Typography variant="h3" component="h2" gutterBottom sx={{ color: 'white' }}>
              Ready to transform your hiring process?
            </Typography>
            <Typography variant="h6" sx={{ mb: 4 }}>
              Join Backstory today and discover a better way to connect talent with opportunity.
            </Typography>
            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} justifyContent="center">
              <HeroButton variant="contained" size="large">
                Sign Up as Candidate
              </HeroButton>
              <HeroButton
                variant="outlined"
                size="large"
                sx={{
                  backgroundColor: 'transparent',
                  border: '2px solid',
                  borderColor: 'action.active',
                }}
              >
                Sign Up as Employer
              </HeroButton>
            </Stack>
          </Box>
        </Container>
      </Box>
    </Box>
  );
};

export { HomePage };
