import { useNavigate } from 'react-router-dom';
import {
  Card,
  Center,
  Container,
  Group,
  Loader,
  SimpleGrid,
  Text,
  Title,
} from '@mantine/core';
import { IconChevronRight } from '@tabler/icons-react';
import { useGetAssignedToMeQuery, useGetQueueQuery } from '@ema-platform/api';
import { AdvancedTable, PageLoader, useServerTable } from '@ema-platform/ui';
import { dashboardQueueColumns } from './columns';

/**
 * 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();
  const table = useServerTable();

  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 paged = table.paginate(unclaimed.slice(0, 8));

  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>
        <AdvancedTable
          tableName="Awaiting claim"
          columns={dashboardQueueColumns}
          data={paged.rows}
          itemCount={paged.itemCount}
          pageIndex={paged.pageIndex}
          onPageChange={table.setPageIndex}
          pageSize={table.pageSize}
          onRowClick={() => navigate('/licence-review')}
          refresh={queue.refetch}
          emptyText="Nothing waiting to be claimed."
        />
      </Card>
    </Container>
  );
}

export default DashboardPage;
