"use client";
import PaymentImg from "@/assets/images/Subtract.png";
import {
  ArrowRight,
  Bike,
  ChevronRight,
  ChevronDown,
  ChevronUp,
  Info,
} from "lucide-react";
import Image from "next/image";
import Profile from "@/assets/images/offer.png";
import { useGlobalContext } from "@/context/Provider";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { useEffect, useState } from "react";
import apis from "@/utils/apis";
import {
  cartReset,
  customerOrderDetail,
  orderDetailReset,
} from "@/store/actions/user/userAction";
import { useRouter } from "next/navigation";
import PaymentModal from "../payment/page";
import PaymentOptionModal from "../payment/PaymentOptionModal";
import SchedulingComponent from "../SchedulingComponent/page";
import BottomSheetCoupon from "./CouponModal";
import { currency } from "@/lib/utils";
import { logEvent } from "@/utils/analytics";

import { Card } from "@/components/ui/card";

interface PaymentGatewayConfig {
  paymentGateway: "stripe" | "razorpay" | "paytab" | "cashfree";
  paytab?: {
    key: string;
    secret: string;
    webhook: string;
  };
  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 CheckoutSlip = ({
  data,
  coupons,
  deliverType,
  useLoyaltyPoints,
  usePromoWallet,
  promoWalletBalance,
  surcharges,
}: any) => {
  const isDelivery = deliverType === "driver" || deliverType === "delivery";
  const isTakeaway = deliverType === "takeaway";

  const applicableSurcharges = (surcharges || []).filter((c: any) => {
    if (!c.order_type || c.order_type === "both") return true;
    if (isDelivery && c.order_type === "delivery") return true;
    if (isTakeaway && c.order_type === "takeaway") return true;
    return false;
  });

  const surchargesTotal = applicableSurcharges.reduce((sum: number, charge: any) => {
    return sum + (Number(charge.value || charge.amount) || 0);
  }, 0);

  const surchargeItems = applicableSurcharges.filter(
    (c: any) => c.charge_type === "surcharge" || c.surcharge_type === "surcharge" || (!c.charge_type && !c.surcharge_type && c.name?.toLowerCase().includes("rain"))
  );
  const extraChargeItems = applicableSurcharges.filter(
    (c: any) => c.charge_type === "extra_charge" || c.surcharge_type === "extra_charge" || (!c.charge_type && !c.surcharge_type && !c.name?.toLowerCase().includes("rain"))
  );

  const surchargeSum = surchargeItems.reduce((sum: number, c: any) => sum + (Number(c.value || c.amount) || 0), 0);
  const extraChargeSum = extraChargeItems.reduce((sum: number, c: any) => sum + (Number(c.value || c.amount) || 0), 0);

  const [showSurchargeDetails, setShowSurchargeDetails] = useState(false);
  const [showExtraChargeDetails, setShowExtraChargeDetails] = useState(false);

  const distance: any =
    typeof window !== "undefined" && localStorage.getItem("distance");
  const router = useRouter();
  const { Toast, locationData, userInfo } = useGlobalContext();
  const isLoggedIn = !!userInfo?.access_token;
  const [deliveryDistance, setDeliveryDistance] = useState(null) as any;
  const [isOpen, setIsOpen] = useState(false);

  const [addresses, setAddresses] = useState<any[]>([]);
  const [loadingAddress, setLoadingAddress] = useState(true);
  const { cartItems, orderDetail } = useSelector(
    (state: RootState) => state.user.profile
  );
  const [isPlacingOrder, setIsPlacingOrder] = useState(false);
  const [paymentConfig, setPaymentConfig] = useState<PaymentGatewayConfig | null>(null);
  const [clientSecret, setClientSecret] = useState("");

  const dispatch: AppDispatch = useDispatch();
  const [subTotal, setSubTotal] = useState(0);
  const [discount, setDiscount] = useState(null) as any;
  const [formData, setFormData] = useState({
    name: "",
    card: "",
    date: "",
    cvv: "",
  });
  const [schedulingData, setSchedulingData] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [showPaymentOptions, setShowPaymentOptions] = useState(false);
  const [selectedPaymentType, setSelectedPaymentType] = useState<"stripe" | "cod" | "wallet" | 'razorpay' | "paytab" | "cashfree" | null>(null);
  const [restaurantType, setRestaurantType] = useState<string | null>(null);
  const [enablePayButton, setEnablePayButton] = useState<boolean>(false);
  const [orderTakingRange, setOrderTakingRange] = useState(null) as any;

  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) {
      Toast.error(error);
    }
  };

  useEffect(() => {
    fetchPaymentConfiguration();
  }, []);


  const fetchAddresses = async () => {
    try {
      const res = await apis.Profile.getAddress();
      setAddresses(res?.data || []);
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoadingAddress(false);
    }
  };

  useEffect(() => {
    if (userInfo?.access_token) {
      fetchAddresses();
    }
  }, [userInfo?.access_token]);

  const effectiveDistance = deliveryDistance > 1 ? deliveryDistance : 1;


  useEffect(() => {
    const subTotalPrice =
      cartItems?.length > 0 &&
      cartItems.reduce((sum: any, item: any) => sum + parseFloat(item.priceQuantity), 0);
    const roundedSubTotal = subTotalPrice ? parseFloat(subTotalPrice.toFixed(2)) : 0;

    setSubTotal(roundedSubTotal);
  }, [cartItems]);

  useEffect(() => {
    if (orderDetail && distance) {
      let distanced = JSON.parse(distance);
      let lat1 = Number(orderDetail?.delivery_address?.lat) || Number(locationData?.lat);
      let lat2 = Number(distanced?.lat);
      let long1 = Number(orderDetail?.delivery_address?.long) || Number(locationData?.lng);
      let long2 = Number(distanced?.long);
      getDistanceInKm({ lat1, lat2, long1, long2 });
    }
  }, [orderDetail, distance]);

  const getTax = (tax: any) => {
    const taxNum = Number(tax) || 0;
    const taxAmount = (subTotal * taxNum) / 100;
    return taxAmount.toFixed(2);
  };

  const applyCoupon = async (item: any) => {
    if (!isLoggedIn) {
      Toast.error("Please log in to apply coupon");
      return;
    }
    if (subTotal < item?.minimum_booking_amount) {
      Toast.error(`Minimum order amount is ${currency}${item?.minimum_booking_amount}`);
      return;
    }
    try {
      let urlSearchParam = new URLSearchParams();
      urlSearchParam.set("promo_code", item?.code);
      urlSearchParam.set("min_food_amount", item?.minimum_booking_amount);
      const resId = typeof window !== "undefined" && localStorage.getItem("restoId");
      if (resId) {
        try {
          urlSearchParam.set("restaurant_id", JSON.parse(resId));
        } catch (e) {
          urlSearchParam.set("restaurant_id", resId);
        }
      }
      const apiRes = await apis.Auth.applyCoupon(urlSearchParam.toString());
      setDiscount(apiRes?.data);
      logEvent("apply_promo_code", {
        coupon_code: item?.code,
        discount_value: apiRes?.data?.maximum_discount_amount || 0
      });
    } catch (error) { }
  };

  const isAddressAvailable = addresses.length > 0;

  async function getDistanceInKm({ lat1, lat2, long1, long2 }: any) {
    if (!window.google || !window.google.maps) return "N/A";
    const directionsService = new window.google.maps.DirectionsService();

    const origin = { lat: lat1, lng: long1 };
    const destination = { lat: lat2, lng: long2 };

    try {
      const result = await directionsService.route({
        origin,
        destination,
        travelMode: window.google.maps.TravelMode.DRIVING,
        provideRouteAlternatives: false,
      });

      let totalDistanceMeters = 0;

      if (result?.routes[0]?.legs) {
        result.routes[0].legs.forEach((leg: any) => {
          if (leg.distance?.value) {
            totalDistanceMeters += leg.distance.value;
          }
        });

        const km = (totalDistanceMeters / 1000).toFixed(2);
        setDeliveryDistance(km);
        return km;
      }

      return "N/A";
    } catch (err) {
      console.error("Error getting driving distance:", err);
      return "N/A";
    }
  }

  const isFreeDelivery = data?.isFreeDeliveryAvailable && subTotal >= (data?.freeDeliveryMinOrderAmount || 0);

  const deliveryFee =
    deliverType === "driver" && !isFreeDelivery
      ? Number(effectiveDistance) * (data?.distance_per_km || 0) + (data?.base_fee || 0)
      : 0;



  const salesCommission = 0;

  const grossTotal =
    (subTotal || 0) +
    (Number(data?.app_commission) || 0) +
    (deliverType === "driver" ? (Number(deliveryFee) || 0) : 0) +
    (Number(getTax(data?.tax?.tax_percentage)) || 0) +
    (deliverType === "driver" ? (Number(orderDetail?.tip_amount) || 0) : 0) -
    (Number(discount?.maximum_discount_amount) || 0) +
    (Number(surchargesTotal) || 0) +
    (Number(salesCommission) || 0);

  const loyaltyDiscount = useLoyaltyPoints
    ? Math.min(grossTotal * 0.10, userInfo?.loyalty_wallet?.balance || 0)
    : 0;

  const promoDiscount = usePromoWallet
    ? Math.min(grossTotal - loyaltyDiscount, promoWalletBalance || 0)
    : 0;

  const Totalfee = Math.max(0, grossTotal - loyaltyDiscount - promoDiscount);


  useEffect(() => {
    if (!data) return;

    const delivery_fee =
      deliverType === "driver" && !isFreeDelivery
        ? Number(effectiveDistance) * (data?.distance_per_km || 0) + (data?.base_fee || 0)
        : 0;

    let payload: any = {
      cart_amount: subTotal,
      platform_fee: data?.app_commission || 0,
      tax_amount: Number(getTax(data?.tax?.tax_percentage)) || 0,
      coupon_amount: discount?.maximum_discount_amount || 0,
      total_amount: Number(grossTotal?.toFixed(2)) || 0,
      loyalty_point_redeemed: loyaltyDiscount ? Number(loyaltyDiscount.toFixed(2)) : 0,
      promo_wallet_redeemed: usePromoWallet,
      promo_wallet_amount: promoDiscount ? Number(promoDiscount.toFixed(2)) : 0,
      sales_commission: Number(salesCommission.toFixed(2)) || 0,
      surcharges: (applicableSurcharges || []).map((c: any) => ({
        surcharge_id: c._id
      })),
      ...schedulingData,
    };

    if (deliverType === "driver") {
      payload = {
        ...payload,
        delivery_fee,
        delivery_distance: Number(deliveryDistance || 0),
        delivery_price_per_km: data?.distance_per_km || 0,
        is_delivery_available: data?.is_delivery_available ?? true,
      };
    } else {
      payload = {
        ...payload,
        delivery_fee: 0,
        delivery_distance: 0,
        delivery_price_per_km: 0,
      };
    }

    if (discount) {
      payload.coupon_id = discount?._id;
    }

    if (
      payload.total_amount !== orderDetail?.total_amount ||
      payload.cart_amount !== orderDetail?.cart_amount ||
      payload.tax_amount !== orderDetail?.tax_amount ||
      payload.delivery_fee !== orderDetail?.delivery_fee ||
      payload.coupon_amount !== orderDetail?.coupon_amount ||
      JSON.stringify(payload.surcharges) !== JSON.stringify(orderDetail?.surcharges)
    ) {
      dispatch(customerOrderDetail(payload));
    }
  }, [
    subTotal,
    data,
    discount,
    orderDetail?.tip_amount,
    schedulingData,
    deliverType,
    deliveryDistance,
    useLoyaltyPoints,
    loyaltyDiscount,
    usePromoWallet,
    promoDiscount,
    promoWalletBalance,
    salesCommission,
    surcharges,
    surchargesTotal
  ]);



  useEffect(() => {
    if (cartItems && cartItems.length > 0) {
      const hasRestaurant = cartItems.some(
        (item: any) => item.restaurant_type === "restaurant"
      );
      const hasHomeCookedMeal = cartItems.some(
        (item: any) => item.restaurant_type === "home-cooked-meal"
      );
      if (hasRestaurant) {
        setRestaurantType("restaurant");
      } else if (hasHomeCookedMeal) {
        setRestaurantType("home-cooked-meal");
      } else {
        setRestaurantType("other");
      }
    } else {
      setRestaurantType(null);
    }
  }, [cartItems]);

  const isHomeCookedMeal = restaurantType === "home-cooked-meal";




  const handleCard = async (method = "card") => {
    try {
      let payload = {
        ...orderDetail,
        payment_type: method,
      };
      const apiRes = await apis.Orders.orderPlace(payload);

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

      if (apiRes?.paytab?.redirect_url) {
        if (apiRes?.order_id) {
          localStorage.setItem("pending_order_id", apiRes.order_id);
        }
        window.location.href = apiRes.paytab.redirect_url;
        return;
      }

      if (apiRes?.client_secret) {
        setClientSecret(apiRes.client_secret);
        sessionStorage.setItem('clientSecret', apiRes.client_secret);
        sessionStorage.setItem('orderId', apiRes?.data?._id);
        if (apiRes?.data?._id) {
          localStorage.setItem("pending_order_id", apiRes.data._id);
        }
        setIsOpen(true);
      }
    } catch (error) {
      Toast.error(error);
    }
  };

  useEffect(() => {
    if (data?.order_taking_range) {
      setOrderTakingRange(data.order_taking_range || 0);
    } else if (userInfo?.appConfiguration && userInfo.appConfiguration.length > 0) {
      const range = userInfo.appConfiguration[0]?.order_taking_range;
      setOrderTakingRange(range || 0);
    }
  }, [userInfo, data]);


  useEffect(() => {
    if (deliverType === 'takeaway') {
      setEnablePayButton(true);
    } else if (orderTakingRange && deliveryDistance !== null && orderTakingRange >= Number(deliveryDistance)) {
      setEnablePayButton(true);
    } else {
      setEnablePayButton(false);
    }
  }, [deliveryDistance, orderTakingRange, deliverType]);


  const handlePayButton = () => {
    if (isHomeCookedMeal || Totalfee === 0) {
      handleDirectOrderPlace();
    } else {
      setShowPaymentOptions(true);
    }
  };

  const loadRazorpayScript = () => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = "https://checkout.razorpay.com/v1/checkout.js";
      script.onload = () => resolve(true);
      script.onerror = () => resolve(false);
      document.body.appendChild(script);
    });
  };

  const loadCashfreeScript = () => {
    return new Promise((resolve) => {
      if ((window as any).Cashfree) {
        resolve(true);
        return;
      }
      const script = document.createElement("script");
      script.src = "https://sdk.cashfree.com/js/v3/cashfree.js";
      script.onload = () => resolve(true);
      script.onerror = () => resolve(false);
      document.body.appendChild(script);
    });
  };

  const handleDirectOrderPlace = async () => {
    if (isHomeCookedMeal && !schedulingData) {
      Toast.error("Please select a delivery schedule");
      return;
    }

    setIsPlacingOrder(true);
    try {
      const payload = {
        ...orderDetail,
        // callback_url: window.location.origin + "/payment-callback"
      };
      const apiRes = await apis.Orders.orderPlace(payload);

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

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

      if (apiRes?.paytab?.redirect_url) {
        window.location.href = apiRes.paytab.redirect_url;
        return;
      }

      if (paymentConfig?.paymentGateway === "cashfree" && apiRes?.cashfree) {
        const scriptLoaded = await loadCashfreeScript();
        if (!scriptLoaded || !(window as any).Cashfree) {
          Toast.error("Cashfree SDK failed to load");
          setIsPlacingOrder(false);
          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: apiRes.cashfree.payment_session_id,
          redirectTarget: "_self",
        };

        cashfree.checkout(checkoutOptions);
        return;
      }

      if (apiRes?.razorpay) {
        const scriptLoaded = await loadRazorpayScript();
        if (!scriptLoaded) {
          Toast.error("Razorpay SDK failed to load");
          setIsPlacingOrder(false);
          return;
        }

        const options = {
          key: paymentConfig?.razorpay?.key,
          amount: apiRes.razorpay.amount,
          currency: apiRes.razorpay.currency,
          name: "ReadyEats",
          description: "Order Payment",
          order_id: apiRes.razorpay.id,
          handler: async function (response: any) {
            Toast.success("Payment successful!");
            dispatch(orderDetailReset());
            dispatch(cartReset());
            localStorage.clear();
            router.push("/orderDetail?id=" + apiRes.razorpay.order_id);
          },
          prefill: {
            name: userInfo?.name || "",
            email: userInfo?.email || "",
            contact: userInfo?.phone || "",
          },
          theme: {
            color: "hsl(var(--primary))",
          },
        };

        const razorpay = new (window as any).Razorpay(options);
        razorpay.open();
        razorpay.on('payment.failed', function (response: any) {
          Toast.error(response.error.description);
          setIsPlacingOrder(false);
        });
        return;
      }

      Toast.success("Order placed successfully!");

      dispatch(orderDetailReset());
      dispatch(cartReset());
      localStorage.clear();

      router.push("/orderDetail?id=" + apiRes?.data?._id);
    } catch (error) {
      Toast.error(error);
      setIsPlacingOrder(false);
    }
  };



  return (
    <>
      {/* Free Delivery Note */}
      {data?.isFreeDeliveryAvailable && deliverType === "driver" && (
        <div className={`mb-4 p-3 rounded-2xl border flex items-center gap-3 transition-all duration-300 ${subTotal >= (data.freeDeliveryMinOrderAmount || 0) ? 'bg-green-50 border-green-100' : 'bg-brand-50 border-primary/10'}`}>
          <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${subTotal >= (data.freeDeliveryMinOrderAmount || 0) ? 'bg-green-100 text-green-600' : 'bg-white shadow-sm text-primary'}`}>
            <Bike size={20} />
          </div>
          <div className="flex-1">
            {subTotal >= (data.freeDeliveryMinOrderAmount || 0) ? (
              <>
                <h4 className="text-xs font-extrabold text-green-900">Free Delivery Unlocked!</h4>
                <p className="text-[10px] text-green-600 font-medium leading-relaxed mt-0.5">
                  Your order qualifies for free delivery.
                </p>
              </>
            ) : (
              <>
                <h4 className="text-xs font-extrabold text-primary">Free Delivery</h4>
                <p className="text-[10px] text-gray-600 font-medium leading-relaxed mt-0.5">
                  Add {currency}{(data.freeDeliveryMinOrderAmount || 0) - subTotal} more to get <span className="text-primary font-bold">FREE</span> delivery.
                </p>
                {/* Progress Bar */}
                <div className="mt-2 w-full bg-gray-100 h-1 rounded-full overflow-hidden">
                  <div
                    className="bg-primary h-full transition-all duration-500"
                    style={{ width: `${Math.min((subTotal / (data.freeDeliveryMinOrderAmount || 1)) * 100, 100)}%` }}
                  />
                </div>
              </>
            )}
          </div>
        </div>
      )}

      <Card className="border-gray-100 shadow-sm overflow-hidden max-w-[345px]">
        <div className="p-5">
          <h3 className="font-semibold text-gray-900 mb-4 text-base">
            Offers & Benefits
          </h3>

          {/* Coupons List */}
          <div className="space-y-3 mb-4">
            {coupons?.slice(0, 2)?.map((item: any) => {
              const isApplied = discount?._id === item?._id;
              return (
                <div
                  key={item?._id}
                  className={`border rounded-xl p-3 transition-all ${isApplied
                    ? "border-primary bg-brand-50"
                    : "border-gray-200 hover:border-brand-200"
                    }`}
                >
                  <div className="flex items-start gap-3">
                    <div className="w-10 h-10 shrink-0 flex items-center justify-center">
                      <Image
                        src={Profile}
                        alt="offer"
                        className="w-full h-full object-contain"
                      />
                    </div>
                    <div className="flex-1 min-w-0">
                      <h4 className={`font-semibold text-sm ${isApplied ? "text-primary" : "text-gray-800"}`}>
                        {item?.code}
                      </h4>
                      <p className="text-xs text-gray-500 mt-0.5 line-clamp-2">
                        {item?.description}
                      </p>
                    </div>
                    <button
                      disabled={!isLoggedIn}
                      onClick={() =>
                        discount ? setDiscount(null) : applyCoupon(item)
                      }
                      title={!isLoggedIn ? "Please log in to apply coupon" : ""}
                      className={`shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
                        !isLoggedIn
                          ? "bg-primary/50 text-white cursor-not-allowed"
                          : isApplied
                          ? "bg-red-500 text-white hover:bg-red-600"
                          : "bg-primary text-white hover:bg-primary/90"
                      }`}
                    >
                      {isApplied ? "Remove" : "Apply"}
                    </button>
                  </div>
                </div>
              );
            })}
          </div>

          {/* View More Button */}
          <button
            onClick={() => setIsModalOpen(true)}
            className="w-full flex items-center justify-center gap-1 text-sm text-gray-600 hover:text-primary font-medium py-2 border-t border-gray-100 transition-colors"
          >
            <span>View more coupons</span>
            <ChevronRight size={16} />
          </button>
        </div>
      </Card>

      <BottomSheetCoupon
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        coupons={coupons}
        applyCoupon={applyCoupon}
        discount={discount}
        setDiscount={setDiscount}
      />


      {isHomeCookedMeal && (
        <div className="rounded-lg my-2 ">
          <SchedulingComponent onChange={(data) => setSchedulingData(data)} />
        </div>
      )}

      <div className="w-[345px] h-auto flex flex-col gap-2.5 p-4 relative z-10">
        <div
          className="absolute inset-0 -z-10"
          style={{
            backgroundImage: `url(${PaymentImg.src})`,
            backgroundSize: "100% 100%",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat",
          }}
        />
        <div className="w-full flex justify-start text-sm font-semibold text-white">
          Payment
        </div>
        {deliverType === "driver" && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Distance</span>
            <span>{effectiveDistance}km</span>
          </div>
        )}
        <div className="w-full flex flex-row justify-between text-sm text-white">
          <span>Subtotal</span>
          <span>{currency}{subTotal}</span>
        </div>
        {discount && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Coupon</span>
            <span>-{currency}{discount?.maximum_discount_amount}</span>
          </div>
        )}

        {(data?.app_commission ?? 0) > 0 && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Platform fee</span>
            <span>{currency}{data?.app_commission}</span>
          </div>
        )}
        {orderDetail?.tip_amount > 0 && deliverType === "driver" && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Driver Tip</span>
            <span>{currency}{Number(orderDetail?.tip_amount)}</span>
          </div>
        )}
        {deliverType === "driver" && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Delivery fee</span>
            <span>
              {currency}
              {deliveryFee.toFixed(2)}
            </span>
          </div>
        )}
        {(data?.tax?.tax_percentage ?? 0) > 0 && Number(getTax(data?.tax?.tax_percentage)) > 0 && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>
              {data?.tax?.tax_keyword}({data?.tax?.tax_percentage}%)
            </span>
            <span>{currency}{getTax(data?.tax?.tax_percentage)}</span>
          </div>
        )}
        {/* Active Surcharges (Surcharge type) */}
        {surchargeSum > 0 && (
          <div className="w-full flex flex-col gap-1 select-none">
            <div
              onClick={() => setShowSurchargeDetails(!showSurchargeDetails)}
              className="flex justify-between items-center text-sm text-white cursor-pointer hover:opacity-90 transition-opacity"
            >
              <span className="flex items-center gap-1.5">
                Surcharges
                {showSurchargeDetails ? <ChevronUp size={14} className="text-white/80" /> : <ChevronDown size={14} className="text-white/80" />}
              </span>
              <span className="font-semibold">{currency}{surchargeSum.toFixed(2)}</span>
            </div>
            {showSurchargeDetails && (
              <div className="pl-3 pr-1 py-1 bg-white/10 rounded-lg flex flex-col gap-1 text-white/90">
                {surchargeItems.map((charge: any) => (
                  <div key={charge._id} className="flex justify-between items-center text-xs">
                    <span>{charge.name}</span>
                    <span>{currency}{Number(charge.value || charge.amount || 0).toFixed(2)}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* Active Extra Charges (Extra Charge type) */}
        {extraChargeSum > 0 && (
          <div className="w-full flex flex-col gap-1 select-none">
            <div
              onClick={() => setShowExtraChargeDetails(!showExtraChargeDetails)}
              className="flex justify-between items-center text-sm text-white cursor-pointer hover:opacity-90 transition-opacity"
            >
              <span className="flex items-center gap-1.5">
                Extra Charges
                {showExtraChargeDetails ? <ChevronUp size={14} className="text-white/80" /> : <ChevronDown size={14} className="text-white/80" />}
              </span>
              <span className="font-semibold">{currency}{extraChargeSum.toFixed(2)}</span>
            </div>
            {showExtraChargeDetails && (
              <div className="pl-3 pr-1 py-1 bg-white/10 rounded-lg flex flex-col gap-1 text-white/90">
                {extraChargeItems.map((charge: any) => (
                  <div key={charge._id} className="flex justify-between items-center text-xs">
                    <span>{charge.name}</span>
                    <span>{currency}{Number(charge.value || charge.amount || 0).toFixed(2)}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
        {/* {(data?.sales_commission_percentage ?? 0) > 0 && (
          <div className="w-full flex flex-row justify-between text-sm text-white">
            <span>Sales Commission ({data?.sales_commission_percentage}%)</span>
            <span>{currency}{salesCommission.toFixed(2)}</span>
          </div>
        )} */}
        <div className="w-full h-px border-t border-dashed border-t-white-600"></div>
        <div className="w-full flex flex-row justify-between text-sm font-semibold text-white">
          <span>Total</span>
          <span>{currency}{Number(grossTotal?.toFixed(2))}</span>
        </div>
        {(useLoyaltyPoints && loyaltyDiscount > 0 || usePromoWallet && promoDiscount > 0) && (
          <>
            {useLoyaltyPoints && loyaltyDiscount > 0 && (
              <div className="w-full flex flex-row justify-between text-sm text-white">
                <span>Loyalty Discount</span>
                <span>-{currency}{loyaltyDiscount.toFixed(2)}</span>
              </div>
            )}
            {usePromoWallet && promoDiscount > 0 && (
              <div className="w-full flex flex-row justify-between text-sm text-white">
                <span>Promo Wallet Discount</span>
                <span>-{currency}{promoDiscount.toFixed(2)}</span>
              </div>
            )}
            <div className="w-full h-px border-t border-dashed border-t-white-600 my-1"></div>
            <div className="w-full flex flex-row justify-between text-sm font-bold text-white">
              <span>Payable Amount</span>
              <span>{currency}{Number(Totalfee?.toFixed(2))}</span>
            </div>
          </>
        )}
      </div>

      {isLoggedIn && deliverType !== 'takeaway' && !isAddressAvailable && !loadingAddress && (
        <div className="mt-3 p-3 w-[345px] bg-brand-100 border-l-4 border-red-600 text-red-600 rounded-md text-sm">
          <span className="font-medium">📍 Address Required:</span> Please add a delivery address to proceed with the payment.
        </div>
      )}

      {isLoggedIn && isAddressAvailable && !enablePayButton && deliverType === 'driver' && deliveryDistance !== null && (
        <div className="mt-3 p-3 w-[345px] bg-red-50 border-l-4 border-red-600 text-red-600 rounded-md text-sm">
          <span className="font-medium flex items-center gap-1"><Info size={16} /> This location is outside the vendor/store's delivery range. Please select an address within {orderTakingRange}km</span>
        </div>
      )}

      {!isLoggedIn && (
        <div className="mt-3 p-3 w-[345px] bg-red-50 border-l-4 border-red-600 text-red-600 rounded-md text-sm">
          <span className="font-medium">Login Required:</span> Please log in to proceed with your order.
        </div>
      )}

      <button
        className="bg-primary w-[345px] text-white flex items-center justify-center rounded-lg mt-4 py-2 text-sm font-medium gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
        onClick={handlePayButton}
        disabled={isPlacingOrder || !isLoggedIn || (deliverType !== 'takeaway' && !isAddressAvailable) || !enablePayButton}
      >
        {isPlacingOrder ? (
          "Placing Order..."
        ) : (
          <>
            {isHomeCookedMeal ? "Place Order" : "Pay"} {currency}{Number(Totalfee?.toFixed(2))} <ArrowRight size={20} />
          </>
        )}
      </button>



      {showPaymentOptions && (
        <PaymentOptionModal
          open={showPaymentOptions}
          onClose={() => setShowPaymentOptions(false)}
          onSelect={(method) => {
            setSelectedPaymentType(method);
            setShowPaymentOptions(false);

            if (method === "stripe") {
              handleCard("card");
            } else if (method === "paytab") {
              handleCard("paytab");
            } else if (method === "cashfree") {
              setSelectedPaymentType("cashfree");
            }
          }}
          price={Number(Totalfee?.toFixed(2))}
          data={data}
        />
      )}
      {isOpen && paymentConfig && <PaymentModal
        setOpen={setIsOpen}
        open={isOpen}
        price={Number(Totalfee?.toFixed(2))}
        clientSecret={clientSecret}
        stripePublishableKey={paymentConfig.stripe?.key} />}
    </>
  );
};
export default CheckoutSlip;