/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";
import { requestOrderReturnAction } from "@/actions/order/order.action";
import { Order } from "@/types";

interface OrderReturnDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  order: Order;
  onSuccess: () => void;
}

export function OrderReturnDialog({
  open,
  onOpenChange,
  order,
  onSuccess,
}: OrderReturnDialogProps) {
  const [submitting, setSubmitting] = useState(false);
  const [consent, setConsent] = useState(false);
  const [itemsSelection, setItemsSelection] = useState<Record<number, { selected: boolean; quantity: number; reason: string }>>({});

  useEffect(() => {
    if (open && order) {
      const initialSelections: Record<number, { selected: boolean; quantity: number; reason: string }> = {};
      order.items?.forEach(item => {
        const returnable = Number(item.quantity) - Number(item.returned_quantity || 0);
        initialSelections[Number(item.id)] = {
          selected: false,
          quantity: returnable,
          reason: "Product return request",
        };
      });
      setItemsSelection(initialSelections);
      setConsent(false);
    }
  }, [open, order]);

  if (!open) return null;

  const handleCheckboxChange = (itemId: number, checked: boolean) => {
    setItemsSelection(prev => ({
      ...prev,
      [itemId]: {
        ...prev[itemId],
        selected: checked,
      }
    }));
  };

  const handleQtyChange = (itemId: number, newQty: number, maxAllowed: number) => {
    const qty = Math.min(maxAllowed, Math.max(1, newQty));
    setItemsSelection(prev => ({
      ...prev,
      [itemId]: {
        ...prev[itemId],
        quantity: qty,
      }
    }));
  };

  const handleReasonChange = (itemId: number, text: string) => {
    setItemsSelection(prev => ({
      ...prev,
      [itemId]: {
        ...prev[itemId],
        reason: text,
      }
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (submitting) return;

    const selectedPayload = Object.entries(itemsSelection)
      .filter(([, value]) => value.selected)
      .map(([id, value]) => ({
        order_item_id: Number(id),
        requested_quantity: value.quantity,
        reason: value.reason,
      }));

    if (selectedPayload.length === 0) {
      toast.error("Please select at least one item to return.");
      return;
    }

    if (!consent) {
      toast.error("Please accept the terms to proceed.");
      return;
    }

    setSubmitting(true);
    try {
      const res = await requestOrderReturnAction(order.id, selectedPayload);
      if (res.success) {
        toast.success("Return request submitted successfully. Waiting for admin approval.");
        onSuccess();
        onOpenChange(false);
      } else {
        toast.error(res.message || "Failed to submit return request.");
      }
    } catch (err: any) {
      toast.error(err.message || "An error occurred");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/70 z-[60] flex items-center justify-center p-4">
      <div className="bg-white border border-zinc-200 rounded-2xl w-full max-w-2xl shadow-2xl p-6 space-y-4 relative max-h-[90vh] overflow-y-auto">
        <div className="flex justify-between items-center border-b pb-3">
          <h3 className="text-lg font-black text-zinc-900 tracking-tight uppercase">
            Request Return for Order #{order.order_number}
          </h3>
          <button
            onClick={() => onOpenChange(false)}
            className="text-zinc-400 hover:text-zinc-600 font-extrabold text-sm"
          >
            ✕
          </button>
        </div>

        <div className="bg-zinc-50 border border-zinc-200 text-zinc-800 rounded-xl p-3.5 text-xs font-semibold leading-relaxed">
          Please select the items you wish to return and specify the quantities. After review, the admin will approve your request and process any refund due.
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {order.items && order.items.some(item => (Number(item.quantity) - Number(item.returned_quantity || 0) - (order.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)) > 0) && (
            <div className="flex items-center justify-between pb-2 border-b border-zinc-150">
              <span className="text-[10px] font-black tracking-widest text-zinc-450 uppercase">Select items to return</span>
              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="select-all"
                  checked={order.items.filter(item => {
                    const pendingQty = order.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;
                    return (Number(item.quantity) - Number(item.returned_quantity || 0) - pendingQty) > 0;
                  }).every(item => itemsSelection[Number(item.id)]?.selected)}
                  onChange={(e) => {
                    const checked = e.target.checked;
                    setItemsSelection(prev => {
                      const copy = { ...prev };
                      order.items.forEach(item => {
                        const pendingQty = order.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 returnable = Number(item.quantity) - Number(item.returned_quantity || 0) - pendingQty;
                        if (returnable > 0) {
                          copy[Number(item.id)] = {
                            selected: checked,
                            quantity: returnable,
                            reason: copy[Number(item.id)]?.reason || ""
                          };
                        }
                      });
                      return copy;
                    });
                  }}
                  className="accent-zinc-900 size-4 cursor-pointer"
                />
                <label htmlFor="select-all" className="text-xs font-bold text-zinc-800 cursor-pointer select-none">
                  Select All Items (Entire Order)
                </label>
              </div>
            </div>
          )}

          <div className="space-y-3 max-h-[40vh] overflow-y-auto pr-1">
            {order.items?.map((item) => {
              const returnable = Number(item.quantity) - Number(item.returned_quantity || 0);
              const pendingQty = order.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 selection = itemsSelection[Number(item.id)] || { selected: false, quantity: 1, reason: "" };

              if (returnable <= 0) return null;

              const productName = item.product
                ? item.product.name
                : `Product #${item.product_id}`;

              const maxAllowed = returnable - pendingQty;

              return (
                <div key={item.id} className={`p-4 border rounded-xl space-y-3 transition-colors ${selection.selected ? "border-brand-accent bg-zinc-50/50" : "border-zinc-200 bg-white"}`}>
                  <div className="flex items-start gap-3">
                    <input
                      type="checkbox"
                      checked={selection.selected}
                      disabled={maxAllowed <= 0}
                      onChange={(e) => handleCheckboxChange(Number(item.id), e.target.checked)}
                      className="mt-1 accent-zinc-900 size-4 cursor-pointer disabled:opacity-40"
                    />
                    <div className="flex-1 text-sm">
                      <div className="font-extrabold text-zinc-900">{productName}</div>
                      <div className="text-xs text-zinc-550 mt-0.5 space-y-0.5">
                        <p>Price: ৳{item.price} | Ordered: {item.quantity}</p>
                        {Number(item.returned_quantity || 0) > 0 && (
                          <p className="text-rose-600 font-bold">Already Returned: {item.returned_quantity}</p>
                        )}
                        {pendingQty > 0 && (
                          <p className="text-amber-600 font-bold">Return Requested: {pendingQty}</p>
                        )}
                        <p className="font-bold text-zinc-700">Available to Return: {maxAllowed}</p>
                      </div>
                    </div>
                  </div>

                  {selection.selected && (
                    <div className="pl-7 grid grid-cols-1 sm:grid-cols-3 gap-3 items-center">
                      <div className="space-y-1">
                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider block">
                          Return Quantity
                        </label>
                        <div className="flex items-center gap-1.5">
                          <button
                            type="button"
                            onClick={() => handleQtyChange(Number(item.id), selection.quantity - 1, returnable)}
                            className="w-8 h-8 rounded-lg border border-zinc-200 flex items-center justify-center font-bold text-zinc-700 hover:bg-zinc-100"
                          >
                            -
                          </button>
                          <span className="w-8 text-center text-sm font-bold text-zinc-900">
                            {selection.quantity}
                          </span>
                          <button
                            type="button"
                            onClick={() => handleQtyChange(Number(item.id), selection.quantity + 1, returnable)}
                            className="w-8 h-8 rounded-lg border border-zinc-200 flex items-center justify-center font-bold text-zinc-700 hover:bg-zinc-100"
                          >
                            +
                          </button>
                        </div>
                      </div>

                      <div className="sm:col-span-2 space-y-1">
                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-wider block">
                          Reason for returning this item
                        </label>
                        <input
                          type="text"
                          value={selection.reason}
                          onChange={(e) => handleReasonChange(Number(item.id), e.target.value)}
                          placeholder="e.g. Size mismatch, Defective, Wrong color..."
                          className="w-full text-xs p-2 border border-zinc-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-zinc-400 bg-white"
                        />
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          <div className="flex items-center gap-2.5 pt-2 border-t">
            <input
              type="checkbox"
              id="consent"
              checked={consent}
              onChange={(e) => setConsent(e.target.checked)}
              className="accent-zinc-900 size-4 cursor-pointer"
            />
            <label htmlFor="consent" className="text-xs text-zinc-650 font-semibold cursor-pointer select-none">
              I agree to the return and refund policy terms.
            </label>
          </div>

          <div className="flex justify-end gap-2 pt-2">
            <Button
              type="button"
              variant="ghost"
              onClick={() => onOpenChange(false)}
              disabled={submitting}
              className="text-xs h-10 px-5 rounded-xl cursor-pointer uppercase border"
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={submitting || !consent}
              className="bg-brand-accent hover:bg-brand-accent-hover text-white text-xs h-10 px-5 rounded-xl cursor-pointer uppercase font-black"
            >
              {submitting ? "Submitting Request..." : "Submit Return Request"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}