import { Badge, Box, Button, Group, List, Modal, Stack, Text, ThemeIcon } from "@mantine/core";
import { AlertTriangle, Bell, Building2, FileClock, PackageX, TrainFront, Undo2, Weight } from "lucide-react";

export interface RemovalTarget {
  bookingId: string;
  reference: string | null;
  company: string | null;
  weightTons: number | null;
  wagonCount: number;
}

interface RemoveBookingConfirmModalProps {
  opened: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
  target: RemovalTarget | null;
}

export const RemoveBookingConfirmModal = ({
  opened,
  onClose,
  onConfirm,
  isLoading,
  target,
}: RemoveBookingConfirmModalProps) => {
  return (
    <Modal
      opened={opened}
      onClose={onClose}
      centered
      radius="lg"
      size="md"
      withCloseButton={false}
      title={
        <Group gap={10} wrap="nowrap">
          <ThemeIcon size={40} radius="md" variant="light" color="red">
            <PackageX size={21} />
          </ThemeIcon>
          <div>
            <Text fw={800}>Remove booking from train?</Text>
            <Text size="xs" c="dimmed">
              This change is logged and the customer is notified
            </Text>
          </div>
        </Group>
      }
    >
      <Stack gap="md">
        {/* Booking summary */}
        <Box
          p="sm"
          style={{
            borderRadius: 12,
            background: "var(--mantine-color-gray-0)",
            border: "1px solid var(--mantine-color-gray-2)",
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <Text fw={800} size="sm">
              {target?.reference ?? "Booking"}
            </Text>
            <Badge variant="light" color="edr-green" leftSection={<TrainFront size={10} />}>
              {target?.wagonCount ?? 0} wagon{target?.wagonCount === 1 ? "" : "s"}
            </Badge>
          </Group>
          <Group gap="lg" mt={6} wrap="wrap">
            {target?.company ? (
              <Group gap={5} wrap="nowrap">
                <Building2 size={13} color="var(--mantine-color-gray-6)" />
                <Text size="xs" c="dimmed">
                  {target.company}
                </Text>
              </Group>
            ) : null}
            <Group gap={5} wrap="nowrap">
              <Weight size={13} color="var(--mantine-color-gray-6)" />
              <Text size="xs" c="dimmed">
                {(target?.weightTons ?? 0).toFixed(1)} T
              </Text>
            </Group>
          </Group>
        </Box>

        {/* What happens */}
        <Box
          p="sm"
          style={{
            borderRadius: 12,
            background: "var(--mantine-color-orange-0)",
            border: "1px solid var(--mantine-color-orange-2)",
          }}
        >
          <Group gap={6} mb={6} wrap="nowrap">
            <AlertTriangle size={14} color="var(--mantine-color-orange-7)" />
            <Text size="xs" fw={700} c="orange.8">
              Removing this booking will:
            </Text>
          </Group>
          <List spacing={6} size="xs" center>
            <List.Item
              icon={
                <ThemeIcon size={18} radius="xl" variant="light" color="orange">
                  <Undo2 size={11} />
                </ThemeIcon>
              }
            >
              Return it to the unassigned pool
            </List.Item>
            <List.Item
              icon={
                <ThemeIcon size={18} radius="xl" variant="light" color="orange">
                  <FileClock size={11} />
                </ThemeIcon>
              }
            >
              Create a removal log entry for audit
            </List.Item>
            <List.Item
              icon={
                <ThemeIcon size={18} radius="xl" variant="light" color="orange">
                  <Bell size={11} />
                </ThemeIcon>
              }
            >
              Notify the customer to reschedule or cancel
            </List.Item>
          </List>
        </Box>

        <Group justify="flex-end" gap="sm">
          <Button variant="default" radius="md" onClick={onClose} disabled={isLoading}>
            Cancel
          </Button>
          <Button
            color="red"
            radius="md"
            leftSection={<PackageX size={16} />}
            loading={isLoading}
            onClick={onConfirm}
          >
            Remove booking
          </Button>
        </Group>
      </Stack>
    </Modal>
  );
};
