edr-platform/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx

import { ActionIcon, Badge, Button, Group, Table, Text, Tooltip } from '@mantine/core';
import { ArrowRightLeft, ClipboardList, History } from 'lucide-react';

import type { InventoryAction, WarehouseInventoryItem } from '@/types/warehouse';
import { INVENTORY_NEXT_ACTION } from '@/types/warehouse';
import { InventoryStatusBadge } from './badges';
import { formatDate, formatNumber, humanizeEnum } from './options';

interface WarehouseInventoryTableProps {
  items: WarehouseInventoryItem[];
  busyId?: string | null;
  onAdvance: (item: WarehouseInventoryItem, action: InventoryAction) => void;
  onMove: (item: WarehouseInventoryItem) => void;
  onHistory: (item: WarehouseInventoryItem) => void;
  onInspect?: (item: WarehouseInventoryItem) => void;
}

const itemKind = (item: WarehouseInventoryItem) => {
  if (item.containerId) return { label: 'Container', color: 'blue' };
  if (item.cargoId) return { label: 'Cargo', color: 'grape' };
  if (item.goodsId) return { label: 'Goods', color: 'orange' };
  return { label: '—', color: 'gray' };
};

const actionColor: Record<InventoryAction, string> = {
  store: 'blue',
  reserve: 'grape',
  'ready-for-loading': 'cyan',
  load: 'teal',
  dispatch: 'green',
};

export function WarehouseInventoryTable({
  items,
  busyId,
  onAdvance,
  onMove,
  onHistory,
  onInspect,
}: WarehouseInventoryTableProps) {
  if (items.length === 0) {
    return (
      <Text c="dimmed" ta="center" py="xl">
        No inventory items found.
      </Text>
    );
  }

  return (
    <Table.ScrollContainer minWidth={1150}>
      <Table highlightOnHover verticalSpacing="sm" striped>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Booking</Table.Th>
            <Table.Th>Facility</Table.Th>
            <Table.Th>Warehouse</Table.Th>
            <Table.Th>Yard</Table.Th>
            <Table.Th>Zone</Table.Th>
            <Table.Th>Item</Table.Th>
            <Table.Th>Qty</Table.Th>
            <Table.Th>Weight</Table.Th>
            <Table.Th>Status</Table.Th>
            <Table.Th>Arrived</Table.Th>
            <Table.Th ta="right">Actions</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {items.map((item) => {
            const kind = itemKind(item);
            const busy = busyId === item.id;
            const nextAction = INVENTORY_NEXT_ACTION[item.status];
            return (
              <Table.Tr key={item.id}>
                <Table.Td>
                  {item.bookingId ? (
                    <Tooltip label={item.bookingId} withArrow>
                      <Text size="sm" fw={600}>
                        {item.bookingId.slice(0, 8)}…
                      </Text>
                    </Tooltip>
                  ) : (
                    <Text size="sm" c="dimmed">
                      —
                    </Text>
                  )}
                </Table.Td>
                <Table.Td>{item.warehouse?.facility?.name ?? '—'}</Table.Td>
                <Table.Td>{item.warehouse?.code ?? '—'}</Table.Td>
                <Table.Td>{item.yard?.code ?? '—'}</Table.Td>
                <Table.Td>{item.zone?.code ?? '—'}</Table.Td>
                <Table.Td>
                  <Badge color={kind.color} variant="light" size="sm" radius="md">
                    {kind.label}
                  </Badge>
                </Table.Td>
                <Table.Td>{formatNumber(item.quantity)}</Table.Td>
                <Table.Td>{formatNumber(item.weight)}</Table.Td>
                <Table.Td>
                  <InventoryStatusBadge status={item.status} />
                </Table.Td>
                <Table.Td>
                  <Text size="xs">{formatDate(item.arrivedAt)}</Text>
                </Table.Td>
                <Table.Td>
                  <Group gap="xs" justify="flex-end" wrap="nowrap">
                    {nextAction && (
                      <Button
                        size="compact-xs"
                        variant="light"
                        color={actionColor[nextAction]}
                        loading={busy}
                        onClick={() => onAdvance(item, nextAction)}
                      >
                        {humanizeEnum(nextAction.replace(/-/g, '_'))}
                      </Button>
                    )}
                    {item.status !== 'DISPATCHED' && (
                      <Tooltip label="Move" withArrow>
                        <ActionIcon variant="subtle" color="gray" onClick={() => onMove(item)}>
                          <ArrowRightLeft size={16} />
                        </ActionIcon>
                      </Tooltip>
                    )}
                    {onInspect && (
                      <Tooltip label="Inspection / Report" withArrow>
                        <ActionIcon variant="subtle" color="orange" onClick={() => onInspect(item)}>
                          <ClipboardList size={16} />
                        </ActionIcon>
                      </Tooltip>
                    )}
                    <Tooltip label="History" withArrow>
                      <ActionIcon variant="subtle" color="gray" onClick={() => onHistory(item)}>
                        <History size={16} />
                      </ActionIcon>
                    </Tooltip>
                  </Group>
                </Table.Td>
              </Table.Tr>
            );
          })}
        </Table.Tbody>
      </Table>
    </Table.ScrollContainer>
  );
}