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

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

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

interface InventoryInquiryDetailModalProps {
  opened: boolean;
  onClose: () => void;
  result: InventoryInquiryResult | 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>
  );
}

function itemLabel(result: InventoryInquiryResult) {
  if (result.containerNumber) return `Container ${result.containerNumber}`;
  if (result.cargoType) return result.cargoType;
  if (result.cargoDescription) return result.cargoDescription;
  if (result.goodsId) return `Goods ${result.goodsId}`;
  return '-';
}

export function InventoryInquiryDetailModal({ opened, onClose, result }: InventoryInquiryDetailModalProps) {
  return (
    <Modal opened={opened} onClose={onClose} title="Inventory inquiry detail" centered size="xl">
      {!result ? (
        <Text c="dimmed">No inquiry result selected.</Text>
      ) : (
        <Stack gap="md">
          <Group justify="space-between" align="flex-start">
            <Stack gap={2}>
              <Text size="lg" fw={800}>
                {result.bookingReference ?? result.bookingNumber ?? result.bookingId ?? result.id}
              </Text>
              <Text size="sm" c="dimmed">
                Inventory ID: {result.inventoryId ?? 'Not yet in warehouse inventory'}
              </Text>
            </Stack>
            {result.status ? (
              <InventoryStatusBadge status={result.status} />
            ) : (
              <Badge variant="light" color={result.trainStatus === 'ARRIVED' ? 'orange' : 'blue'}>
                {result.trainStatus ?? result.bookingStatus ?? 'Not in warehouse'}
              </Badge>
            )}
          </Group>

          <Divider label="Booking" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Booking reference" value={result.bookingReference ?? result.bookingNumber ?? '-'} />
            <DetailRow label="Booking status" value={result.bookingStatus ?? '-'} />
            <DetailRow label="Customer" value={result.customerName ?? '-'} />
          </SimpleGrid>

          <Divider label="Item" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Item" value={itemLabel(result)} />
            <DetailRow label="Quantity" value={formatNumber(result.quantity)} />
            <DetailRow label="Weight" value={`${formatNumber(result.weight)} kg`} />
          </SimpleGrid>

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

          <Divider label="Dates" labelPosition="left" />
          <SimpleGrid cols={{ base: 1, sm: 3 }}>
            <DetailRow label="Arrived" value={formatDate(result.arrivedAt)} />
            <DetailRow label="Ready for loading" value={formatDate(result.readyForLoadingAt)} />
          </SimpleGrid>
        </Stack>
      )}
    </Modal>
  );
}