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

/** Shown when Telebirr reported the payment as failed or cancelled. */
export function PaymentFailurePage() {
  const [params] = useSearchParams();
  const navigate = useNavigate();
  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="red" variant="light">
            <IconAlertTriangle size={30} />
          </ThemeIcon>
          <Title order={3}>Payment not completed</Title>
          <Text size="sm" c="dimmed" ta="center">
            {data?.failureReason
              ? data.failureReason
              : 'The payment was not completed. Nothing has been charged.'}
          </Text>
          <Text size="xs" c="dimmed" ta="center">
            Your application is unchanged and you can try again at any time.
          </Text>
          <Group mt="md">
            <Button variant="default" onClick={() => navigate('/licensing/applications')}>
              My applications
            </Button>
          </Group>
        </Stack>
      </Card>
    </Container>
  );
}

export default PaymentFailurePage;
