import { useNavigate } from 'react-router-dom';
import {
  Badge,
  Card,
  Center,
  Container,
  Group,
  Loader,
  SimpleGrid,
  Table,
  Text,
  Title,
} from '@mantine/core';
import { IconChevronRight } from '@tabler/icons-react';
import {
  STATUS_COLORS,
  STATUS_LABELS,
  useGetAssignedToMeQuery,
  useGetQueueQuery,
  type LicenseStatus,
} from '@ema-platform/api';

/**
 * Backoffice home.
 *
 * Shows the licence pipeline, which is the part of the platform that has real
 * data behind it. The previous version charted invented registration volumes
 * and a fictional breakdown of staff roles.
 */
export function DashboardPage() {
  const navigate = useNavigate();
  const queue = useGetQueueQuery();
  const mine = useGetAssignedToMeQuery();

  if (queue.isLoading || mine.isLoading) {
    return (
      <Center h={300}>
        <Loader />
      </Center>
    );
  }

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

  const stats = [
    { label: 'Awaiting claim', value: unclaimed.length, color: 'blue' },
    { label: 'Assigned to me', value: inProgress.length, color: 'indigo' },
    {
      label: 'Needs applicant action',
      value: all.filter((a) => a.status === 'RESUBMIT_REQUIRED').length,
      color: 'orange',
    },
    {
      label: 'Awaiting payment',
      value: all.filter((a) => a.status === 'PAYMENT_PENDING').length,
      color: 'yellow',
    },
  ];

  return (
    <Container size="xl" py="md">
      <Title order={3} mb="xs">
        Dashboard
      </Title>
      <Text size="sm" c="dimmed" mb="lg">
        Licence applications currently in the system.
      </Text>

      <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} mb="xl">
        {stats.map((stat) => (
          <Card withBorder key={stat.label} padding="md" radius="md">
            <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
              {stat.label}
            </Text>
            <Text fz={32} fw={700} c={stat.color} lh={1.2}>
              {stat.value}
            </Text>
          </Card>
        ))}
      </SimpleGrid>

      <Card withBorder padding={0} radius="md">
        <Group justify="space-between" p="md" pb="xs">
          <Text fw={600} size="sm">
            Awaiting claim
          </Text>
          <Text
            size="xs"
            c="blue"
            style={{ cursor: 'pointer' }}
            onClick={() => navigate('/licence-review')}
          >
            Open queue <IconChevronRight size={11} style={{ verticalAlign: -1 }} />
          </Text>
        </Group>
        {unclaimed.length === 0 ? (
          <Center py="xl">
            <Text size="sm" c="dimmed">
              Nothing waiting to be claimed.
            </Text>
          </Center>
        ) : (
          <Table highlightOnHover>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>Number</Table.Th>
                <Table.Th>Company</Table.Th>
                <Table.Th>Status</Table.Th>
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
              {unclaimed.slice(0, 8).map((app) => (
                <Table.Tr
                  key={app.id}
                  style={{ cursor: 'pointer' }}
                  onClick={() => navigate('/licence-review')}
                >
                  <Table.Td>
                    <Text size="sm" fw={500}>
                      {app.applicationNumber}
                    </Text>
                  </Table.Td>
                  <Table.Td>
                    <Text size="sm">{app.companyName ?? '—'}</Text>
                  </Table.Td>
                  <Table.Td>
                    <Badge
                      variant="light"
                      color={STATUS_COLORS[app.status as LicenseStatus]}
                    >
                      {STATUS_LABELS[app.status as LicenseStatus]}
                    </Badge>
                  </Table.Td>
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>
        )}
      </Card>
    </Container>
  );
}

export default DashboardPage;
