import {
  AddHome,
  Android,
  Apple,
  AutoAwesome,
  Cloud,
  GitHub,
  InstallMobile,
  Storage,
} from '@mui/icons-material'
import { Box, Button, Card, Container, Grid, Typography } from '@mui/joy'
import { useNavigate } from 'react-router-dom'

function StartOptionCard({ icon: Icon, title, description, button, index }) {
  return (
    <Card
      data-aos='fade-up'
      data-aos-delay={index * 100}
      data-aos-duration='800'
      variant='outlined'
      sx={{
        p: { xs: 3, sm: 4, md: 4 },
        height: '100%',
        borderRadius: { xs: 16, md: 20 },
        border: '1px solid',
        borderColor: 'divider',
        background: 'background.surface',
        transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
        position: 'relative',
        overflow: 'hidden',
        cursor: 'pointer',
        minHeight: { xs: 300, sm: 320 },
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '4px',
          background:
            'linear-gradient(90deg, var(--joy-palette-primary-400) 0%, var(--joy-palette-primary-600) 100%)',
          transform: 'scaleX(0)',
          transformOrigin: 'left',
          transition: 'transform 0.4s ease',
        },
        '&::after': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background:
            'linear-gradient(135deg, rgba(6, 182, 212, 0.02) 0%, rgba(8, 145, 178, 0.04) 100%)',
          opacity: 0,
          transition: 'opacity 0.4s ease',
          pointerEvents: 'none',
        },
        '@media (max-width: 600px)': {
          '&:active': {
            transform: 'scale(0.98)',
          },
        },
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'column',
          textAlign: 'center',
          mb: 3,
        }}
      >
        <Box
          className='option-icon'
          sx={{
            display: 'inline-flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: { xs: 60, sm: 80 },
            height: { xs: 60, sm: 80 },
            borderRadius: { xs: 16, sm: 20 },
            background:
              'linear-gradient(135deg, var(--joy-palette-primary-50) 0%, var(--joy-palette-primary-100) 100%)',
            color: 'primary.500',
            mb: 3,
            transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
            '& svg': {
              fontSize: { xs: 32, sm: 40 },
            },
          }}
        >
          {Icon}
        </Box>

        <Typography
          className='option-title'
          level='title-lg'
          sx={{
            fontSize: { xs: 20, sm: 24 },
            fontWeight: 700,
            color: 'text.primary',
            lineHeight: 1.3,
            transition: 'color 0.3s ease',
          }}
        >
          {title}
        </Typography>
      </Box>

      <Typography
        level='body-md'
        sx={{
          color: 'text.secondary',
          lineHeight: 1.6,
          fontSize: { xs: 14, sm: 15 },
          textAlign: 'center',
          mb: 3,
          flex: 1,
        }}
      >
        {description}
      </Typography>

      <Box sx={{ mt: 'auto' }}>{button}</Box>
    </Card>
  )
}

