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

import { Badge, Divider, Group, Modal, SimpleGrid, Stack, Text } from '@mantine/core';

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

interface InventoryDetailModalProps {
  opened: boolean;
  onClose: () => void;
  item: WarehouseInventoryItem | null;
}

function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <Stack gap={2}>
      <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
        {label}
      </Text>
      <Text size="sm" fw={500}>
        {value || '-'}
      </Text>
    </Stack>
  );
}

export function InventoryDetailModal({ opened, onClose, item }: InventoryDetailModalProps) {
  return (
    <Modal opened={opened} onClose={onClose} title="Inventory detail" centered size="xl">
      {!item ? (
        <Text c="dimmed">No inventory item selected.</Text>
      ) : (
        <Stack gap="md">
          <Group justify="space-between" align="flex-start">
            <Stack gap={2}>
              <Text size="lg" fw={800}>
                {item.booking?.reference ?? item.bookingId ?? item.id}
              </Text>
              <Text size="sm" c="dimmed">
                Inventory ID: {item.id}
              </Text>
            </Stack>
            <InventoryStatusBadge status={item.status} />
          </Group>

          <Divider label="Location" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Warehouse" value={item.warehouse ? `${item.warehouse.name} (${item.warehouse.code})` : '-'} />
            <DetailRow label="Yard" value={item.yard ? `${item.yard.name} (${item.yard.code})` : '-'} />
            <DetailRow label="Zone" value={item.zone ? `${item.zone.name} (${item.zone.code})` : '-'} />
          </SimpleGrid>

          <Divider label="Booking & item" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Booking status" value={item.booking?.status ?? '-'} />
            <DetailRow label="Payment status" value={item.booking?.paymentStatus ?? '-'} />
            <DetailRow label="Trade direction" value={item.booking?.tradeDirection ?? '-'} />
            <DetailRow label="Container ID" value={item.containerId ?? '-'} />
            <DetailRow label="Cargo ID" value={item.cargoId ?? '-'} />
            <DetailRow label="Goods ID" value={item.goodsId ?? '-'} />
            <DetailRow label="Quantity" value={formatNumber(item.quantity)} />
            <DetailRow label="Weight" value={`${formatNumber(item.weight)} kg`} />
            <DetailRow label="Volume" value={item.volume == null ? '-' : formatNumber(item.volume)} />
          </SimpleGrid>

          <Divider label="Lifecycle" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Inspection" value={<Badge variant="light">{item.inspectionStatus ?? 'Not inspected'}</Badge>} />
            <DetailRow label="Arrived" value={formatDate(item.arrivedAt)} />
            <DetailRow label="Stored" value={formatDate(item.storedAt)} />
            <DetailRow label="Reserved" value={formatDate(item.reservedAt)} />
            <DetailRow label="Inspected" value={formatDate(item.inspectedAt)} />
            <DetailRow label="Ready for loading" value={formatDate(item.readyForLoadingAt)} />
            <DetailRow label="Loaded" value={formatDate(item.loadedAt)} />
            <DetailRow label="Dispatched" value={formatDate(item.dispatchedAt)} />
            <DetailRow label="Ready for pickup" value={formatDate(item.readyForPickupAt)} />
            <DetailRow label="Released" value={formatDate(item.releaseDate)} />
            <DetailRow label="Delivered" value={formatDate(item.deliveredAt)} />
            <DetailRow label="Release reference" value={item.releaseOrderReference ?? '-'} />
          </SimpleGrid>

          {item.notes && (
            <>
              <Divider label="Notes" labelPosition="left" />
              <Text size="sm">{item.notes}</Text>
            </>
          )}
        </Stack>
      )}
    </Modal>
  );
}