/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState } from "react";
import { X, Truck, CheckCircle2, MapPin, Receipt, ShoppingBag } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Order } from "@/types";
import Image from "next/image";
import { requestOrderCancellationAction } from "@/actions/order/order.action";
import { toast } from "sonner";
import { ClientCancelConfirmDialog } from "./ClientCancelConfirmDialog";
import { OrderReturnDialog } from "./OrderReturnDialog";

interface OrderDetailsModalProps {
  selectedOrder: Order;
  user: { name: string; mobile_number: string } | null;
  onClose: () => void;
  getStatusBadge: (status: string) => string;
}

export function OrderDetailsModal({
  selectedOrder,
  user,
  onClose,
  getStatusBadge,
}: OrderDetailsModalProps) {
  const [isCancelling, setIsCancelling] = useState(false);
  const [isReturning, setIsReturning] = useState(false);
  const [loading, setLoading] = useState(false);

  React.useEffect(() => {
    const originalStyle = window.getComputedStyle(document.body).overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = originalStyle;
    };
  }, []);

  const customerId = (user as any)?.id || (selectedOrder as any)?.customer_id || 0;

  const handleRequestCancel = async (cancelReason: string) => {
    setLoading(true);
    const res = await requestOrderCancellationAction(selectedOrder.id, customerId, cancelReason);
    setLoading(false);
    if (res.success) {
      toast.success("Cancellation request submitted successfully!");
      setIsCancelling(false);
      onClose();
      window.location.reload();
    } else {
      toast.error(res.message || "Failed to submit request");
    }
  };
  const getTimelineSteps = (status: string) => {
    const steps = ["pending", "confirmed", "processing", "dispatched", "delivered"];
    const labels: Record<string, string> = {
      pending: "Order Placed",
      confirmed: "Confirmed",
      processing: "Preparing",
      dispatched: "Out for Delivery",
      delivered: "Delivered",
    };

    const currentIndex = steps.indexOf(status.toLowerCase());
    return steps.map((step, idx) => ({
      step,
      label: labels[step],
      completed: status.toLowerCase() === "cancelled" ? false : idx <= currentIndex,
      active: step === status.toLowerCase(),
    }));
  };

  return (
    <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      {/* Fixed Wrapper with relative container */}
      <div className="bg-white border border-zinc-200 rounded-2xl w-full max-w-2xl max-h-[85vh] shadow-2xl relative flex flex-col transition-all duration-200 overflow-hidden">
        {/* Modal Close X - ALWAYS fixed in place */}
        <button
          onClick={onClose}
          className="absolute right-6 top-6 text-zinc-400 hover:text-zinc-600 font-extrabold text-xl p-1.5 focus:outline-none cursor-pointer z-10 bg-white/80 rounded-full backdrop-blur-xs"
        >
          <X size={20} />
        </button>

        {/* Scrollable Container */}
        <div className="overflow-y-auto p-6 sm:p-8 space-y-6 flex-1 scrollbar-hide">
          {/* Modal Title */}
          <div className="mr-8">
            <div className="flex flex-wrap items-center gap-3">
              <h2 className="text-xl font-black text-zinc-955 tracking-tight">Order Details</h2>
              <span
                className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wider ${getStatusBadge(
                  selectedOrder.status
                )}`}
              >
                {selectedOrder.status}
              </span>
              {selectedOrder.cancel_request_status === "pending" && (
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-yellow-200 bg-yellow-50 text-yellow-700 uppercase tracking-wider">
                  Cancel Pending
                </span>
              )}
              {selectedOrder.return_status === "requested" && (
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-orange-200 bg-orange-50 text-orange-700 uppercase tracking-wider">
                  Return Requested
                </span>
              )}
              {selectedOrder.return_status === "partial" && (
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-rose-200 bg-rose-50 text-rose-700 uppercase tracking-wider">
                  Partially Returned
                </span>
              )}
              {selectedOrder.return_status === "fully_returned" && (
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-zinc-200 bg-zinc-550/10 text-zinc-700 uppercase tracking-wider">
                  Returned
                </span>
              )}
              {selectedOrder.return_status === "rejected" && (
                <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold border border-red-200 bg-red-50 text-red-700 uppercase tracking-wider">
                  Return Rejected
                </span>
              )}
              {["pending", "confirmed", "processing"].includes(selectedOrder.status.toLowerCase()) &&
                selectedOrder.cancel_request_status !== "pending" &&
                selectedOrder.cancel_request_status !== "approved" && (
                  <Button
                    onClick={() => setIsCancelling(true)}
                    className="bg-zinc-900 hover:bg-zinc-800 text-white text-[10px] font-black uppercase tracking-wider h-6 px-2.5 rounded-lg cursor-pointer transition-all duration-300"
                  >
                    Request Cancel
                  </Button>
                )}
              {selectedOrder.status.toLowerCase() === "delivered" &&
                selectedOrder.return_status !== "requested" &&
                selectedOrder.return_status !== "fully_returned" &&
                selectedOrder.items?.some(i => (Number(i.quantity) - Number(i.returned_quantity || 0)) > 0) && (
                  <Button
                    onClick={() => setIsReturning(true)}
                    className="bg-brand-accent hover:bg-brand-accent-hover text-white text-[10px] font-black uppercase tracking-wider h-6 px-2.5 rounded-lg cursor-pointer transition-all duration-300"
                  >
                    Request Return
                  </Button>
                )}
            </div>
            <p className="text-xs font-semibold text-zinc-450 mt-1">
              Invoice Order ID: #{selectedOrder.order_number} • Placed on{" "}
              {new Date(selectedOrder.created_at).toLocaleDateString()}
            </p>
          </div>

          {/* Timeline Progress */}
          <div className="border-t border-zinc-100 pt-6">
            <div className="flex justify-between items-center mb-4 flex-wrap gap-2">
              <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-450 flex items-center gap-1.5">
                <Truck className="w-4 h-4 text-brand-accent" />
                Delivery Timeline
              </h3>
              {selectedOrder.delivery?.tracking_number ? (
                <span className="text-[11px] font-bold text-zinc-650 bg-zinc-550/10 border border-zinc-200 px-2 py-0.5 rounded-lg select-all">
                  Tracking ID:{" "}
                  <span className="text-brand-accent font-black">
                    {selectedOrder.delivery.tracking_number}
                  </span>
                </span>
              ) : (
                <span className="text-[11px] font-semibold text-zinc-450 bg-zinc-100 border border-zinc-155 px-2 py-0.5 rounded-lg">
                  Tracking ID: Pending Confirmation
                </span>
              )}
            </div>
            <div className="grid grid-cols-5 gap-2 relative">
              <div className="absolute top-4 left-[10%] right-[10%] h-0.5 bg-zinc-100 z-0" />

              {getTimelineSteps(selectedOrder.status).map((t, idx) => (
                <div key={idx} className="flex flex-col items-center text-center space-y-2 z-10">
                  <div
                    className={`w-8 h-8 rounded-full border-2 flex items-center justify-center ${t.active
                      ? "bg-brand-accent border-brand-accent text-white"
                      : t.completed
                        ? "bg-brand-accent/10 border-brand-accent text-brand-accent"
                        : "bg-white border-zinc-200 text-zinc-400"
                      }`}
                  >
                    {t.completed ? (
                      <CheckCircle2 className="w-4 h-4" />
                    ) : (
                      <span className="text-[10px] font-black">{idx + 1}</span>
                    )}
                  </div>
                  <span
                    className={`text-[9px] uppercase font-extrabold tracking-wider ${t.active
                      ? "text-brand-accent"
                      : t.completed
                        ? "text-zinc-800"
                        : "text-zinc-400"
                      }`}
                  >
                    {t.label}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Shipping info */}
          <div className="border-t border-zinc-100 pt-6 grid grid-cols-1 sm:grid-cols-2 gap-6">
            <div>
              <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-450 mb-3 flex items-center gap-1.5">
                <MapPin className="w-4 h-4 text-brand-accent" />
                Shipping Address
              </h3>
              {selectedOrder.address ? (
                <div className="text-xs font-bold text-zinc-700 space-y-1">
                  <p>{user?.name}</p>
                  <p className="font-semibold text-zinc-500">
                    {selectedOrder.address.address}, {selectedOrder.address.area},{" "}
                    {selectedOrder.address.city}
                  </p>
                  <p className="font-semibold text-zinc-450">Mobile: {user?.mobile_number}</p>
                </div>
              ) : (
                <p className="text-xs text-zinc-450 font-medium">No address specified.</p>
              )}
            </div>

            <div>
              <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-450 mb-3 flex items-center gap-1.5">
                <Receipt className="w-4 h-4 text-brand-accent" />
                Payment Summary
              </h3>
              <div className="text-xs font-semibold text-zinc-500 space-y-1.5">
                <div className="flex justify-between">
                  <span>Payment Method:</span>
                  <span className="font-bold text-zinc-700">
                    {selectedOrder.payment_method?.toUpperCase() || "COD"}
                  </span>
                </div>
                <div className="flex justify-between">
                  <span>Delivery Charge:</span>
                  <span className="font-bold text-zinc-700">
                    ৳
                    {(() => {
                      const dbCharge = parseFloat(selectedOrder.delivery_charge);
                      const dbCod = parseFloat(selectedOrder.cod_extra_charge);
                      if (dbCharge > 0) return Math.round(dbCharge);

                      const sub = parseFloat(selectedOrder.subtotal);
                      const tot = parseFloat(selectedOrder.total_amount);
                      const disc = parseFloat(selectedOrder.discount_amount || "0");

                      let estCod = dbCod;
                      if (selectedOrder.payment_method?.toLowerCase() === "cod" && estCod === 0) {
                        const cityLower = (selectedOrder.address?.city || "dhaka").toLowerCase();
                        estCod = cityLower.includes("outside")
                          ? 50
                          : cityLower.includes("sub")
                            ? 20
                            : 30;
                      }
                      return Math.round(Math.max(0, tot - sub + disc - estCod));
                    })()}
                  </span>
                </div>
                {(() => {
                  const dbCod = parseFloat(selectedOrder.cod_extra_charge);
                  if (selectedOrder.payment_method?.toLowerCase() === "cod") {
                    let codChargeVal = dbCod;
                    if (codChargeVal === 0) {
                      const cityLower = (selectedOrder.address?.city || "dhaka").toLowerCase();
                      codChargeVal = cityLower.includes("outside")
                        ? 50
                        : cityLower.includes("sub")
                          ? 20
                          : 30;
                    }
                    if (codChargeVal > 0) {
                      return (
                        <div className="flex justify-between">
                          <span>COD Charge:</span>
                          <span className="font-bold text-zinc-700">৳{Math.round(codChargeVal)}</span>
                        </div>
                      );
                    }
                  }
                  return null;
                })()}
                {parseFloat(selectedOrder.discount_amount) > 0 && (
                  <div className="flex justify-between text-emerald-600">
                    <span>Discount Applied:</span>
                    <span className="font-bold">
                      -৳{Math.round(parseFloat(selectedOrder.discount_amount))}
                    </span>
                  </div>
                )}
                <div className="flex justify-between border-t border-zinc-100 pt-1.5 text-zinc-955 font-black text-sm">
                  <span>Total Paid:</span>
                  <span>৳{Math.round(parseFloat(selectedOrder.total_amount))}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Items listing */}
          <div className="border-t border-zinc-100 pt-6">
            <h3 className="text-xs font-bold uppercase tracking-widest text-zinc-450 mb-3 flex items-center gap-1.5">
              <ShoppingBag className="w-4 h-4 text-brand-accent" />
              Items Ordered
            </h3>
            <div className="border border-zinc-150 rounded-xl overflow-hidden divide-y divide-zinc-100 text-xs">
              {selectedOrder.items.map((item, idx) => (
                <div key={idx} className="p-3.5 flex items-center gap-3.5 bg-zinc-50/30">
                  {item.product?.images?.[0]?.image_url ? (
                    <Image
                      src={item.product.images[0].image_url}
                      alt={item.product.name}
                      width={40}
                      height={40}
                      className="w-10 h-10 rounded-lg object-cover border border-zinc-200/80 shrink-0"
                    />
                  ) : (
                    <div className="w-10 h-10 rounded-lg bg-zinc-100 flex items-center justify-center text-[8px] text-zinc-400 shrink-0 font-black border border-dashed border-zinc-300">
                      NO IMG
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <p className="font-extrabold text-zinc-905 uppercase">
                      {item.product?.name || `Item #${item.id}`}
                    </p>
                    <p className="text-zinc-500 font-semibold mt-0.5">
                      Qty: {item.quantity} × ৳{Math.round(parseFloat(item.price))}
                      {(() => {
                        const displayOrig = item.original_price;
                        return displayOrig && parseFloat(String(displayOrig)) > parseFloat(item.price) ? (
                          <span className="line-through text-zinc-400 font-normal ml-1.5">
                            ৳{Math.round(parseFloat(String(displayOrig)))}
                          </span>
                        ) : null;
                      })()}
                      {(() => {
                        const pendingQty = selectedOrder.returns
                          ?.filter(r => Number(r.order_item_id) === Number(item.id) && (r.status === 'pending' || r.status === 'requested'))
                          .reduce((sum, r) => sum + (r.requested_quantity || 0), 0) || 0;
                        const returnedQty = Number(item.returned_quantity || 0);
                        const rejectedQty = selectedOrder.returns
                          ?.filter(r => Number(r.order_item_id) === Number(item.id) && r.status === 'rejected')
                          .reduce((sum, r) => sum + (r.requested_quantity || 0), 0) || 0;

                        return (
                          <>
                            {pendingQty > 0 && (
                              <span className="ml-2 text-amber-600 font-black">
                                (Return Requested: {pendingQty})
                              </span>
                            )}
                            {returnedQty > 0 && (
                              <>
                                <span className="ml-2 text-rose-600 font-black">
                                  (Returned: {returnedQty})
                                </span>
                                {(() => {
                                  const approvedItem = selectedOrder.returns?.find(
                                    r => Number(r.order_item_id) === Number(item.id) && r.status === 'approved'
                                  );
                                  if (approvedItem && approvedItem.notes) {
                                    return (
                                      <span className="block text-[10px] text-zinc-650 font-semibold mt-1">
                                        Admin Note: {approvedItem.notes}
                                      </span>
                                    );
                                  }
                                  return null;
                                })()}
                              </>
                            )}
                            {rejectedQty > 0 && (
                              <>
                                <span className="ml-2 text-zinc-400 font-bold line-through">
                                  (Rejected: {rejectedQty})
                                </span>
                                {(() => {
                                  const rejectedItem = selectedOrder.returns?.find(
                                    r => Number(r.order_item_id) === Number(item.id) && r.status === 'rejected'
                                  );
                                  if (rejectedItem && rejectedItem.notes) {
                                    return (
                                      <span className="block text-[10px] text-red-500 font-semibold mt-1">
                                        Rejection Reason: {rejectedItem.notes}
                                      </span>
                                    );
                                  }
                                  return null;
                                })()}
                              </>
                            )}
                          </>
                        );
                      })()}
                    </p>
                  </div>
                  <span className="font-bold text-zinc-950 shrink-0 ml-4">৳{Math.round(parseFloat(item.total))}</span>
                </div>
              ))}
            </div>
          </div>

        </div>
      </div>

      <ClientCancelConfirmDialog
        open={isCancelling}
        onOpenChange={setIsCancelling}
        submitting={loading}
        onConfirm={handleRequestCancel}
      />

      <OrderReturnDialog
        open={isReturning}
        onOpenChange={setIsReturning}
        order={selectedOrder}
        onSuccess={() => {
          onClose();
          window.location.reload();
        }}
      />
    </div>
  );
}