'use client'

import { Stack, Title, Container, Paper, Button, Text, List } from "@pikku/mantine/core"
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { pikku } from '@/pikku/http'
import { ApplicantStatuses } from '@heygermany/sdk'
import { asI18n } from '@pikku/react'

export const Invalid: React.FunctionComponent<{ name: string, candidateId: string }> = ({ name, candidateId }) => {
    const queryClient = useQueryClient()

    const resetApplicationMutation = useMutation({
        mutationFn: async () => {
            await pikku().patch('/candidate/:candidateId', {
                candidateId,
                status: ApplicantStatuses.INITIAL,
                submittedAt: null
            })
        },
        onSuccess: async () => {
            await queryClient.invalidateQueries({ queryKey: ['candidate'] })
        }
    })

    return (
        <Container p={0} size='md' mt={{ base: '2rem', md: '3rem' }}>
            <Paper p={{ base: '1.5rem', md: '2rem', lg: '2.5rem' }} withBorder radius='lg' bg='gray.0'>
                <Stack gap='lg'>
                    <Title order={2} c='gray.7' lh={1.2}>
                        {asI18n(`Hi ${name},`)}
                    </Title>

                    <Stack gap='xs'>
                        <Text size='lg' c='gray.7' lh={1.35}>
                            {asI18n('Thanks for uploading your documents!')}
                        </Text>
                        <Text size='lg' c='gray.7' lh={1.35}>
                            {asI18n('We&apos;ve reviewed your files, but unfortunately, one or more of them couldn&apos;t be processed for your personal evaluation.')}
                        </Text>
                    </Stack>

                    <Stack gap='xs'>
                        <Text size='lg' fw={600} c='gray.7' lh={1.3}>
                            {asI18n('This can happen if:')}
                        </Text>
                        <List spacing={2} size='lg' c='gray.7' withPadding style={{ lineHeight: 1.3 }}>
                            <List.Item>{asI18n('The document is incomplete or blurry')}</List.Item>
                            <List.Item>{asI18n('The content is unclear or unreadable')}</List.Item>
                            <List.Item>{asI18n('The file you uploaded is not related to the document we requested')}</List.Item>
                        </List>
                    </Stack>

                    <Text size='lg' c='gray.7' lh={1.35}>
                        {asI18n('Please upload a clear and complete version of the missing or invalid document(s) so we can continue your evaluation.')}
                    </Text>

                    <Button
                        onClick={() => resetApplicationMutation.mutate()}
                        loading={resetApplicationMutation.isPending}
                        disabled={resetApplicationMutation.isPending}
                        size="md"
                        mt='xs'
                        maw={280}
                        mx='auto'
                        variant='filled'
                        color='yellow.5'
                        c='black'
                    >
                        {asI18n('Upload documents again')}
                    </Button>
                </Stack>
            </Paper>
        </Container>
    )
}