import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import CardContent from '@mui/material/CardContent';
import Chip from '@mui/material/Chip';
import { styled, useTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import Image from 'next/image';
import Link from 'next/link';

import DateDisplay from '../components/DateDisplay';
import Container from '../components/layout/Container';
import Page from '../components/layout/Page';
import config from '../lib/config';
import { getDocsMenuStaticProps } from '../lib/docs';
import homepageData from '../lib/homepage';
import releases from '../lib/releases';

import type { DocsMenuProps } from '../lib/docs';

const StyledHomagePageContent = styled('div')(
  ({ theme }) => `
    width: 100%;
    padding-top: 72px;
    display: flex;
    flex-direction: column;
    gap: 88px;
    align-items: center;

    ${theme.breakpoints.down('md')} {
      padding-top: 32px;
      gap: 0;
    }
  `,
);

const StyledIntroSection = styled('section')`
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const StyledIntroSectionContent = styled('div')`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
`;

const StyledOverviewSection = styled('section')(
  ({ theme }) => `
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    ${theme.breakpoints.down('md')} {
      margin-top: 64px;
    }
  `,
);

const StyledOverviewSectionContent = styled('div')(
  ({ theme }) => `
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;

    ${theme.breakpoints.down('md')} {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  `,
);

const StyledOverviewList = styled('div')`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const StyledOverview = styled('div')`
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const StyledImageWrapper = styled('div')`
  width: 100%;
  position: relative;
`;

const StyledCallToActionSection = styled('section')(
  ({ theme }) => `
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 0;
    overflow: visible;
    z-index: 1;

    ${theme.breakpoints.down('md')} {
      height: auto;
      margin-top: 64px;
    }
  `,
);

const StyledCallToActionContainer = styled('div')(
  ({ theme }) => `
    max-width: 1280px;
    width: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

    ${theme.breakpoints.down('md')} {
      padding: 0;
    }
  `,
);

const StyledCallToActionCard = styled(Card)(
  ({ theme }) => `
    width: 80%;

    ${theme.breakpoints.down('md')} {
      width: 100%;
    }
  `,
);

const StyledCallToActionCardContent = styled(CardContent)(
  ({ theme }) => `
    display: flex;
    align-items: flex-start;
    padding: 24px 40px;
    line-height: 30px;
    gap: 24px;

    ${theme.breakpoints.down('md')} {
      flex-direction: column;
    }
  `,
);

const StyledCallToActionText = styled('div')`
  flex-grow: 1;
`;

const StyledReleasesSection = styled('section')(
  ({ theme }) => `
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: ${theme.palette.mode === 'light' ? '#dddee2' : '#242424'};
    padding: 64px 0;

    ${theme.breakpoints.down('md')} {
      padding: 48px 0;
    }
  `,
);

const StyledReleasesSectionContent = styled('div')(
  ({ theme }) => `
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;

    ${theme.breakpoints.down('md')} {
      grid-template-columns: 1fr;
    }
  `,
);

const StyledReleaseCardContent = styled(CardContent)`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const StyledFeaturesSection = styled('section')(
  ({ theme }) => `
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 80px;

    ${theme.breakpoints.down('md')} {
      height: auto;
      margin-top: 48px;
    }
  `,
);

const StyledFeaturesSectionIntro = styled('div')(
  ({ theme }) => `
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0 104px;

    ${theme.breakpoints.down('md')} {
      padding: 32px 0 48px;
    }
  `,
);

const StyledFeaturesSectionContent = styled('div')(
  ({ theme }) => `
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;

    ${theme.breakpoints.down('md')} {
      grid-template-columns: 1fr;
    }
  `,
);

const StyledFeature = styled('div')`
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

const StyledFeatureText = styled('div')`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
`;

const Home = ({ docsGroups, searchablePages }: DocsMenuProps) => {
  const theme = useTheme();

  return (
    <Page url="/" docsGroups={docsGroups} searchablePages={searchablePages} fullWidth>
      <StyledHomagePageContent>
        <StyledIntroSection>
          <Container>
            <StyledIntroSectionContent>
              <Typography variant="h1" color="primary">
                {homepageData.title}
              </Typography>
              <Typography variant="h2" color="text.primary">
                {homepageData.subtitle}
              </Typography>
              <Button
                component={Link}
                href={homepageData.get_started.url}
                variant="contained"
                size="large"
              >
                {homepageData.get_started.title}
              </Button>
            </StyledIntroSectionContent>
          </Container>
        </StyledIntroSection>
        <StyledOverviewSection>
          <Container>
            <StyledOverviewSectionContent>
              <StyledOverviewList>
                {homepageData.overviews.map(overview => (
                  <StyledOverview key={overview.title}>
                    <Typography variant="h3" color="text.primary">
                      {overview.title}
                    </Typography>
                    <Typography variant="body1" color="text.secondary">
                      {overview.description}
                    </Typography>
                  </StyledOverview>
                ))}
              </StyledOverviewList>
              <StyledImageWrapper>
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src="/img/screenshot-editor.webp" />
              </StyledImageWrapper>
            </StyledOverviewSectionContent>
          </Container>
        </StyledOverviewSection>
        <StyledCallToActionSection>
          <StyledCallToActionContainer>
            <StyledCallToActionCard raised>
              <StyledCallToActionCardContent>
                <StyledCallToActionText>
                  <Typography variant="subtitle1" color="text.primary" component="strong">
                    {homepageData.call_to_action.title}
                  </Typography>
                  &nbsp;
                  <Typography variant="body1" color="text.secondary" component="span">
                    {homepageData.call_to_action.subtitle}
                  </Typography>
                </StyledCallToActionText>
                <Button
                  component={Link}
                  href={homepageData.call_to_action.url}
                  variant="contained"
                  size="large"
                  sx={{ width: '188px', whiteSpace: 'nowrap' }}
                >
                  {homepageData.call_to_action.button_text}
                </Button>
              </StyledCallToActionCardContent>
            </StyledCallToActionCard>
          </StyledCallToActionContainer>
        </StyledCallToActionSection>
        <StyledReleasesSection>
          <Container>
            <StyledReleasesSectionContent>
              {[...Array(3)].map((_, index) => {
                if (index >= releases.length) {
                  return null;
                }

                const release = releases[index];
                return (
                  <CardActionArea
                    key={release.version}
                    href={`${config.repo_url}/releases/tag/${release.version}`}
                  >
                    <StyledReleaseCardContent>
                      <Typography
                        variant="subtitle1"
                        color="text.primary"
                        sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                      >
                        <>
                          <Chip label={release.version} color="primary" />
                          <DateDisplay date={release.date} format="MMMM dd, yyyy" />
                        </>
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {release.description}
                      </Typography>
                    </StyledReleaseCardContent>
                  </CardActionArea>
                );
              })}
            </StyledReleasesSectionContent>
          </Container>
        </StyledReleasesSection>
        <StyledFeaturesSection>
          <Container>
            <StyledFeaturesSectionIntro>
              <Typography
                variant="h2"
                color="text.primary"
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px',
                  [theme.breakpoints.down('md')]: {
                    textAlign: 'center',
                  },
                }}
              >
                {homepageData.features_intro.title}
              </Typography>
              <Typography
                variant="subtitle1"
                component="div"
                color="text.secondary"
                sx={{
                  textAlign: 'center',
                  [theme.breakpoints.down('md')]: {
                    textAlign: 'center',
                    marginTop: '24px',
                  },
                }}
              >
                {homepageData.features_intro.subtitle1} {homepageData.features_intro.subtitle2}
              </Typography>
            </StyledFeaturesSectionIntro>
            <StyledFeaturesSectionContent>
              {homepageData.features.map(feature => (
                <StyledFeature key={feature.title}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={feature.image} width="100%" height="auto" />
                  <StyledFeatureText>
                    <Typography
                      variant="subtitle1"
                      color="text.primary"
                      sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                    >
                      {feature.title}
                    </Typography>
                    <Typography variant="body2" color="text.secondary">
                      {feature.description}
                    </Typography>
                  </StyledFeatureText>
                </StyledFeature>
              ))}
            </StyledFeaturesSectionContent>
          </Container>
        </StyledFeaturesSection>
        <footer>
          {theme.palette.mode === 'light' ? (
            <a
              key="netlify-logo-light"
              href="https://www.netlify.com"
              target="_blank"
              rel="noreferrer"
            >
              <Image
                width={114}
                height={51}
                src="/img/netlify-color-bg.svg"
                alt="Deploys by Netlify"
              />
            </a>
          ) : (
            <a
              key="netlify-logo-dark"
              href="https://www.netlify.com"
              target="_blank"
              rel="noreferrer"
            >
              <Image
                width={114}
                height={51}
                src="/img/netlify-color-accent.svg"
                alt="Deploys by Netlify"
              />
            </a>
          )}
        </footer>
      </StyledHomagePageContent>
    </Page>
  );
};

export default Home;

export const getStaticProps = getDocsMenuStaticProps;