import { useState } from 'react'
import {
  Box,
  Container,
  Grid,
  Stack,
  Text,
  Group,
  Button,
  rem,
  Drawer,
  Alert,
} from '@pikku/mantine/core'
import { IconInfoCircle } from '@tabler/icons-react'
import { useI18n } from '@/context/i18n-provider'
import { asI18n } from '@pikku/react'
import GetHelp from './GetHelp'
import ApplicantProfile from './ApplicantProfile'
import ConnectWithEmployers from './ConnectWithEmployers'

interface CTASectionProps {
  joinTalentPool: boolean
  publicMode?: boolean
}

export const CTASection: React.FunctionComponent<CTASectionProps> = ({
  joinTalentPool,
  publicMode = false,
}) => {
  const t = useI18n()
  const [drawerOpened, setDrawerOpened] = useState(false)
  const [drawerTitle, setDrawerTitle] = useState('')
  const [drawerContent, setDrawerContent] = useState<'getHelp' | 'connect'>('connect')

  const openDrawer = (contentType: 'getHelp' | 'connect', title: string) => {
    setDrawerTitle(title)
    setDrawerContent(contentType)
    setDrawerOpened(true)
  }

  const renderDrawerContent = () => {
    switch (drawerContent) {
      case 'getHelp':
        return <GetHelp />
      case 'connect':
        if (publicMode) {
          return <ConnectWithEmployers />
        }
        return (
          <Stack gap="md">
            {!joinTalentPool && (
              <Alert variant="light" color="blue" icon={<IconInfoCircle />}>
                <Text size="sm" fw={500}>
                  {t('jobs.improveyourprofile.optin.title')}
                </Text>
                <Text size="sm" mt="xs">
                  {t('jobs.improveyourprofile.optin.description')}
                </Text>
              </Alert>
            )}
            <ApplicantProfile />
          </Stack>
        )
      default:
        return null
    }
  }

  return (
    <>
      <Box bg="white" py="xl">
        <Container size="xl" p={0}>
          <Grid gutter={0}>
            <Grid.Col span={{ base: 12, lg: 6 }}>
              <Stack gap="xl" p="xl" me={rem(40)}>
                <Stack gap="xs">
                  <Text size="xxxl" fw={700} lh={1.2}>
                    {t('jobs.ctasection.ready.prefix')}
                  </Text>
                  <Text size="xxxl" fw={700} c="primary" lh={1.2}>
                    {t('jobs.ctasection.ready.suffix')}
                  </Text>
                </Stack>

                <Text size="xl" maw={rem(500)}>
                  {t('jobs.ctasection.description')}
                </Text>

                <Group>
                  <Button
                    size="md"
                    color="primary"
                    onClick={() => openDrawer('connect', t('jobs.ctasection.buttons.connect'))}
                  >
                    {t('jobs.ctasection.buttons.connect')}
                  </Button>
                  <Button
                    size="md"
                    variant="outline"
                    color="gray"
                    onClick={() => openDrawer('getHelp', t('jobs.ctasection.buttons.contact'))}
                  >
                    {t('jobs.ctasection.buttons.contact')}
                  </Button>
                </Group>
              </Stack>
            </Grid.Col>

            <Grid.Col span={{ base: 12, lg: 6 }}>
              <Box pos="relative" h={{ base: '300px', lg: '100%' }}>
                <img
                  src="https://media.istockphoto.com/id/998313080/photo/smiling-medical-team-standing-together-outside-a-hospital.jpg?s=612x612&w=0&k=20&c=fXzbjAoStQ_8jTM4TQxbHBEjhETI3vq5_7d_JL19eCA="
                  alt="Smiling medical team standing together outside a hospital"
                  style={{
                    height: '100%',
                    width: '100%',
                    objectFit: 'cover',
                    objectPosition: 'center',
                    clipPath: 'polygon(12% 0, 100% 0%, 100% 100%, 0 100%)',
                  }}
                />
              </Box>
            </Grid.Col>
          </Grid>
        </Container>
      </Box>

      <Drawer
        opened={drawerOpened}
        onClose={() => setDrawerOpened(false)}
        title={asI18n(drawerTitle)}
        size="lg"
        position="right"
      >
        {renderDrawerContent()}
      </Drawer>
    </>
  )
}