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";
import { logEvent } from "@/utils/analytics";


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",
    },
    {
      label: "Cash on Delivery",
      method: "cod" as const,
      icon: <HandCoins className="w-5 h-5 text-white" />,
      bg: "bg-[#009669]",
      hover: "hover:bg-[#007d58]",
      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;
    }
    if (option.method === "cod") {
      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);
        if (typeof window !== "undefined") {
          (window as any).hasCompletedPurchase = true;
        }
        logEvent("purchase", {
          transaction_id: response?.order?._id || "wallet_" + Date.now(),
          value: price,
          currency: "INR",
          items: orderDetail?.cart_items?.map((item: any) => ({
            item_id: item.food_id || item.id,
            item_name: item.name || item.title,
            price: parseFloat(item.price || 0),
            quantity: item.no_of_quantity || item.quantity || 1
          }))
        });
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        dispatch(cartReset());
        onClose();
        router.push(`/orderDetail?id=${response?.order?._id}`);
        onSelect("wallet");
      } catch (error) {
        console.error("Error processing wallet payment:", error);
        Toast.error(error);
      }
    } 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!");
        if (typeof window !== "undefined") {
          (window as any).hasCompletedPurchase = true;
        }
        logEvent("purchase", {
          transaction_id: response?.order_id || "free_" + Date.now(),
          value: price,
          currency: "INR",
          items: orderDetail?.cart_items?.map((item: any) => ({
            item_id: item.food_id || item.id,
            item_name: item.name || item.title,
            price: parseFloat(item.price || 0),
            quantity: item.no_of_quantity || item.quantity || 1
          }))
        });
        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) {
          if (typeof window !== "undefined") {
            (window as any).hasCompletedPurchase = true;
          }
          logEvent("purchase", {
            transaction_id: response?.razorpay?.order_id || paymentResponse?.razorpay_payment_id || "rzp_" + Date.now(),
            value: price,
            currency: "INR",
            items: orderDetail?.cart_items?.map((item: any) => ({
              item_id: item.food_id || item.id,
              item_name: item.name || item.title,
              price: parseFloat(item.price || 0),
              quantity: item.no_of_quantity || item.quantity || 1
            }))
          });
          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);
        onClose();
        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!");
        if (typeof window !== "undefined") {
          (window as any).hasCompletedPurchase = true;
        }
        logEvent("purchase", {
          transaction_id: response?.order_id || "free_" + Date.now(),
          value: price,
          currency: "INR",
          items: orderDetail?.cart_items?.map((item: any) => ({
            item_id: item.food_id || item.id,
            item_name: item.name || item.title,
            price: parseFloat(item.price || 0),
            quantity: item.no_of_quantity || item.quantity || 1
          }))
        });
        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",
        };

        if (typeof window !== "undefined") {
          (window as any).hasCompletedPurchase = true;
        }
        logEvent("purchase", {
          transaction_id: response?.order_id || "cf_" + Date.now(),
          value: price,
          currency: "INR",
          items: orderDetail?.cart_items?.map((item: any) => ({
            item_id: item.food_id || item.id,
            item_name: item.name || item.title,
            price: parseFloat(item.price || 0),
            quantity: item.no_of_quantity || item.quantity || 1
          }))
        });

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

  const handlePayWithCOD = async () => {
    try {
      const payload = {
        ...orderDetail,
        payment_type: "cod",
      };
      const response = await apis.Orders.orderPlace(payload);
      Toast.success(response?.message || "Order placed with Cash on Delivery!");
      if (typeof window !== "undefined") {
        (window as any).hasCompletedPurchase = true;
      }
      const orderId =
        response?.data?._id ||
        response?.data?.id ||
        response?._id ||
        response?.order_id ||
        response?.data?.order_id;
      logEvent("purchase", {
        transaction_id: orderId || "cod_" + Date.now(),
        value: price,
        currency: "INR",
        items: orderDetail?.cart_items?.map((item: any) => ({
          item_id: item.food_id || item.id,
          item_name: item.name || item.title,
          price: parseFloat(item.price || 0),
          quantity: item.no_of_quantity || item.quantity || 1
        }))
      });
      onClose();
      router.push(`/orderDetail?id=${orderId}`);
      setTimeout(() => {
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        dispatch(cartReset());
      }, 100);
    } catch (error) {
      console.error("Error processing COD order:", 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={() => {
                logEvent("add_payment_info", {
                  payment_type: option.method,
                  value: price,
                  currency: "INR"
                });
                if (option.method === "wallet") {
                  handlePayWithWallet();
                } else if (option.method === "cod") {
                  handlePayWithCOD();
                } 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;