import { Button, Group, Modal, Stack, Text, Badge } from "@mantine/core";
import type { TrainScheduleDetail } from "@/types/trainScheduling";

type WagonWithAllocation = NonNullable<TrainScheduleDetail["trainSet"]>["wagons"][number];

interface RemoveBookingModalProps {
  opened: boolean;
  onClose: () => void;
  wagon: WagonWithAllocation | null;
  onConfirm: () => void;
  isLoading: boolean;
}

export const RemoveBookingModal = ({
  opened,
  onClose,
  wagon,
  onConfirm,
  isLoading,
}: RemoveBookingModalProps) => {
  if (!wagon || !wagon.allocations?.[0]) return null;

  const allocation = wagon.allocations[0];

  return (
    <Modal opened={opened} onClose={onClose} title="Confirm Booking Removal" centered>
      <Stack gap="md">
        <div>
          <Text size="sm" fw={500} mb={4}>
            Booking Details
          </Text>
          <Stack gap={4}>
            <Text size="sm">
              <strong>Reference:</strong> {allocation.bookingReference || "N/A"}
            </Text>
            <Text size="sm">
              <strong>Freight Type:</strong>{" "}
              <Badge size="sm" variant="light">
                {allocation.loadType || "N/A"}
              </Badge>
            </Text>
            <Text size="sm">
              <strong>Weight:</strong> {allocation.allocatedWeightTons?.toFixed(2) || 0} T
            </Text>
            <Text size="sm">
              <strong>Wagon Slot:</strong> #{wagon.sequenceNo}
            </Text>
          </Stack>
        </div>

        <div>
          <Text size="sm" c="orange" fw={500}>
            ⚠️ Warning: Removing this booking will:
          </Text>
          <ul style={{ marginTop: 8, marginBottom: 0 }}>
            <li>Move the booking back to the unassigned pool</li>
            <li>Create a removal log for audit</li>
            <li>Notify the customer to reschedule or cancel</li>
          </ul>
        </div>

        <Group justify="flex-end">
          <Button variant="default" onClick={onClose} disabled={isLoading}>
            Cancel
          </Button>
          <Button color="red" onClick={onConfirm} loading={isLoading}>
            Remove Booking
          </Button>
        </Group>
      </Stack>
    </Modal>
  );
};
