import { useNavigate } from 'react-router-dom';
import { Anchor, Grid, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import {
  IconAlertTriangle,
  IconCreditCard,
  IconFileText,
  IconInbox,
  IconUserCheck,
} from '@tabler/icons-react';
import {
  useGetAssignedToMeQuery,
  useGetQueueQuery,
  useListSeafarerDocumentsQuery,
  useListSeafarerRegistrationsQuery,
  type LicenseApplication,
} from '@ema-platform/api';
import {
  AdvancedTable,
  PageHeader,
  PageLoader,
  StatTile,
  WaitingFor,
  useServerTable,
} from '@ema-platform/ui';
import { dashboardQueueColumns } from './columns';

/**
 * Backoffice home.
 *
 * Every figure here is counted from a queue the officer can open, and each
 * tile navigates to the list it counted — a dashboard that cannot be drilled
 * into is a poster. Nothing is charted: the platform exposes queues, not time
 * series, and an earlier version of this page invented both a registration
 * trend and a staff-role breakdown rather than admit that.
 *
 * The seafarer counts are fetched with `take: 1`, for `total` alone. Both
 * queues are permission-gated and an officer without them simply gets no
 * count — never a broken page — so the tiles read `—` rather than `0`, which
 * would be a lie.
 */
export function DashboardPage() {
  const navigate = useNavigate();
  const queue = useGetQueueQuery();
  const mine = useGetAssignedToMeQuery();
  const table = useServerTable();

  const registrations = useListSeafarerRegistrationsQuery({ status: 'SUBMITTED', take: 1 });
  const seamanBooks = useListSeafarerDocumentsQuery({
    kind: 'SEAMAN_BOOK',
    status: 'PAYMENT_PENDING',
    take: 1,
  });

  if (queue.isLoading || mine.isLoading) {
    return <PageLoader label="Loading Backoffice Dashboard…" height={400} />;
  }

  const unclaimed = queue.data?.items ?? [];
  const inProgress = mine.data?.items ?? [];
  const all = [...unclaimed, ...inProgress];

  const needsApplicant = all.filter((a) => a.status === 'RESUBMIT_REQUIRED').length;
  const awaitingPayment = all.filter((a) => a.status === 'PAYMENT_PENDING').length;

  /** Oldest first: a queue is worked by age, so the dashboard previews it that way. */
  const byAge = [...unclaimed].sort((a, b) =>
    (a.submittedAt ?? a.createdAt).localeCompare(b.submittedAt ?? b.createdAt),
  );
  const paged = table.paginate(byAge.slice(0, 8));

  /** `undefined` while loading or forbidden — rendered as "—", never as 0. */
  const countOf = (q: { data?: { total: number }; isError: boolean }) =>
    q.isError ? undefined : q.data?.total;

  const show = (n: number | undefined) => (n === undefined ? '—' : n);

  return (
    <Stack gap="lg">
      <PageHeader
        title="Dashboard"
        subtitle="Work waiting across the Authority's review queues."
        noMargin
      />

      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
        <StatTile
          label="Awaiting claim"
          value={unclaimed.length}
          hint="Licence applications nobody has picked up"
          icon={IconInbox}
          tone="info"
          onClick={() => navigate('/licence-review')}
        />
        <StatTile
          label="Assigned to me"
          value={inProgress.length}
          hint="Your open licence reviews"
          icon={IconFileText}
          tone="neutral"
          onClick={() => navigate('/licence-review')}
        />
        <StatTile
          label="Needs applicant action"
          value={needsApplicant}
          hint="Returned for corrections"
          icon={IconAlertTriangle}
          tone="pending"
        />
        <StatTile
          label="Awaiting payment"
          value={awaitingPayment}
          hint="Approved, fee not yet settled"
          icon={IconCreditCard}
          tone="warning"
        />
      </SimpleGrid>

      {/* Same 4-column track as the row above, so a two-tile row lines up with
          it instead of stretching each tile to half the page. */}
      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
        <StatTile
          label="Seafarer registrations"
          value={show(countOf(registrations))}
          hint="Submitted, awaiting review"
          icon={IconUserCheck}
          tone="info"
          onClick={() => navigate('/seafarer-registrations')}
        />
        <StatTile
          label="Seaman books"
          value={show(countOf(seamanBooks))}
          hint="Released, awaiting payment"
          icon={IconCreditCard}
          tone="pending"
          onClick={() => navigate('/seaman-book-queue')}
        />
      </SimpleGrid>

      <Grid gutter="lg">
        <Grid.Col span={{ base: 12, lg: 8 }}>
          <AdvancedTable<LicenseApplication>
            title="Awaiting claim — oldest first"
            tableName="Awaiting claim"
            columns={dashboardQueueColumns}
            data={paged.rows}
            itemCount={paged.itemCount}
            pageIndex={paged.pageIndex}
            onPageChange={table.setPageIndex}
            pageSize={table.pageSize}
            onRowClick={(row) => navigate(`/licence-review/${row.id}`)}
            refresh={queue.refetch}
            isLoading={queue.isFetching}
            emptyText="Nothing waiting to be claimed."
            toolbar={
              <Anchor size="sm" onClick={() => navigate('/licence-review')}>
                Open queue
              </Anchor>
            }
          />
        </Grid.Col>

        <Grid.Col span={{ base: 12, lg: 4 }}>
          <Paper withBorder radius="lg" p="lg" h="100%">
            <Text fw={600} size="sm" mb="xs">
              Longest waiting
            </Text>
            <Text size="xs" c="dimmed" mb="md">
              Unclaimed applications, by how long they have sat.
            </Text>
            <Stack gap="sm">
              {byAge.slice(0, 5).map((app) => (
                <Group key={app.id} justify="space-between" wrap="nowrap" gap="sm">
                  <Anchor
                    size="sm"
                    lineClamp={1}
                    onClick={() => navigate(`/licence-review/${app.id}`)}
                  >
                    {app.applicationNumber}
                  </Anchor>
                  <WaitingFor
                    since={app.submittedAt ?? app.createdAt}
                    slaDays={
                      app.licenseType?.slaHours ? app.licenseType.slaHours / 24 : undefined
                    }
                  />
                </Group>
              ))}
              {byAge.length === 0 && (
                <Text size="sm" c="dimmed">
                  Nothing waiting.
                </Text>
              )}
            </Stack>
          </Paper>
        </Grid.Col>
      </Grid>
    </Stack>
  );
}

export default DashboardPage;