const GettingStarted = () => {
  const navigate = useNavigate()
  const information = [
    {
      title: 'Donetick Web',
      icon: <Cloud />,
      description:
        'The easiest way! Just create account and start using Donetick',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<AutoAwesome />}
          onClick={() => {
            navigate('/chores')
          }}
        >
          Start Now!
        </Button>
      ),
    },
    {
      title: 'Selfhosted',
      icon: <Storage />,
      description: 'Download the binary and manage your own Donetick instance',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<GitHub />}
          onClick={() => {
            window.open(
              'https://github.com/donetick/donetick/releases',
              '_blank',
            )
          }}
        >
          Github Releases
        </Button>
      ),
    },
    {
      title: 'Hassio Addon',
      icon: <AddHome />,
      description:
        'Have Home Assistant? Install Donetick as a Home Assistant Addon with single click',
      button: (
        <Button
          size='lg'
          fullWidth
          startDecorator={<InstallMobile />}
          onClick={() => {
            window.open(
              'https://my.home-assistant.io/redirect/supervisor_add_addon_repository/?repository_url=https%3A%2F%2Fgithub.com%2Fdonetick%2Fhassio-addons',
            )
          }}
        >
          Add Addon
        </Button>
      ),
    },
  ]

  return (
    <Container maxWidth='xl' sx={{ py: { xs: 6, sm: 8, md: 12 } }}>
      {/* Section Header */}
      <Box textAlign='center' mb={{ xs: 6, md: 8 }} data-aos='fade-up'>
        <Typography
          level='h2'
          sx={{
            fontSize: { xs: 28, sm: 36, md: 42, lg: 48 },
            fontWeight: 700,
            mb: { xs: 2, md: 3 },
            color: 'text.primary',
            lineHeight: { xs: 1.2, md: 1.1 },
            background:
              'linear-gradient(135deg, var(--joy-palette-primary-500) 0%, var(--joy-palette-primary-600) 100%)',
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            textAlign: 'center',
          }}
        >
          Get Started Today
        </Typography>
        <Typography
          level='body-lg'
          sx={{
            fontSize: { xs: 16, sm: 17, md: 18, lg: 19 },
            color: 'text.secondary',
            maxWidth: { xs: '100%', sm: 600, md: 700 },
            mx: 'auto',
            lineHeight: 1.6,
            px: { xs: 1, sm: 0 },
          }}
        >
          Ready to transform your household management? Start with our mobile
          app for the best experience, or choose from our other convenient
          options.
        </Typography>
      </Box>

      {/* Mobile App CTA Section - Primary */}
      <Box
        textAlign='center'
        mb={{ xs: 8, sm: 10, md: 12 }}
        data-aos='fade-up'
        data-aos-duration='800'
      >
        <Box
          sx={{
            p: { xs: 5, sm: 6, md: 7 },
            borderRadius: { xs: 20, md: 24 },
            background:
              'linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(8, 145, 178, 0.12) 100%)',
            border: '2px solid rgba(6, 182, 212, 0.2)',
            maxWidth: { xs: '100%', sm: 650, md: 700 },
            mx: 'auto',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 20px 40px rgba(0, 0, 0, 0.1)',
            '&::before': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,

              pointerEvents: 'none',
            },
          }}
        >
          <Typography
            level='body-lg'
            sx={{
              color: 'text.secondary',
              mb: { xs: 4, sm: 5 },
              lineHeight: 1.6,
              fontSize: { xs: 16, sm: 17 },
              position: 'relative',
              zIndex: 1,
              px: { xs: 0, sm: 2 },
              maxWidth: 500,
              mx: 'auto',
            }}
          >
            Get the full Donetick experience with notifications, realtime
            updates, and seamless task management on the go
          </Typography>

          <Box
            sx={{
              display: 'flex',
              flexDirection: { xs: 'column', sm: 'row' },
              gap: { xs: 3, sm: 4 },
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              zIndex: 1,
            }}
          >
            {/* App Store Badge */}
            <Box
              onClick={() => {
                window.open(
                  'https://apps.apple.com/app/apple-store/id6742807441?pt=127258663&ct=website&mt=8',
                  '_blank',
                )
              }}
              sx={{
                cursor: 'pointer',
                transition: 'all 0.3s ease',
              }}
            >
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  background: '#000000',
                  borderRadius: '12px',
                  padding: '12px 24px',
                  minWidth: { xs: 200, sm: 180 },
                  height: 60,
                  border: '1px solid #333',
                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                }}
              >
                <Apple sx={{ color: 'white', fontSize: 40, mr: 2 }} />
                <Box>
                  <Typography
                    level='body-xs'
                    sx={{
                      color: 'white',
                      fontSize: 11,
                      lineHeight: 1,
                      mb: 0.5,
                      fontWeight: 400,
                    }}
                  >
                    Download on the
                  </Typography>
                  <Typography
                    level='title-md'
                    sx={{
                      color: 'white',
                      fontSize: 18,
                      lineHeight: 1,
                      fontWeight: 600,
                    }}
                  >
                    App Store
                  </Typography>
                </Box>
              </Box>
            </Box>

            {/* Google Play Badge */}
            <Box
              onClick={() => {
                window.open(
                  'https://play.google.com/store/apps/details?id=com.donetick.app',
                  '_blank',
                )
              }}
              sx={{
                cursor: 'pointer',
                transition: 'all 0.3s ease',
              }}
            >
              <Box
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  background:
                    'linear-gradient(135deg, #000000 0%, #1a1a1a 100%)',
                  borderRadius: '12px',
                  padding: '12px 24px',
                  minWidth: { xs: 200, sm: 180 },
                  height: 60,
                  border: '1px solid #333',
                  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                }}
              >
                <Box
                  sx={{
                    mr: 2,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: 32,
                    height: 32,
                  }}
                >
                  <Android sx={{ color: 'white', fontSize: 40 }} />
                </Box>
                <Box>
                  <Typography
                    level='body-xs'
                    sx={{
                      color: 'white',
                      fontSize: 11,
                      lineHeight: 1,
                      mb: 0.5,
                      fontWeight: 400,
                    }}
                  >
                    Download for
                  </Typography>
                  <Typography
                    level='title-md'
                    sx={{
                      color: 'white',
                      fontSize: 18,
                      lineHeight: 1,
                      fontWeight: 600,
                    }}
                  >
                    Android
                  </Typography>
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
      </Box>

      {/* Alternative Options Section */}
      <Box textAlign='center' mb={{ xs: 4, md: 6 }} data-aos='fade-up'>
        <Typography
          level='h4'
          sx={{
            fontSize: { xs: 20, sm: 22, md: 24 },
            fontWeight: 600,
            mb: { xs: 1, md: 1.5 },
            color: 'text.primary',
          }}
        >
          Other Ways to Get Started
        </Typography>
        <Typography
          level='body-md'
          sx={{
            color: 'text.secondary',
            maxWidth: 500,
            mx: 'auto',
            fontSize: { xs: 14, sm: 15 },
          }}
        >
          Prefer a different setup? Choose from these alternatives
        </Typography>
      </Box>

      {/* Options Grid */}
      <Grid container spacing={{ xs: 3, sm: 4, md: 4 }}>
        {information.map((info, index) => (
          <Grid item xs={12} md={4} key={index}>
            <StartOptionCard
              icon={info.icon}
              title={info.title}
              description={info.description}
              button={info.button}
              index={index}
            />
          </Grid>
        ))}
      </Grid>
    </Container>
  )
}

export default GettingStarted