import React, { useState, useEffect } from "react";
import { Modal } from "../ui/modal";
import { CreditCard, Wallet2, HandCoins, CreditCardIcon } from "lucide-react";
import { useGlobalContext } from "@/context/Provider";
import apis from "@/utils/apis";
import { useRouter } from "next/navigation";
import { AppDispatch, RootState } from "@/store/store";
import { useDispatch, useSelector } from "react-redux";
import { cartReset } from "@/store/actions/user/userAction";
import { currency } from "@/lib/utils";

interface PaymentOptionModalProps {
  open: boolean;
  onClose: () => void;
  onSelect: (method: "stripe" | "cod" | "wallet" | "razorpay" | "paytab" | "cashfree") => void;
  price: number;
  data: any;
}

interface PaymentGatewayConfig {
  paymentGateway: "stripe" | "razorpay" | "paytab" | "cashfree";
  stripe?: {
    key: string;
    secret: string;
    webhook: string;
  };
  razorpay?: {
    key: string;
    secret: string;
    bank_account: string;
  };
  cashfree?: {
    client_id: string;
    client_secret: string;
    webhook_secret: string;
  };
}


const PaymentOptionModal: React.FC<PaymentOptionModalProps> = ({
  open,
  onClose,
  onSelect,
  price,
  data
}) => {

  const { Toast, userInfo } = useGlobalContext();
  const { orderDetail } = useSelector(
    (state: RootState) => state.user.profile
  );
  const [walletBalance, setWalletBalance] = useState<number | null>(null);
  const [isWalletSufficient, setIsWalletSufficient] = useState<boolean>(true);
  const [isWalletModalOpen, setIsWalletModalOpen] = useState<boolean>(false);
  const [paymentConfig, setPaymentConfig] = useState<PaymentGatewayConfig | null>(null);
  const router = useRouter();
  const dispatch: AppDispatch = useDispatch();


  useEffect(() => {
    if (open) {
      fetchWalletBalance();
    }
  }, [open]);

  const fetchPaymentConfiguration = async () => {
    try {
      const query = new URLSearchParams({ type: "payment" }).toString();
      const res = await apis.ConfigurationType.listing(query);

      if (res?.data) {
        setPaymentConfig(res.data);
      }
    } catch (error) {
      console.error("Failed to fetch payment configuration:", error);
      Toast.error("Failed to load payment configuration");
    }
  };


  const fetchWalletBalance = async () => {
    try {
      const response = await apis.Wallet.getWalletBalance();
      if (response?.data) {
        setWalletBalance(response?.data?.balance);
        if (response?.data?.balance < price) {
          setIsWalletSufficient(false);
        } else {
          setIsWalletSufficient(true);
        }
      }
    } catch (error) {
      Toast.error(error);
    }
  };

  const options = [
    {
      label: "Pay using Stripe",
      method: "stripe" as const,
      icon: <HandCoins className="w-5 h-5 text-black" />,
      bg: "bg-[#f5f5f5]",
      hover: "hover:bg-gray-200",
      text: "text-black",
    },
    {
      label: "Pay with Wallet",
      method: "wallet" as const,
      icon: <Wallet2 className="w-5 h-5 text-white" />,
      bg: "bg-primary",
      hover: "hover:bg-brand-400",
      text: "text-white",
    },
    {
      label: "Pay using Razorpay",
      method: "razorpay" as const,
      icon: <CreditCardIcon className="w-5 h-5 text-white" />,
      bg: "bg-[#0070F3]",
      hover: "hover:bg-[#005bb5]",
      text: "text-white",
    },
    {
      label: "Pay using PayTabs",
      method: "paytab" as const,
      icon: <CreditCardIcon className="w-5 h-5 text-white" />,
      bg: "bg-[#2b3d51]",
      hover: "hover:bg-[#1a2531]",
      text: "text-white",
    },
    {
      label: "Pay using Cashfree",
      method: "cashfree" as const,
      icon: <CreditCardIcon className="w-5 h-5 text-white" />,
      bg: "bg-[#009b77]",
      hover: "hover:bg-[#007b5e]",
      text: "text-white",
    },
  ];

  const filteredOptions = options.filter(option => {
    if (data?.paymentGateway === "stripe" && option.method === "stripe") {
      return true;
    }
    if (data?.paymentGateway === "razorpay" && option.method === "razorpay") {
      return true;
    }
    if (data?.paymentGateway === "paytab" && option.method === "paytab") {
      return true;
    }
    if (data?.paymentGateway === "cashfree" && option.method === "cashfree") {
      return true;
    }
    if (option.method === "wallet" && userInfo?.appConfiguration?.[0]?.wallet) {
      return true;
    }
    return false;
  });

  useEffect(() => {
    if (open) {
      fetchPaymentConfiguration();
      fetchWalletBalance();
      loadRazorpayScript();
      loadCashfreeScript();
    }
  }, [open]);

  const loadRazorpayScript = () => {
    const script = document.createElement("script");
    script.src = "https://checkout.razorpay.com/v1/checkout.js";
    script.onload = () => console.log("Razorpay script loaded successfully!");
    document.body.appendChild(script);
  };

  const loadCashfreeScript = () => {
    if ((window as any).Cashfree) return;
    const script = document.createElement("script");
    script.src = "https://sdk.cashfree.com/js/v3/cashfree.js";
    script.onload = () => console.log("Cashfree script loaded successfully!");
    document.body.appendChild(script);
  };

  const handlePayWithWallet = async () => {
    if (isWalletSufficient) {
      try {
        const response = await apis.Wallet.payWallet(orderDetail);
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        dispatch(cartReset());
        router.push(`/orderDetail?id=${response?.order?._id}`);
        onSelect("wallet");
      } catch (error) {
        console.error("Error processing wallet payment:", error);
        Toast.error("Something went wrong, please try again");
      }
    } else {
      setIsWalletModalOpen(true);
    }
  };

  const handlePayWithRazorpay = async () => {
    if (!paymentConfig) {
      Toast.error("Payment configuration not loaded");
      return;
    }

    if (!paymentConfig.razorpay?.key) {
      Toast.error("Razorpay key not configured");
      return;
    }
    try {
      const response = await apis.Orders.orderPlace(orderDetail);

      if (response?.is_payment_required === false || response?.is_payment_required === "false") {
        Toast.success(response?.message || "Order placed successfully!");
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        dispatch(cartReset());
        onClose();
        router.push(`/orderDetail?id=${response?.order_id}`);
        return;
      }

      if (response?.order_id || response?.razorpay?.order_id) {
        localStorage.setItem("pending_order_id", response.order_id || response.razorpay.order_id);
      }

      const options = {
        key: paymentConfig.razorpay.key,
        amount: response?.razorpay?.amount,
        currency: response?.razorpay?.currency,
        order_id: response?.razorpay?.id,
        handler: function (paymentResponse: any) {
          onSelect("razorpay");
          router.push(`/orderDetail?id=${response?.razorpay?.order_id}`);
          localStorage.removeItem("cartItems");
          localStorage.removeItem("groceryCartItems");
          setTimeout(() => {
            dispatch(cartReset());
          }, 5000);
        },
        prefill: {
          name: userInfo?.name,
          email: userInfo?.email,
          contact: userInfo?.phone,
        },
        theme: {
          color: "hsl(var(--primary))",
        },
      };

      if (window.Razorpay) {
        const rzp = new window.Razorpay(options);
        rzp.open();
      } else {
        Toast.error("Razorpay script failed to load.");
      }
    } catch (error) {
      console.error("Error processing Razorpay payment:", error);
      Toast.error(error);
    }
  };

  const handlePayWithCashfree = async () => {
    if (!paymentConfig) {
      Toast.error("Payment configuration not loaded");
      return;
    }

    try {
      const response = await apis.Orders.orderPlace(orderDetail);

      if (response?.is_payment_required === false || response?.is_payment_required === "false") {
        Toast.success(response?.message || "Order placed successfully!");
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        dispatch(cartReset());
        onClose();
        router.push(`/orderDetail?id=${response?.order_id}`);
        return;
      }

      if (response?.order_id) {
        localStorage.setItem("pending_order_id", response.order_id);
      }

      if (response?.cashfree) {
        if (!(window as any).Cashfree) {
          Toast.error("Cashfree SDK not available");
          return;
        }

        const isSandbox = !paymentConfig.cashfree?.client_id || paymentConfig.cashfree.client_id.startsWith("TEST");
        const cashfree = (window as any).Cashfree({
          mode: isSandbox ? "sandbox" : "production",
        });

        const checkoutOptions = {
          paymentSessionId: response.cashfree.payment_session_id,
          redirectTarget: "_self",
        };

        cashfree.checkout(checkoutOptions);
      } else {
        Toast.error("Cashfree session not created");
      }
    } catch (error) {
      console.error("Error processing Cashfree payment:", error);
      Toast.error(error);
    }
  };

  return (
    <>
      <Modal
        title="Select Payment Method"
        description="Choose how you would like to pay for your order"
        isOpen={open}
        onClose={onClose}
      >
        <div className="space-y-3">
          {filteredOptions?.map((option) => (
            <button
              key={option.method}
              onClick={() => {
                if (option.method === "wallet") {
                  handlePayWithWallet();
                } else if (option.method === "razorpay") {
                  handlePayWithRazorpay();
                } else if (option.method === "cashfree") {
                  handlePayWithCashfree();
                } else {
                  onSelect(option.method);
                }
              }}
              className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg ${option.bg} ${option.hover} ${option.text} transition-colors duration-200`}
            >
              <span>{option.icon}</span>
              <span className="font-medium">{option.label}</span>
            </button>
          ))}
        </div>
      </Modal>
      {isWalletModalOpen && (
        <Modal
          title="Insufficient Wallet Balance"
          description="Your wallet balance is insufficient to complete this payment."
          isOpen={isWalletModalOpen}
          onClose={() => setIsWalletModalOpen(false)}
        >
          <div className="text-center py-8 space-y-5">
            <p className="text-xl font-semibold text-gray-800">
              Your wallet balance is{" "}
              <span className="font-bold text-green-600">{currency}{Number(walletBalance?.toFixed(2))}</span>.
            </p>
            <p className="text-xl font-semibold text-gray-800">
              You need{" "}
              <span className="font-bold text-red-600">{currency}{price}</span> to complete the payment.
            </p>
            <div className="space-y-3">
              <button
                className="w-full bg-primary text-white py-4 rounded-lg shadow-lg hover:bg-brand-400 transition-colors duration-200"
                onClick={() => router.push("/wallet")}
              >
                Add Money to Wallet
              </button>
              <button
                className="w-full bg-gray-300 text-gray-700 py-4 rounded-lg shadow-md hover:bg-gray-200 transition-colors duration-200"
                onClick={() => setIsWalletModalOpen(false)}
              >
                Cancel
              </button>
            </div>
          </div>
        </Modal>
      )}
    </>
  );
};

export default PaymentOptionModal;