"use client";
import React, { useEffect, useRef, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { useRouter, useSearchParams } from "next/navigation";
import Image from "next/image";
import Contactus from "@/assets/images/burger.jpg";
import {
  CheckCircle,
  ChevronDown,
  ChevronUp,
  ChevronRight,
  Clock,
  FileText,
  MapPin,
  MessageSquare,
  Phone,
  Star,
} from "lucide-react";
import CheckoutSlip from "@/components/checkoutSlip/page";
import FoodItemsContainer from "@/components/products/page";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { Modal } from "@/components/ui/modal";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useGlobalContext } from "@/context/Provider";
import countries from "@/utils/CountryCode.json";
import CountryPickerModal from "@/components/countrycode/page";
import { Card } from "@/components/ui/card";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import apis, { API_ROOT } from "@/utils/apis";
import CheckoutAddress from "@/components/checkoutAddress/page";
import { Input } from "@/components/ui/input";
import {
  cartReset,
  customerOrderDetail,
  orderDetailReset,
} from "@/store/actions/user/userAction";
import OrderSlip from "@/components/orderSlip/page";
import io, { Socket } from "socket.io-client";
import MapContainerDetail from "@/components/googleMap/page";
import dayjs from "dayjs";
import OrderProgressTracker from "@/components/ordertracking/page";
import HelpButton from "@/components/supportComponent/page";
import OrderDetailsCard from "@/components/ordercard/page";
import PaymentImg from "@/assets/images/Subtract.png";
import { useElements } from "@stripe/react-stripe-js";
import { currency } from "@/lib/utils";

