'use client'

import { Container, Stack, Title, Text, Button } from '@pikku/mantine/core'
import { useI18n } from "@/context/i18n-provider"
import { useMemo } from 'react'
import { useSearchParams, useRouter, useParams } from '@/framework/navigation'

const VerifyEmailPage: React.FunctionComponent = () => {
  const t = useI18n()
  const searchParams = useSearchParams()
  const router = useRouter()
  const { lang } = useParams<{ lang: string }>()
  const status = useMemo<'success' | 'error'>(() => {
    const error = searchParams.get('error')
    const verified = searchParams.get('verified')

    if (error || verified !== '1') {
      return 'error'
    }

    return 'success'
  }, [searchParams])

  return (
    <Container size="sm" py="xl" my='auto'>
      <Stack gap="xl" align="center">
        {status === 'success' && (
          <>
            <Stack gap="md" align="center">
              <Title order={1} ta="center">
                {t('verifyemail.success.title')}
              </Title>
              <Text c="dimmed" ta="center">
                {t('verifyemail.success.message')}
              </Text>
              <Button
                size="lg"
                mt="md"
                onClick={() => router.push(`/${lang}`)}
              >
                {t('verifyemail.success.button')}
              </Button>
            </Stack>
          </>
        )}

        {status === 'error' && (
          <>
            <Stack gap="md" align="center">
              <Title order={1} ta="center">
                {t('verifyemail.error.title')}
              </Title>
              <Text c="dimmed" ta="center">
                {t('verifyemail.error.message')}
              </Text>
              <Button
                size="lg"
                mt="md"
                onClick={() => router.push(`/${lang}`)}
              >
                {t('verifyemail.error.button')}
              </Button>
            </Stack>
          </>
        )}
      </Stack>
    </Container>
  )
}

export default VerifyEmailPage