import { useNavigate } from 'react-router-dom';
import { Card, Center, Group, Loader, SimpleGrid, Text, ThemeIcon } from '@mantine/core';
import {
  ClipboardCheck,
  ClipboardList,
  ShieldCheck,
  PackageCheck,
  PackagePlus,
  PackageSearch,
  CircleCheck,
  Send,
  Truck,
  Warehouse as WarehouseIcon,
  Boxes,
  Layers,
} from 'lucide-react';

import { PageContainer, PageHeader } from '@/components/page';
import { useQuery } from '@tanstack/react-query';

import { WarehouseDashboardCharts } from '@/components/warehouses';
import { api } from '@/services/api';
import type { WarehouseDashboard } from '@/types/warehouse';

interface Metric {
  key: keyof WarehouseDashboard;
  label: string;
  icon: React.ReactNode;
  /** Route to navigate to when the card is clicked. */
  to: string;
  theme: string;
}

const ORANGE = '#f08c00';
const GREEN = '#22c55e';

const METRICS: Metric[] = [
  { key: 'totalWarehouses', label: 'Total Warehouses', icon: <WarehouseIcon size={22} />, to: '/dashboard/warehouses', theme: ORANGE },
  { key: 'totalInventory', label: 'Total Inventory', icon: <Boxes size={22} />, to: '/dashboard/warehouse-inventory', theme: GREEN },
  { key: 'receivedToday', label: 'Received Today', icon: <PackagePlus size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: ORANGE },
  { key: 'awaitingInspection', label: 'Awaiting Inspection', icon: <ClipboardList size={22} />, to: '/dashboard/warehouse-inventory?status=RECEIVED', theme: GREEN },
  { key: 'inspected', label: 'Inspected', icon: <ShieldCheck size={22} />, to: '/dashboard/warehouse-inventory', theme: ORANGE },
  { key: 'stored', label: 'Stored', icon: <Layers size={22} />, to: '/dashboard/warehouse-inventory?status=STORED', theme: GREEN },
  { key: 'reserved', label: 'Reserved', icon: <ClipboardCheck size={22} />, to: '/dashboard/warehouse-inventory?status=RESERVED', theme: ORANGE },
  { key: 'readyForLoading', label: 'Ready For Loading', icon: <PackageCheck size={22} />, to: '/dashboard/loading-queue', theme: GREEN },
  { key: 'loaded', label: 'Loaded', icon: <Truck size={22} />, to: '/dashboard/loaded-inventory', theme: ORANGE },
  { key: 'dispatched', label: 'Dispatched', icon: <Send size={22} />, to: '/dashboard/dispatch-queue', theme: GREEN },
  { key: 'readyForPickup', label: 'Ready For Pickup', icon: <PackageSearch size={22} />, to: '/dashboard/warehouse-inventory?status=READY_FOR_PICKUP', theme: ORANGE },
  { key: 'delivered', label: 'Delivered', icon: <CircleCheck size={22} />, to: '/dashboard/warehouse-inventory?status=DELIVERED', theme: GREEN },
];

export default function WarehouseDashboardPage() {
  const navigate = useNavigate();
  const { data, isLoading } = useQuery(api.warehouses.dashboard.queryOptions());

  return (
    <PageContainer>
      <PageHeader
        title="Warehouse Dashboard"
        subtitle="Live overview of warehouse capacity and inventory lifecycle."
      />

      {isLoading ? (
        <Center py="xl">
          <Loader />
        </Center>
      ) : (
        <>
          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
            {METRICS.map((metric) => (
              <Card
                key={metric.key}
                padding="lg"
                onClick={() => navigate(metric.to)}
                className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
              >
                <Group justify="space-between" align="flex-start" wrap="nowrap">
                  <div>
                    <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
                      {metric.label}
                    </Text>
                    <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
                      {data ? data[metric.key] : 0}
                    </Text>
                  </div>
                  <ThemeIcon
                    variant="light"
                    size={46}
                    radius="md"
                    style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
                  >
                    {metric.icon}
                  </ThemeIcon>
                </Group>
              </Card>
            ))}
          </SimpleGrid>

          <WarehouseDashboardCharts data={data} />
        </>
      )}
    </PageContainer>
  );
}