const Checkout = () => {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  const { cartItems, orderDetail } = useSelector(
    (state: RootState) => state.user.profile
  );
  const access_token =
    typeof window !== "undefined" && sessionStorage.getItem("token");
  const { userInfo, setUserInfo } = useGlobalContext();
  const dispatch: AppDispatch = useDispatch();
  const router = useRouter();
  const socketRef = useRef<Socket | null>(null);
  const socketConnectRef = useRef<any>(null);
  const [orderData, setorderData] = useState(null) as any;
  const [socketConnect, setSocketConnect] = React.useState(false);
  const [locate] = useState({
    lat: 30.7069892,
    long: 76.6870682,
  });
  const [showSurchargeDetails, setShowSurchargeDetails] = useState(false);
  const [showExtraChargeDetails, setShowExtraChargeDetails] = useState(false);

  const surchargeItems = (orderData?.surcharges || []).filter(
    (c: any) => c.charge_type === "surcharge" || c.surcharge_type === "surcharge" || (!c.charge_type && !c.surcharge_type && c.name?.toLowerCase().includes("rain"))
  );
  const extraChargeItems = (orderData?.surcharges || []).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);

  useEffect(() => {
    if (
      orderData?._id &&
      (orderData?.order_status === "delivered" ||
        orderData?.order_status === "cancelled" ||
        orderData?.order_status === "pos" ||
        orderData?.order_type === "pos")
    ) {
      router.push(`/summary?id=${orderData._id}`);
    }
  }, [orderData?.order_status, orderData?.order_type, orderData?._id, router]);

  useEffect(() => {
    if (!access_token) {
      setSocketConnect(false);
      return;
    }

    socketRef.current = io(API_ROOT, {
      extraHeaders: {
        token: `${access_token}`,
        language: "en",
      },
      reconnection: true,
      reconnectionAttempts: 10,
      reconnectionDelay: 2000,
      reconnectionDelayMax: 10000,
      timeout: 20000,
    });

    socketConnectRef.current = setInterval(() => {
      if (socketRef.current?.connected) {
        setSocketConnect(true);
      }
    }, 1000);

    socketRef.current.on("booking_detail", (data: any) => {
      setorderData((prev: any) => ({ ...prev, ...data }));
    });

    return () => {
      socketRef.current?.disconnect();
      if (socketConnectRef.current) {
        clearInterval(socketConnectRef.current);
      }
    };
  }, [access_token]);


  const getOrderDetail = async (id: string) => {
    try {
      const apiRes = await apis.Orders.getDetail(id);
      const newData = apiRes?.data;
      setorderData((prevData: any) => {
        if (!prevData) return newData;

        const hasChanged = Object.keys(newData).some(
          (key) =>
            JSON.stringify(prevData[key]) !== JSON.stringify(newData[key])
        );

        return hasChanged ? { ...prevData, ...newData } : prevData;
      });
    } catch (error) { }
  };

  useEffect(() => {
    sessionStorage.removeItem("clientSecret");
    sessionStorage.removeItem("orderId");
  }, []);

  useEffect(() => {
    const paymentIntent = searchParams.get("payment_intent");
    const clientSecret = searchParams.get("payment_intent_client_secret");
    const redirectStatus = searchParams.get("redirect_status");

    if (paymentIntent || clientSecret || redirectStatus) {
      const cleanParams = new URLSearchParams(searchParams.toString());
      dispatch(orderDetailReset());
      dispatch(cartReset());
      localStorage.clear();
      cleanParams.delete("payment_intent");
      cleanParams.delete("payment_intent_client_secret");
      cleanParams.delete("redirect_status");

      const newPath = `/orderDetail?${cleanParams.toString()}`;
      router.replace(newPath);
    }
  }, [router, searchParams]);

  useEffect(() => {
    if (!id || !orderData) return;

    const pendingOrderId = localStorage.getItem("pending_order_id");
    if (pendingOrderId && pendingOrderId === id) {
      const successfulStatuses = [
        "order_placed",
        "order_confirmed",
        "ready_for_pickup",
        "out_for_delivery",
        "delivered",
        "preparing",
        "picked_up",
        "on_the_way",
        "upcomming"
      ];
      if (successfulStatuses.includes(orderData?.order_status)) {
        dispatch(cartReset());
        localStorage.removeItem("cartItems");
        localStorage.removeItem("groceryCartItems");
        localStorage.removeItem("pending_order_id");
      } else if (orderData?.order_status === "cancelled") {
        localStorage.removeItem("pending_order_id");
      }
    }
  }, [id, orderData?.order_status, dispatch]);

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

    getOrderDetail(id);

    const interval = setInterval(() => {
      getOrderDetail(id);
    }, 10000);

    return () => clearInterval(interval);
  }, [id]);

  // console.log('socketConnect', socketConnect)
  return (
    <div className="w-full p-6">
      <h2 className="text-3xl font-bold mb-6">Order Detail</h2>

      <div className="w-full grid grid-cols-1 md:grid-cols-10 gap-4">
        {/* Column 1 - 4/10 */}
        <div className="md:col-span-4  rounded-xl p-4">
          <div className="w-full flex flex-col gap-4 items-start">
            <Card className="w-full max-w-md border rounded-lg shadow-sm overflow-hidden">
              <div className="p-4">
                {/* Location Type Header */}
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center">
                    <MapPin color="hsl(var(--primary))" />
                    <span className="font-medium">
                      {orderData?.delivery_address?.type}
                    </span>
                  </div>
                  <div className="flex items-center">
                    <>Delivery OTP : {orderData?.delivery_otp}</>
                  </div>

                </div>

                <div className="h-px bg-gray-100 my-2"></div>

                <div className="space-y-3">
                  <div>
                    <p className="text-xs text-gray-500">Billing Details</p>
                    <p className="text-base font-semibold mt-1">
                      {orderData?.add_receiver_detail?.name}
                    </p>
                  </div>

                  <div>
                    <p className="text-sm text-gray-600">
                      {orderData?.delivery_address?.name}
                    </p>
                  </div>

                  <div>
                    <p className="text-sm text-gray-600">
                      {dayjs(orderData?.order_placed_at).format(
                        "DD MMM YYYY hh:mm a"
                      )}
                    </p>
                  </div>

                  <div className="flex items-center">
                    <span className="text-sm text-gray-600">Contact Us: </span>
                    <span className="text-sm text-gray-600 ml-1">
                      {orderData?.add_receiver_detail?.country_code?.startsWith('+') ? '' : '+'}{orderData?.add_receiver_detail?.country_code}{" "}
                      {orderData?.add_receiver_detail?.phone}
                    </span>
                  </div>
                </div>
              </div>
            </Card>
            {orderData?.deliver_type?.toLowerCase() !== "takeaway" && (
              <MapContainerDetail
                resAdd={orderData?.restaurant?.address}
                customerAdd={orderData?.delivery_address}
                driverAdd={orderData?.driver?.location}
                status={orderData?.order_status}
                socket={socketRef.current}
                orderId={orderData?._id}
                deliverType={orderData?.deliver_type}
              />
            )}

          </div>
        </div>

        {/* Column 2 - 3/10 */}
        <div className="md:col-span-3 rounded-xl p-4">
          {orderData?.driverDetail && (
            <div className="w-full max-w-xl mx-auto mb-4">
              <div className="bg-amber-50 p-4 rounded-t-lg border-b border-amber-100">
                <p className="text-gray-700 text-center text-sm capitalize">
                  {orderData?.order_status?.replace(/_/g, " ")}
                </p>
              </div>

              <div className="bg-white p-4 rounded-b-lg flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg overflow-hidden bg-gray-200">
                    <img
                      src={"avatarSrc"}
                      alt={`${"partnerName"} profile picture`}
                      className="w-full h-full object-cover"
                    />
                  </div>

                  <div>
                    <h3 className="font-medium text-gray-800 text-sm">
                      {"partnerName"}
                    </h3>
                    <p className="text-gray-500 text-sm">Delivery partner</p>
                  </div>
                </div>

                <div className="flex items-center gap-2">
                  <button
                    className="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center"
                    aria-label="Call delivery partner"
                  >
                    <Phone className="h-5 w-5 text-green-600" />
                  </button>

                  <button
                    className="w-8 h-8 rounded-full bg-amber-50 flex items-center justify-center"
                    aria-label="Message delivery partner"
                  >
                    <MessageSquare className="h-5 w-5 text-amber-600" />
                  </button>
                </div>
              </div>
            </div>
          )}
          <OrderProgressTracker
            orderStatus={orderData?.order_status}
            deliverType={orderData?.deliver_type}
            orderPlacedAt={orderData?.order_placed_at}
            createdAt={orderData?.created_at}
          />
        </div>

        <div className="md:col-span-3  rounded-xl p-4">
          {orderData?.deliver_type == "driver" && (
            <HelpButton orderStatus={orderData?._id} receiverId={orderData?.driver?._id} orderId={orderData?._id} />
          )}

          <OrderDetailsCard data={orderData} />
          <div className="w-full flex items-center justify-center mt-4">
            <div className="w-full rounded-2xl p-6 text-white bg-black shadow-md flex flex-col gap-3">
              <div className="w-full flex justify-start text-sm font-semibold text-white">
                Payment
              </div>
              {orderData?.deliver_type == "driver" && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Distance</span>
                  <span>{orderData?.distance}km</span>
                </div>
              )}
              <div className="w-full flex flex-row justify-between text-xs text-white/90">
                <span>Subtotal</span>
                <span>{currency}{orderData?.cart_amount}</span>
              </div>
              {orderData?.coupon_amount > 0 && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Coupon</span>
                  <span>-{currency}{orderData?.coupon_amount}</span>
                </div>
              )}
              {Number(orderData?.platform_fee || 0) > 0 && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Platform fee</span>
                  <span>{currency}{orderData?.platform_fee}</span>
                </div>
              )}
              {orderData?.tip_amount > 0 && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Driver Tip</span>
                  <span>{currency}{Number(orderData?.tip_amount)}</span>
                </div>
              )}
              {orderData?.deliver_type == "driver" && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Delivery fee</span>
                  <span>{currency}{Number(orderData?.delivery_fee).toFixed(2)}</span>
                </div>)}
              {Number(orderData?.tax_amount || 0) > 0 && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>GST</span>
                  <span>{currency}{Number(orderData?.tax_amount).toFixed(2)}</span>
                </div>
              )}
              {surchargeSum > 0 && (
                <div className="w-full flex flex-col gap-1 select-none">
                  <div
                    onClick={() => setShowSurchargeDetails(!showSurchargeDetails)}
                    className="flex justify-between items-center text-xs text-white/90 cursor-pointer hover:text-white transition-colors"
                  >
                    <span className="flex items-center gap-1.5">
                      Surcharges
                      {showSurchargeDetails ? <ChevronUp size={12} className="text-white/80" /> : <ChevronDown size={12} 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 || charge.name} className="flex justify-between items-center text-[10px]">
                          <span>{charge.name}</span>
                          <span>{currency}{Number(charge.value || charge.amount || 0).toFixed(2)}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {extraChargeSum > 0 && (
                <div className="w-full flex flex-col gap-1 select-none">
                  <div
                    onClick={() => setShowExtraChargeDetails(!showExtraChargeDetails)}
                    className="flex justify-between items-center text-xs text-white/90 cursor-pointer hover:text-white transition-colors"
                  >
                    <span className="flex items-center gap-1.5">
                      Extra Charges
                      {showExtraChargeDetails ? <ChevronUp size={12} className="text-white/80" /> : <ChevronDown size={12} 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 || charge.name} className="flex justify-between items-center text-[10px]">
                          <span>{charge.name}</span>
                          <span>{currency}{Number(charge.value || charge.amount || 0).toFixed(2)}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
              {/* {orderData?.sales_commission > 0 && (
                <div className="w-full flex flex-row justify-between text-xs text-white/90">
                  <span>Sales Commission</span>
                  <span>{currency}{Number(orderData?.sales_commission).toFixed(2)}</span>
                </div>
              )} */}
              <div className="w-full h-px border-t border-dashed border-t-white/30 my-0.5"></div>
              {((Number(orderData?.loyalty_point_redeemed) > 0) || (orderData?.promo_wallet_redeemed && Number(orderData?.promo_wallet_amount) > 0)) ? (
                <>
                  <div className="w-full flex flex-row justify-between text-xs text-white/90">
                    <span>Total</span>
                    <span>{currency}{orderData?.total_amount}</span>
                  </div>
                  {Number(orderData?.loyalty_point_redeemed) > 0 && (
                    <div className="w-full flex flex-row justify-between text-xs text-white/90">
                      <span>Loyalty Discount</span>
                      <span>-{currency}{Number(orderData?.loyalty_point_redeemed).toFixed(2)}</span>
                    </div>
                  )}
                  {orderData?.promo_wallet_redeemed && Number(orderData?.promo_wallet_amount) > 0 && (
                    <div className="w-full flex flex-row justify-between text-xs text-white/90">
                      <span>Promo Wallet Discount</span>
                      <span>-{currency}{Number(orderData?.promo_wallet_amount).toFixed(2)}</span>
                    </div>
                  )}
                  <div className="w-full h-px border-t border-dashed border-t-white/30 my-0.5"></div>
                  <div className="w-full flex flex-row justify-between text-sm font-bold text-white">
                    <span>Payable Amount</span>
                    <span>{currency}{Math.max(0, (orderData?.total_amount || 0) - (Number(orderData?.loyalty_point_redeemed) || 0) - (Number(orderData?.promo_wallet_amount) || 0)).toFixed(2)}</span>
                  </div>
                </>
              ) : (
                <div className="w-full flex flex-row justify-between text-sm font-semibold text-white">
                  <span>Total</span>
                  <span>{currency}{orderData?.total_amount}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default function JobAutomationPage() {
  return (
    <DashboardLayout>
      <Checkout />
    </DashboardLayout>
  );
}