import { useNavigate, useSearchParams } from 'react-router-dom';
import {
  Button,
  Card,
  Container,
  Divider,
  Group,
  Stack,
  Text,
  ThemeIcon,
  Title,
} from '@mantine/core';
import { IconCircleCheck } from '@tabler/icons-react';
import { useGetApplicationPaymentQuery } from '@ema-platform/api';
import { useDateDisplayer } from '@ema-platform/shared';

/** Confirmation that the licence fee has been received. */
export function PaymentSuccessPage() {
  const [params] = useSearchParams();
  const navigate = useNavigate();
  const showDate = useDateDisplayer();
  const applicationId = params.get('applicationId') ?? '';
  const { data } = useGetApplicationPaymentQuery(applicationId, {
    skip: !applicationId,
  });

  return (
    <Container size="sm" py="xl">
      <Card withBorder padding="xl" radius="md">
        <Stack align="center" gap="sm">
          <ThemeIcon size={56} radius="xl" color="teal" variant="light">
            <IconCircleCheck size={30} />
          </ThemeIcon>
          <Title order={3}>Payment received</Title>
          <Text size="sm" c="dimmed" ta="center">
            Thank you. Your licence fee has been paid and your application is
            being finalised. You will be notified when your certificate is ready.
          </Text>

          {data && (
            <>
              <Divider my="xs" w="100%" />
              <Stack gap={4} w="100%">
                <Group justify="space-between">
                  <Text size="sm" c="dimmed">Amount</Text>
                  <Text size="sm" fw={600}>
                    {Number(data.amount).toLocaleString()} {data.currency}
                  </Text>
                </Group>
                <Group justify="space-between">
                  <Text size="sm" c="dimmed">Method</Text>
                  <Text size="sm">{data.provider}</Text>
                </Group>
                {data.providerRef && (
                  <Group justify="space-between">
                    <Text size="sm" c="dimmed">Reference</Text>
                    <Text size="sm" ff="monospace">{data.providerRef}</Text>
                  </Group>
                )}
                {data.paidAt && (
                  <Group justify="space-between">
                    <Text size="sm" c="dimmed">Paid</Text>
                    <Text size="sm">{showDate(data.paidAt)}</Text>
                  </Group>
                )}
              </Stack>
            </>
          )}

          <Button mt="md" onClick={() => navigate('/licensing/applications')}>
            Back to my applications
          </Button>
        </Stack>
      </Card>
    </Container>
  );
}

export default PaymentSuccessPage;
