import { useState } from "react";
import { Alert, Button, Group, Text } from "@mantine/core";
import {
  CheckCircle2,
  ClipboardList,
  Clock,
  PackagePlus,
  Upload,
} from "lucide-react";
import { useNavigate } from "react-router-dom";

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

import { BookingActionModal } from "@/pages/bookings/clearance/BookingActionModal";
import { getBookingNextAction } from "@/pages/bookings/clearance/bookingNextAction";

import { CardTitle, SectionCard } from "./layout";

/**
 * Customer-facing clearance section on the booking detail page: a compact
 * status summary with a single action button. The document grid and re-uploads
 * live in the shared {@link BookingActionModal} (the same modal the My
 * Shipments list uses); a finished bare instance instead shows a "Book" button
 * that navigates to the booking form.
 */
export function ClearanceCard({ booking }: { booking: Freight.IBooking }) {
  const [modalOpen, setModalOpen] = useState(false);
  const navigate = useNavigate();
  const status = booking.status as string;
  const action = getBookingNextAction(booking);
  // BOOK: clearance finished on a bare instance — go straight to the booking
  // form (cargo + shipment day + window check) instead of opening the modal.
  const isBookAction = action?.kind === "BOOK" && Boolean(action.to);

  if (status === "OPERATION_REQUESTED") {
    return (
      <SectionCard>
        <CardTitle>Operation</CardTitle>
        <Alert color="teal" radius="md" icon={<CheckCircle2 size={18} />} mt="sm">
          Operation requested. An operator will take your shipment forward.
        </Alert>
      </SectionCard>
    );
  }

  const summary =
    status === "CLEARANCE_READY" ? (
      <Alert color="teal" radius="md" icon={<CheckCircle2 size={18} />}>
        {isBookAction
          ? "Clearance is complete. Book your shipment — enter the cargo details and pick a shipment day inside an open booking window."
          : "Clearance is complete. Pick a shipment day and proceed to operation."}
      </Alert>
    ) : status === "DOCUMENTS_UNDER_REVIEW" ? (
      <Alert color="blue" radius="md" icon={<Clock size={18} />}>
        Your documents are being reviewed. Re-upload any queried documents to
        proceed — approved documents stay as they are.
      </Alert>
    ) : (
      <Alert color="yellow" radius="md" icon={<Upload size={18} />}>
        Upload the required clearance documents so your shipment can be
        reviewed.
      </Alert>
    );

  return (
    <SectionCard>
      {/* The "Clearance progress" stepper moved into the unified journey
          wizard at the top of the page — this card keeps only the actions. */}
      <Group justify="space-between" align="center" mb="md">
        <CardTitle>Clearance documents</CardTitle>
        {action && (
          <Button
            color="edr-green"
            radius="md"
            leftSection={
              isBookAction ? (
                <PackagePlus size={16} />
              ) : (
                <ClipboardList size={16} />
              )
            }
            onClick={() =>
              isBookAction ? navigate(action!.to!) : setModalOpen(true)
            }
          >
            {action.label}
          </Button>
        )}
      </Group>

      {summary}

      <Text fz="12.5px" c="dimmed" mt="sm">
        {isBookAction
          ? "Use “Book” to enter the cargo details and schedule your shipment."
          : `Use “${action?.label ?? "the action button"}” to manage your clearance documents.`}
      </Text>

      {!isBookAction && (
        <BookingActionModal
          booking={booking}
          opened={modalOpen}
          onClose={() => setModalOpen(false)}
        />
      )}
    </SectionCard>
  );
}
