import { Alert, Badge, Group, Stack, Text } from "@mantine/core";
import { Boxes } from "lucide-react";

import { useContractCapacity } from "@/hooks/contracts/useContracts";

export function ContractCapacityNotice({
  contractId,
  isContainer,
}: {
  contractId: string;
  isContainer: boolean;
}) {
  const { data: lines = [] } = useContractCapacity(contractId);

  if (lines.length === 0) return null;

  const allFull = lines.every((l) => l.remaining === 0);
  const unit = isContainer ? "" : " tons";

  return (
    <Alert
      color={allFull ? "red" : "edr-green"}
      variant="light"
      radius="md"
      icon={<Boxes size={16} />}
      title={allFull ? "Contract capacity reached" : "Remaining contract capacity"}
    >
      {allFull ? (
        <Text fz={13}>
          This contract has been fully booked. No further shipments can be created
          against it.
        </Text>
      ) : (
        <Stack gap={6} mt={4}>
          {lines.map((l, i) => (
            <Group key={i} justify="space-between" wrap="nowrap">
              <Text fz={13}>{l.containerSize ?? "Bulk"}</Text>
              <Badge
                color={l.remaining === 0 ? "red" : "edr-green"}
                variant="light"
                radius="sm"
              >
                {l.remaining}
                {unit} of {l.cap} left
              </Badge>
            </Group>
          ))}
        </Stack>
      )}
    </Alert>
  );
}
