import {
  Alert,
  Badge,
  Button,
  Card,
  Group,
  Loader,
  SimpleGrid,
  Stack,
  Table,
  Text,
  Title,
} from '@mantine/core';
import {
  IconArrowRight,
  IconFileText,
  IconInfoCircle,
} from '@tabler/icons-react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  STATUS_COLORS,
  STATUS_LABELS,
  TERMINAL_STATUSES,
  extractErrorMessage,
  localized,
  useGetCertificateUrlMutation,
  useGetMyApplicationsQuery,
  useGetMyLicensesQuery,
} from '@ema-platform/api';
import { notify } from '@ema-platform/ui';
import { useDateDisplayer } from '@ema-platform/shared';

const WAIVER_TYPE_KEYS = ['PRE_WAIVER', 'POST_WAIVER'];

/**
 * Maritime waiver home (US-WAV-001/002/009).
 *
 * The two waiver kinds are seeded licence types, so the application itself is
 * the config-driven wizard and this page only has to be the door: which kind
 * applies, what is in flight, and the issued letters (US-WAV-007) with their
 * verifiable references (US-WAV-010).
 */
export function WaiverPage() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { data: applications, isLoading } = useGetMyApplicationsQuery();
  const { data: licenses } = useGetMyLicensesQuery();
  const [getCertificateUrl] = useGetCertificateUrlMutation();
  const showDate = useDateDisplayer();

  const waiverApplications = (applications?.items ?? []).filter((app) =>
    WAIVER_TYPE_KEYS.includes(app.licenseType?.key ?? ''),
  );
  const inFlight = waiverApplications.filter(
    (app) => !TERMINAL_STATUSES.includes(app.status),
  );
  const letters = (licenses?.items ?? []).filter((license) =>
    WAIVER_TYPE_KEYS.includes(license.licenseType?.key ?? ''),
  );

  async function download(licenseId: string) {
    try {
      const result = await getCertificateUrl(licenseId).unwrap();
      window.open(result.url, '_blank', 'noopener');
    } catch (error) {
      notify.error(extractErrorMessage(error, t('waiver.fetchFailed', 'Could not fetch the letter')));
    }
  }

  if (isLoading) {
    return (
      <Group justify="center" py="xl">
        <Loader />
      </Group>
    );
  }

  return (
    <Stack maw={900} mx="auto">
      <div>
        <Title order={2}>{t('waiver.title', 'Maritime Waiver')}</Title>
        <Text size="sm" c="dimmed">
          {t(
            'waiver.subtitle',
            'Apply for a waiver when Ethiopian Shipping & Logistics cannot carry your shipment. Approval issues the bank waiver letter.',
          )}
        </Text>
      </div>

      <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
        <Card withBorder radius="md" p="lg">
          <Text fw={600}>{t('waiver.preWaiver.title', 'Pre-waiver')}</Text>
          <Text size="sm" c="dimmed" mt={4} mb="md">
            {t(
              'waiver.preWaiver.body',
              'The cargo has not yet arrived. Applying before arrival avoids the post-waiver penalty.',
            )}
          </Text>
          <Button
            rightSection={<IconArrowRight size={16} />}
            onClick={() => navigate('/licensing/PRE_WAIVER/apply')}
          >
            {t('waiver.preWaiver.apply', 'Apply for a pre-waiver')}
          </Button>
        </Card>

        <Card withBorder radius="md" p="lg">
          <Text fw={600}>{t('waiver.postWaiver.title', 'Post-waiver')}</Text>
          <Text size="sm" c="dimmed" mt={4} mb="md">
            {t(
              'waiver.postWaiver.body',
              'The cargo has already arrived. Granted once per shipment, and only against a settled penalty with the receipt attached.',
            )}
          </Text>
          <Button
            variant="light"
            rightSection={<IconArrowRight size={16} />}
            onClick={() => navigate('/licensing/POST_WAIVER/apply')}
          >
            {t('waiver.postWaiver.apply', 'Apply for a post-waiver')}
          </Button>
        </Card>
      </SimpleGrid>

      <Alert color="blue" icon={<IconInfoCircle size={16} />}>
        {t(
          'waiver.oneShipmentNotice',
          'Each waiver covers one shipment, identified by its bill of lading. A second application quoting the same bill of lading is refused while the first is live.',
        )}
      </Alert>

      {inFlight.length > 0 && (
        <Stack gap="xs">
          <Title order={4}>{t('waiver.inProgress', 'Applications in progress')}</Title>
          {inFlight.map((app) => (
            <Card key={app.id} withBorder radius="md" p="md">
              <Group justify="space-between">
                <div>
                  <Text fw={600}>{app.applicationNumber}</Text>
                  <Text size="xs" c="dimmed">
                    {localized(app.licenseType?.name)}
                  </Text>
                </div>
                <Group>
                  <Badge color={STATUS_COLORS[app.status]}>
                    {t(`applications.status.${app.status}`, STATUS_LABELS[app.status])}
                  </Badge>
                  <Button
                    size="compact-sm"
                    variant="light"
                    onClick={() =>
                      navigate(
                        `/licensing/${app.licenseType?.key}/applications/${app.id}`,
                      )
                    }
                  >
                    {app.status === 'DRAFT' || app.status === 'RESUBMIT_REQUIRED'
                      ? t('applications.actions.continue', 'Continue')
                      : t('applications.actions.view', 'View')}
                  </Button>
                </Group>
              </Group>
            </Card>
          ))}
        </Stack>
      )}

      <Stack gap="xs">
        <Title order={4}>{t('waiver.issuedLetters', 'Issued waiver letters')}</Title>
        {letters.length === 0 ? (
          <Card withBorder radius="md" p="lg">
            <Text size="sm" c="dimmed" ta="center">
              {t('waiver.emptyLetters', 'No waiver letters issued yet.')}
            </Text>
          </Card>
        ) : (
          <Table.ScrollContainer minWidth={640}>
            <Table striped>
              <Table.Thead>
                <Table.Tr>
                  <Table.Th>{t('waiver.columns.reference', 'Reference')}</Table.Th>
                  <Table.Th>{t('waiver.columns.kind', 'Kind')}</Table.Th>
                  <Table.Th>{t('waiver.columns.issued', 'Issued')}</Table.Th>
                  <Table.Th>{t('waiver.columns.status', 'Status')}</Table.Th>
                  <Table.Th />
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {letters.map((license) => (
                  <Table.Tr key={license.id}>
                    <Table.Td>
                      <Text ff="monospace" size="sm" fw={600}>
                        {license.certificateNumber}
                      </Text>
                    </Table.Td>
                    <Table.Td>{localized(license.licenseType?.name) || '—'}</Table.Td>
                    <Table.Td>{showDate(license.issueDate)}</Table.Td>
                    <Table.Td>
                      <Badge
                        size="sm"
                        variant="light"
                        color={license.status === 'ACTIVE' ? 'green' : 'red'}
                      >
                        {t(`waiver.licenseStatus.${license.status}`, license.status)}
                      </Badge>
                    </Table.Td>
                    <Table.Td>
                      <Button
                        size="compact-xs"
                        variant="light"
                        leftSection={<IconFileText size={13} />}
                        onClick={() => download(license.id)}
                      >
                        {t('waiver.letter', 'Letter')}
                      </Button>
                    </Table.Td>
                  </Table.Tr>
                ))}
              </Table.Tbody>
            </Table>
          </Table.ScrollContainer>
        )}
      </Stack>
    </Stack>
  );
}

export default WaiverPage;
