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 './Conversation.png';
import { ComingSoon } from 'components/ui/ComingSoon';

// 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;

  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
};