import { useQuery } from "@tanstack/react-query";
import { Badge, Group, Loader, Table, Text } from "@mantine/core";

import { warehouseService } from "@/services/warehouse.service";

/**
 * The trucks carrying one booking's cargo, and which containers ride each.
 *
 * A self-haul booking can have several trucks, each with 1–2 containers, but
 * the inventory table has one row per inventory item — so which container sits
 * on which truck was never visible without opening a document. Fetched lazily:
 * only an expanded row costs a request.
 */
export function TruckBreakdownRow({
  bookingId,
  colSpan,
}: {
  bookingId: string;
  colSpan: number;
}) {
  const { data: trucks = [], isLoading } = useQuery({
    queryKey: ["booking-customer-trucks", bookingId],
    queryFn: () => warehouseService.getCustomerTrucks(bookingId),
  });

  return (
    <Table.Tr>
      <Table.Td colSpan={colSpan} bg="var(--mantine-color-gray-0)">
        {isLoading ? (
          <Group gap="xs" py="xs">
            <Loader size="xs" />
            <Text size="xs" c="dimmed">
              Loading trucks…
            </Text>
          </Group>
        ) : trucks.length === 0 ? (
          <Text size="xs" c="dimmed" py="xs">
            No customer trucks assigned to this booking.
          </Text>
        ) : (
          <Table verticalSpacing={4} withRowBorders={false}>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>
                  <Text size="xs" c="dimmed">
                    Truck
                  </Text>
                </Table.Th>
                <Table.Th>
                  <Text size="xs" c="dimmed">
                    Driver
                  </Text>
                </Table.Th>
                <Table.Th>
                  <Text size="xs" c="dimmed">
                    Type
                  </Text>
                </Table.Th>
                <Table.Th>
                  <Text size="xs" c="dimmed">
                    Containers
                  </Text>
                </Table.Th>
                <Table.Th>
                  <Text size="xs" c="dimmed">
                    Status
                  </Text>
                </Table.Th>
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
              {trucks.map((truck) => (
                <Table.Tr key={truck.id}>
                  <Table.Td>
                    <Text size="xs" fw={600}>
                      {truck.plateNumber}
                    </Text>
                  </Table.Td>
                  <Table.Td>
                    <Text size="xs">{truck.driverName}</Text>
                  </Table.Td>
                  <Table.Td>
                    <Text size="xs">{truck.truckType}</Text>
                  </Table.Td>
                  <Table.Td>
                    {/* Bulk trucks carry loose tonnage, not containers. */}
                    <Text size="xs">
                      {truck.containers?.length
                        ? truck.containers.map((c) => c.containerNumber).join(", ")
                        : "Bulk"}
                    </Text>
                  </Table.Td>
                  <Table.Td>
                    <Badge
                      size="xs"
                      radius="sm"
                      variant="light"
                      color={truck.arrivedAt ? "edr-green" : "gray"}
                    >
                      {truck.arrivedAt
                        ? `Arrived ${new Date(truck.arrivedAt).toLocaleString()}`
                        : "Not arrived"}
                    </Badge>
                  </Table.Td>
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>
        )}
      </Table.Td>
    </Table.Tr>
  );
}
