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

import { useMemo } from 'react';
import { ActionIcon, Anchor, Group, Table, Text } from '@mantine/core';
import { Eye, Pencil } from 'lucide-react';

import { useStations } from '@/hooks/useStations';
import type { Warehouse } from '@/types/warehouse';
import { WarehouseStatusBadge, WarehouseTypeBadge } from './badges';
import { formatCapacity } from './options';

interface WarehouseTableProps {
  warehouses: Warehouse[];
  onView: (warehouse: Warehouse) => void;
  onEdit: (warehouse: Warehouse) => void;
}

export function WarehouseTable({ warehouses, onView, onEdit }: WarehouseTableProps) {
  const { data: stations } = useStations();
  const stationNameById = useMemo(
    () => new Map((stations ?? []).map((s) => [s.id, s.name])),
    [stations],
  );

  if (warehouses.length === 0) {
    return (
      <Text c="dimmed" ta="center" py="xl">
        No warehouses found.
      </Text>
    );
  }

  return (
    <Table.ScrollContainer minWidth={900}>
      <Table highlightOnHover verticalSpacing="sm" striped>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Code</Table.Th>
            <Table.Th>Name</Table.Th>
            <Table.Th>Facility</Table.Th>
            <Table.Th>Type</Table.Th>
            <Table.Th>Location</Table.Th>
            <Table.Th>Weight (cur / cap)</Table.Th>
            <Table.Th>Containers (cur / cap)</Table.Th>
            <Table.Th>Status</Table.Th>
            <Table.Th ta="right">Actions</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {warehouses.map((warehouse) => (
            <Table.Tr key={warehouse.id}>
              <Table.Td>
                <Anchor fw={600} size="sm" onClick={() => onView(warehouse)}>
                  {warehouse.code}
                </Anchor>
              </Table.Td>
              <Table.Td>{warehouse.name}</Table.Td>
              <Table.Td>
                {warehouse.stationId && stationNameById.get(warehouse.stationId) ? (
                  <Text size="sm" fw={500}>
                    {stationNameById.get(warehouse.stationId)}
                  </Text>
                ) : (
                  <Text size="sm" c="dimmed">
                    —
                  </Text>
                )}
              </Table.Td>
              <Table.Td>
                <WarehouseTypeBadge type={warehouse.type} />
              </Table.Td>
              <Table.Td>{warehouse.locationName ?? '—'}</Table.Td>
              <Table.Td>{formatCapacity(warehouse.currentWeight, warehouse.capacityWeight)}</Table.Td>
              <Table.Td>{formatCapacity(warehouse.currentContainers, warehouse.capacityContainers)}</Table.Td>
              <Table.Td>
                <WarehouseStatusBadge status={warehouse.status} />
              </Table.Td>
              <Table.Td>
                <Group gap="xs" justify="flex-end" wrap="nowrap">
                  <ActionIcon variant="subtle" color="gray" onClick={() => onView(warehouse)} title="View">
                    <Eye size={16} />
                  </ActionIcon>
                  <ActionIcon variant="subtle" color="gray" onClick={() => onEdit(warehouse)} title="Edit">
                    <Pencil size={16} />
                  </ActionIcon>
                </Group>
              </Table.Td>
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>
    </Table.ScrollContainer>
  );
}