import { Alert, Box, Button, Group, Modal, Stack, Text } from "@mantine/core";
import { AlertCircle, MessageSquareWarning, Send } from "lucide-react";

import type { Freight } from "@edr/types";

import { PriceChangeModal } from "./PriceChangeModal";
import { ResubmitDocuments } from "./ResubmitDocuments";
import { useResubmitFlow } from "./useResubmitFlow";

interface ResubmitBookingModalProps {
  booking: Freight.IBooking;
  opened: boolean;
  onClose: () => void;
}

/**
 * Home-page modal for a CHANGES_REQUESTED booking: shows the staff change
 * request, lets the customer update the documents they submitted, and resubmit
 * for review — all without leaving the My Shipments list.
 *
 * Mounted only while `opened` so replacement state resets on each open.
 */
export function ResubmitBookingModal({
  booking,
  opened,
  onClose,
}: ResubmitBookingModalProps) {
  if (!opened) return null;
  return <ResubmitBookingModalBody booking={booking} onClose={onClose} />;
}

function ResubmitBookingModalBody({
  booking,
  onClose,
}: {
  booking: Freight.IBooking;
  onClose: () => void;
}) {
  const flow = useResubmitFlow(booking, { onResubmitted: onClose });

  return (
    <>
      <Modal
        opened
        onClose={onClose}
        centered
        size={560}
        radius={16}
        padding={24}
        title={
          <Box>
            <Text fz={16} fw={800} c="#10202F">
              Update &amp; resubmit
            </Text>
            <Text fz={12} c="dimmed" ff="monospace">
              {booking.reference}
            </Text>
          </Box>
        }
        overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
        styles={{ body: { paddingTop: 8 } }}
      >
        <Stack gap="md">
          {booking.latestChangeRequestNote && (
            <Alert
              color="orange"
              radius="md"
              icon={<MessageSquareWarning size={18} />}
              title="Changes requested by EDR"
            >
              {booking.latestChangeRequestNote}
            </Alert>
          )}

          <ResubmitDocuments flow={flow} />

          {flow.validationError && (
            <Alert color="red" radius="md" icon={<AlertCircle size={16} />}>
              {flow.validationError}
            </Alert>
          )}

          {flow.mutations.some((m) => m.isError) && (
            <Alert color="red" radius="md" icon={<AlertCircle size={16} />}>
              Something went wrong. Please try again.
            </Alert>
          )}

          <Group justify="flex-end" gap="sm">
            <Button variant="default" radius="md" onClick={onClose}>
              Close
            </Button>
            <Button
              color="edr-green"
              radius="md"
              leftSection={<Send size={16} />}
              onClick={flow.resubmit}
              loading={flow.isBusy}
            >
              Resubmit booking
            </Button>
          </Group>
        </Stack>
      </Modal>

      <PriceChangeModal
        data={flow.priceChange}
        onClose={flow.clearPriceChange}
        onConfirm={flow.confirmSubmit}
        confirmPending={flow.confirmSubmitPending}
      />
    </>
  );
}
