import { useQuery } from "@tanstack/react-query";
import { Alert, List, Text } from "@mantine/core";
import { Link2 } from "lucide-react";

import { bookingsService } from "@/services/bookings.service";
import { QUERY_KEYS } from "@/constants/QUERY_KEYS";

/**
 * Shown on a booking parked in PENDING_CONSOLIDATION. Explains that the booking
 * cannot be approved until a complementary booking fills the wagon, and lists
 * the partial-wagon container lines that are waiting for a partner.
 */
export function ConsolidationWaitingBanner({ bookingId }: { bookingId: string }) {
  const { data } = useQuery({
    queryKey: [...QUERY_KEYS.BOOKINGS.byId(bookingId), "consolidation"],
    queryFn: () => bookingsService.getConsolidationDetails(bookingId),
    enabled: Boolean(bookingId),
  });

  return (
    <Alert
      color="yellow"
      variant="light"
      icon={<Link2 size={18} />}
      title="Waiting for a consolidation partner"
    >
      <Text size="sm">
        This booking cannot be approved until a matching booking fills the
        wagon. It will return to the approval queue automatically once a partner
        is found.
      </Text>
      {data?.wagonSlots?.length ? (
        <List size="sm" mt="xs" spacing={2}>
          {data.wagonSlots.map((slot) => (
            <List.Item key={slot.containerTypeCode}>
              {slot.slotsNeeded} more × {slot.containerTypeCode} (
              {slot.containersPerWagon} per wagon; you have {slot.quantity})
            </List.Item>
          ))}
        </List>
      ) : null}
    </Alert>
  );
}
