"use client";
import PaymentImg from "@/assets/images/Subtract.png";
import {
  ArrowRight,
  ChevronRight,
  Currency,
  MessageSquare,
  Phone,
  Star,
} from "lucide-react";
import Image from "next/image";
import Profile from "@/assets/images/offer.png";
import { Icons } from "../icons";
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 { Button } from "react-day-picker";

import { useRouter } from "next/navigation";
import { currency } from "@/lib/utils";

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

  const { cartItems, orderDetail } = useSelector(
    (state: RootState) => state.user.profile
  );
  const dispatch: AppDispatch = useDispatch();
  const [subTotal, setSubTotal] = useState(0);
  const [discount, setDiscount] = useState(null) as any;

  useEffect(() => {
    const subTotalPrice =
      cartItems?.length > 0 &&
      cartItems.reduce((sum: any, item: any) => sum + item.price, 0);
    setSubTotal(Number(subTotalPrice));
  }, [cartItems]);

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

  const getTax = (tax: any) => {
    const taxAmount = (subTotal * tax) / 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);
    } catch (error) { }
  };

  function getDistanceInKm({ lat1, lat2, long1, long2 }: any) {
    const R = 6371;
    const dLat = deg2rad(lat2 - lat1);
    const dLon = deg2rad(long2 - long1);

    const a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(lat1) *
      Math.cos(deg2rad(lat2)) *
      Math.sin(dLon / 2) *
      Math.sin(dLon / 2);

    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    const result = R * c;
    setDeliveryDistance(result?.toFixed(2));
    return result?.toFixed(2);
  }

  function deg2rad(deg: number): number {
    return deg * (Math.PI / 180);
  }
  const salesCommission = 0;

  const Totalfee =
    Number(deliveryDistance) * data?.distance_per_km +
    data?.base_fee +
    subTotal +
    data?.app_commission +
    Number(getTax(data?.tax?.tax_percentage)) +
    Number(orderDetail?.tip_amount) -
    (discount?.maximum_discount_amount || 0) +
    salesCommission;

  useEffect(() => {
    let payload = {
      cart_amount: subTotal,
      delivery_fee:
        Number(deliveryDistance) * data?.distance_per_km + data?.base_fee,
      platform_fee: data?.app_commission,
      tax_amount: Number(getTax(data?.tax?.tax_percentage)) || 0,
      coupon_amount: discount?.maximum_discount_amount || 0,
      coupon_id: discount?._id || "",
      total_amount: Number(Totalfee?.toFixed(2)),
      sales_commission: Number(salesCommission.toFixed(2)) || 0,
    };
    if (payload) {
      dispatch(customerOrderDetail(payload));
    }
  }, [subTotal, data, discount, orderDetail?.tip_amount, salesCommission]);




  return (
    <>
      {coupons?.length > 0 &&
        coupons?.map((item: any) => {
          return (
            <div className="max-w-[330px] bg-white rounded-lg shadow-md p-4 my-4">
              <div className="flex justify-between items-center mb-2">
                <div className="flex items-center">
                  <div className="w-10 h-9 mr-3">
                    <Image
                      src={Profile}
                      alt="offer"
                      className="w-full h-full"
                    />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-800">{item?.code}</h3>
                    <p className="text-gray-500 text-sm">{item?.description}</p>
                  </div>
                </div>

                <button
                  disabled={!isLoggedIn && discount?._id !== item?._id}
                  title={!isLoggedIn ? "Please log in to apply coupon" : ""}
                  className={`font-medium transition-all ${
                    discount?._id === item?._id
                      ? "text-red-500"
                      : !isLoggedIn
                      ? "text-gray-400 cursor-not-allowed"
                      : "text-primary hover:underline"
                  }`}
                  onClick={() =>
                    discount ? setDiscount(null) : applyCoupon(item)
                  }
                >
                  {discount?._id === item?._id ? "Remove" : "Apply"}
                </button>
              </div>
            </div>
          );
        })}
      {/* <div className="max-w-[330px] bg-white rounded-lg shadow-md p-6 my-4">
        <div className="flex justify-between items-center gap-2">
          <div>
            <h3 className="font-bold text-gray-800">TRYNEW applied</h3>
            <p className="text-gray-500 text-sm">
              Save another $20 on this order !
            </p>
          </div>

          <button className="text-primary font-medium">Remove</button>
        </div>
      </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>
        <div className="w-full flex flex-row justify-between text-sm text-white">
          <span>Distance</span>
          <span>{deliveryDistance}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 && (
          <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>
        )}
        <div className="w-full flex flex-row justify-between text-sm text-white">
          <span>Delivery fee</span>
          <span>
            {currency}{Number(deliveryDistance) * data?.distance_per_km + data?.base_fee}
          </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>
        )}
        {/* {(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(Totalfee?.toFixed(2))}</span>
        </div>
      </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"
        onClick={() => setIsOpen(true)}
      >
        Pay {currency}{Number(Totalfee?.toFixed(2))} <ArrowRight size={20} />
      </button>

    </>
  );
};
export default OrderSlip;