import { Box, Button } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import {
  AlertCircle,
  ArrowRight,
  PackagePlus,
  PencilLine,
  Upload,
} from "lucide-react";
import { useNavigate } from "react-router-dom";

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

import { ResubmitBookingModal } from "@/pages/bookings/resubmit/ResubmitBookingModal";

import { BookingActionModal } from "./BookingActionModal";
import {
  type BookingActionKind,
  getBookingNextAction,
} from "./bookingNextAction";

const ICON_BY_KIND: Record<
  BookingActionKind,
  typeof Upload
> = {
  UPLOAD_DOCUMENTS: Upload,
  FIX_DOCUMENTS: AlertCircle,
  SCHEDULE_OPERATION: ArrowRight,
  BOOK: PackagePlus,
};

interface BookingActionButtonProps {
  booking: Freight.IBooking;
  size?: "xs" | "sm";
}

/**
 * Self-contained next-action trigger for a My Shipments row. Renders nothing
 * when the booking has no customer-actionable clearance/operation step;
 * otherwise shows a button that opens the in-place {@link BookingActionModal}.
 *
 * Drop it into a list row exactly like {@link PayNowButton} — it stops click
 * propagation so it never triggers the row's navigation handler.
 */
export function BookingActionButton({
  booking,
  size = "sm",
}: BookingActionButtonProps) {
  const [opened, { open, close }] = useDisclosure(false);
  const navigate = useNavigate();

  // Staff returned the booking for changes — let the customer update the docs
  // they submitted and resubmit, in place.
  const isChangesRequested = booking.status === "CHANGES_REQUESTED";
  const action = isChangesRequested ? null : getBookingNextAction(booking);

  if (!isChangesRequested && !action) return null;

  const Icon = action ? ICON_BY_KIND[action.kind] : PencilLine;
  const label = action ? action.label : "Update & resubmit";
  // BOOK navigates to the booking form (cargo + day + window check) — the
  // same page a one-time booking uses — instead of opening the modal.
  const navigateTo = action?.kind === "BOOK" ? action.to : undefined;

  return (
    // Mantine modals portal to <body>, but React events still bubble through
    // the React tree to this button's ancestors — including the clickable list
    // row. Stop click propagation here so interacting with the modal never
    // triggers the row's navigate-to-detail handler.
    <Box component="span" onClick={(e) => e.stopPropagation()}>
      <Button
        size={size}
        radius="md"
        fw={700}
        fz={13}
        color="edr-green"
        leftSection={<Icon size={14} />}
        onClick={(e) => {
          e.stopPropagation();
          if (navigateTo) navigate(navigateTo);
          else open();
        }}
      >
        {label}
      </Button>

      {isChangesRequested ? (
        <ResubmitBookingModal
          booking={booking}
          opened={opened}
          onClose={close}
        />
      ) : navigateTo ? null : (
        <BookingActionModal booking={booking} opened={opened} onClose={close} />
      )}
    </Box>
  );
}
