import { Card, Container, Stack } from '@mantine/core';

import Breadcrumbs from '@/components/ui/Breadcrumbs';
import { InventoryWorkbench, VisualEmptyState, WarehouseHero } from '@/components/warehouses';
import { useWarehouseInventory } from '@/hooks/useWarehouses';

/** Items that are LOADED and awaiting dispatch (train departure). */
export default function DispatchQueuePage() {
  const { data, isLoading } = useWarehouseInventory({ status: 'LOADED' });
  const items = data ?? [];

  return (
    <Container size="xxl" py="lg">
      <Breadcrumbs items={[{ label: 'Dispatch queue' }]} />

      <Stack gap="lg" mt="sm">
        <WarehouseHero
          variant="train"
          secondaryVariant="route"
          title="Dispatch Queue"
          subtitle="Loaded inventory awaiting train departure. Mark items dispatched once they leave."
        />

        <Card withBorder radius="md" padding="lg">
          {!isLoading && items.length === 0 ? (
            <VisualEmptyState
              variant="train"
              title="Nothing to dispatch"
              description="Loaded items appear here, ready to mark as dispatched."
            />
          ) : (
            <InventoryWorkbench items={items} isLoading={isLoading} />
          )}
        </Card>
      </Stack>
    </Container>
  );
}