"use client";

import React, { useEffect, useState } from "react";
import DashboardLayout from "@/components/layout/DashboardLayout";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useGlobalContext } from "@/context/Provider";
import { MapPin, ChevronRight, Minus, Plus, Info } from "lucide-react";
import { useRouter } from "next/navigation";
import { Modal } from "@/components/ui/modal";
import apis from "@/utils/apis";
import { currency, formatDateTimeToUTC } from "@/lib/utils";
import PaymentModal from "@/components/payment/page";

const CateringCheckoutPage = () => {
    const [checkoutData, setCheckoutData] = useState<any>(null);
    const [noOfAdults, setNoOfAdults] = useState<number>(1);
    const [noOfKids, setNoOfKids] = useState<number>(0);
    const [total, setTotal] = useState<number>(0);
    const [addresses, setAddresses] = useState<any[]>([]);
    const [isOpen5, setIsOpen5] = useState(false);
    const [loading, setLoading] = useState(false);
    const [scheduledTime, setScheduledTime] = useState<string>("");
    const [notes, setNotes] = useState<string>("");
    const [paymentConfig, setPaymentConfig] = useState<any>(null);
    const [clientSecret, setClientSecret] = useState("");
    const [paymentModalOpen, setPaymentModalOpen] = useState(false);
    const [deliveryDistance, setDeliveryDistance] = useState<number | null>(null);
    const [orderTakingRange, setOrderTakingRange] = useState<number | null>(null);
    const [enablePayButton, setEnablePayButton] = useState<boolean>(true);



    const { Toast, userInfo, setUserInfo, locationData } = useGlobalContext();
    const router = useRouter();

    const appConfig = userInfo?.appConfiguration?.[0];
    const salesCommissionPercentage = 0;
    const salesCommission = 0;

    const taxInfo = appConfig?.tax;
    const taxPercentage = parseFloat(String(taxInfo?.tax_percentage || "0"));
    const taxKeyword = taxInfo?.tax_keyword || "Tax";
    const taxAmount = (total * taxPercentage) / 100;

    const platformFee = parseFloat(String(appConfig?.app_commission || "0"));

    const grandTotal = total + taxAmount + platformFee + salesCommission;
    const tokenAmount = grandTotal / 2;

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


    const fetchAddresses = async () => {
        try {
            const res = await apis.Profile.getAddress();
            if (res) setAddresses(res?.data || []);
        } catch (error) {
            console.error("Failed to fetch addresses:", error);
        }
    };

    const getDistanceInKm = async ({ lat1, lat2, long1, long2 }: any) => {
        if (!window.google || !window.google.maps) {
            console.warn("⚠️ Google Maps API not loaded");
            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 = parseFloat((totalDistanceMeters / 1000).toFixed(2));
                setDeliveryDistance(km);
                return km;
            }

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

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

    // Calculate distance when address changes
    useEffect(() => {
        const restaurantLocation = typeof window !== "undefined"
            ? localStorage.getItem("distance")
            : null;

        if (restaurantLocation && (userInfo?.current_address || locationData)) {
            try {
                const distanced = JSON.parse(restaurantLocation);
                const lat1 = Number(userInfo?.current_address?.lat) || Number(locationData?.lat);
                const lat2 = Number(distanced?.lat);
                const long1 = Number(userInfo?.current_address?.long) || Number(locationData?.lng);
                const long2 = Number(distanced?.long);

                if (lat1 && lat2 && long1 && long2) {
                    getDistanceInKm({ lat1, lat2, long1, long2 });
                }
            } catch (error) {
                console.error("Error parsing restaurant location:", error);
            }
        }
    }, [userInfo?.current_address, locationData]);

    // Get order taking range from configuration
    useEffect(() => {
        if (userInfo?.appConfiguration && userInfo.appConfiguration.length > 0) {
            const range = userInfo.appConfiguration[0]?.order_taking_range;
            const rangeInKm = (range || 0) / 1000;
            setOrderTakingRange(rangeInKm);
        }
    }, [userInfo]);

    // Enable/disable pay button based on distance
    useEffect(() => {
        if (orderTakingRange && deliveryDistance !== null) {
            const shouldEnable = orderTakingRange > deliveryDistance;
            setEnablePayButton(shouldEnable);
        } else {
            setEnablePayButton(true);
        }
    }, [deliveryDistance, orderTakingRange]);

    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 handleCurrentAddress = async (data: any) => {
        try {
            const apiRes = await apis.Profile.addCurrentAddress(data?._id);
            if (apiRes) {
                setUserInfo((prev: any) => ({
                    ...prev,
                    current_address: data,
                }));
                setIsOpen5(false);
            }
        } catch (error) {
            Toast.error(error);
        }
    };

    useEffect(() => {
        const data = localStorage.getItem("cateringSelection");
        if (data) {
            const parsedData = JSON.parse(data);
            setCheckoutData(parsedData);
            if (parsedData.kid_price > 0) {
                setNoOfKids(1);
            }
        } else {
            Toast.error("Please select a plan first.");
            router.push("/catering");
        }
    }, []);

    useEffect(() => {
        if (checkoutData) {
            const totalAmt =
                noOfAdults * (checkoutData.adult_price || 0) +
                noOfKids * (checkoutData.kid_price || 0);
            setTotal(totalAmt);
        }
    }, [noOfAdults, noOfKids, checkoutData]);

    if (!checkoutData) return <p>Loading...</p>;

    const handleCreatePlate = async () => {
        try {
            setLoading(true);

            const formattedMenu = checkoutData.menu.map((cat: any) => ({
                category_id: cat.category_id,
                food_ids: cat.food_items.map((item: any) => item.id),
            }));

            const deliveryAddress = {
                name:
                    userInfo?.current_address?.name ||
                    locationData?.address ||
                    "Unknown Location",
                lat: userInfo?.current_address?.lat || locationData?.lat || "",
                long: userInfo?.current_address?.long || locationData?.lng || "",
                building_no: userInfo?.current_address?.building_no || "",
                tower: userInfo?.current_address?.tower || "",
                area: userInfo?.current_address?.area || "",
                city: userInfo?.current_address?.city || "",
                nearby_landmark: userInfo?.current_address?.nearby_landmark || "",
                type: userInfo?.current_address?.type || "home",
            };

            const utcScheduledTime = formatDateTimeToUTC(scheduledTime);

            const payload = {
                restaurant_id: checkoutData.restaurant_id,
                catering_plan_id: checkoutData.catering_plan_id,
                menu: formattedMenu,
                no_of_adults: noOfAdults,
                no_of_kids: noOfKids,
                notes: notes || "",
                delivery_address: deliveryAddress,
                scheduled_time: utcScheduledTime,
                // callback_url: window.location.origin + "/payment-callback"
            };

            const res = await apis.Catering.createPlate(payload);

            if (paymentConfig?.paymentGateway === "cashfree" && res?.cashfree) {
                const scriptLoaded = await loadCashfreeScript();
                if (!scriptLoaded) {
                    Toast.error("Cashfree SDK failed to load");
                    return;
                }

                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: res.cashfree.payment_session_id,
                    redirectTarget: "_self",
                };

                cashfree.checkout(checkoutOptions);
                return;
            }

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

            if (paymentConfig?.paymentGateway === "razorpay" && res?.razorpay) {
                const scriptLoaded = await loadRazorpayScript();
                if (!scriptLoaded) {
                    Toast.error("Razorpay SDK failed to load");
                    return;
                }

                const options = {
                    key: paymentConfig.razorpay.key,
                    amount: res.razorpay.amount,
                    currency: res.razorpay.currency,
                    name: "Catering Payment",
                    description: "Catering token payment",
                    order_id: res.razorpay.id,
                    handler: function (response: any) {
                        Toast.success("Payment successful!");
                        router.push("/catering-list");
                    },
                    theme: {
                        color: "hsl(var(--primary))",
                    },
                };

                const razorpay = new (window as any).Razorpay(options);
                razorpay.open();
                return;
            }

            if (paymentConfig?.paymentGateway === "stripe" && res?.client_secret) {
                sessionStorage.setItem("clientSecret", res.client_secret);
                setClientSecret(res.client_secret);
                setPaymentModalOpen(true);
            } else {
                Toast.success("Catering order created successfully!");
                router.push("/catering/orders");
            }
        } catch (error: any) {
            Toast.error(error);
        } finally {
            setLoading(false);
        }
    };



    return (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
            {/* Left section */}
            <div className="md:col-span-2 space-y-5">
                {/* Plan selection */}
                <Card className="p-4">
                    <h3 className="font-semibold mb-3">Price</h3>
                    <div className="flex justify-between items-center border rounded-lg p-3 bg-gray-50">
                        <div>
                            <p className="font-medium">{checkoutData.catering_plan_name}</p>
                            <p className="text-sm text-gray-500">{checkoutData.description}</p>
                        </div>
                        <div className="text-right text-sm">
                            <p>Adult Price: {currency}{checkoutData.adult_price}</p>
                            {checkoutData.kid_price > 0 && (
                                <p>Child Price: {currency}{checkoutData.kid_price}</p>
                            )}
                        </div>
                    </div>
                </Card>

                {/* Guest count */}
                <Card className="p-4">
                    <h3 className="font-semibold mb-3">Guest Count</h3>
                    <div className={`grid ${checkoutData.kid_price > 0 ? "grid-cols-2" : "grid-cols-1"} gap-4`}>
                        <div>
                            <label className="block text-sm mb-2">Adults</label>
                            <div className="flex items-center gap-3">
                                <Button
                                    variant="outline"
                                    size="icon"
                                    onClick={() => setNoOfAdults(Math.max(1, noOfAdults - 1))}
                                    disabled={noOfAdults <= 1}
                                    className="h-8 w-8"
                                >
                                    <Minus className="h-4 w-4" />
                                </Button>
                                <span className="text-lg font-semibold w-12 text-center">{noOfAdults}</span>
                                <Button
                                    variant="outline"
                                    size="icon"
                                    onClick={() => setNoOfAdults(noOfAdults + 1)}
                                    className="h-8 w-8"
                                >
                                    <Plus className="h-4 w-4" />
                                </Button>
                            </div>
                        </div>

                        {checkoutData.kid_price > 0 && (
                            <div>
                                <label className="block text-sm mb-2">Children</label>
                                <div className="flex items-center gap-3">
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        onClick={() => setNoOfKids(Math.max(1, noOfKids - 1))}
                                        disabled={noOfKids <= 1}
                                        className="h-8 w-8"
                                    >
                                        <Minus className="h-4 w-4" />
                                    </Button>
                                    <span className="text-lg font-semibold w-12 text-center">{noOfKids}</span>
                                    <Button
                                        variant="outline"
                                        size="icon"
                                        onClick={() => setNoOfKids(noOfKids + 1)}
                                        className="h-8 w-8"
                                    >
                                        <Plus className="h-4 w-4" />
                                    </Button>
                                </div>
                            </div>
                        )}
                    </div>
                </Card>

                {/* ✅ Delivery Address Section */}
                <Card className="p-4">
                    <div className="flex justify-between items-center mb-3">
                        <h3 className="font-semibold">Delivery Address</h3>
                        <button
                            className="text-[hsl(var(--primary))] underline text-sm"
                            onClick={() => router.push("/location")}
                        >
                            +Add
                        </button>
                    </div>

                    <div className="flex justify-between items-center border rounded-lg p-3 bg-gray-50">
                        <div className="flex items-start gap-3">
                            <MapPin className="text-[hsl(var(--primary))] mt-1" />
                            <div>
                                <p className="font-medium">
                                    {userInfo?.current_address?.type
                                        ? userInfo.current_address.type.charAt(0).toUpperCase() +
                                        userInfo.current_address.type.slice(1)
                                        : "Home"}
                                </p>
                                <p className="text-sm text-gray-500">
                                    {userInfo?.current_address?.name || locationData?.address}
                                </p>
                            </div>
                        </div>
                        <ChevronRight
                            size={20}
                            className="text-gray-600 cursor-pointer"
                            onClick={() => setIsOpen5(true)}
                        />
                    </div>
                </Card>

                {/* Menu Items */}
                <Card className="p-4">
                    <h3 className="font-semibold mb-3">Selected Menu Items</h3>
                    <div className="space-y-3">
                        {checkoutData.menu.map((cat: any, idx: number) => (
                            <div key={idx} className="border rounded-md p-3 bg-gray-50">
                                <p className="font-semibold text-sm mb-2 text-gray-700">
                                    {cat.category_name || cat.category_id}
                                </p>
                                <div className="flex flex-wrap gap-2">
                                    {cat.food_items?.map((food: any, foodIdx: number) => (
                                        <span
                                            key={foodIdx}
                                            className="text-xs bg-brand-100 text-[hsl(var(--primary))] px-3 py-1 rounded-full font-medium"
                                        >
                                            {food.name}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </Card>

                <Card className="p-4">
                    <h3 className="font-semibold mb-3">Scheduled Time</h3>
                    <input
                        type="datetime-local"
                        className="border rounded-md px-3 py-2 w-full text-sm"
                        value={scheduledTime}
                        onChange={(e) => setScheduledTime(e.target.value)}
                        min={(() => {
                            const now = new Date();
                            now.setDate(now.getDate() + 2);
                            return now.toISOString().slice(0, 16);
                        })()}
                    />
                    {scheduledTime && new Date(scheduledTime) < new Date(new Date().setDate(new Date().getDate() + 2)) && (
                        <p className="text-red-500 text-sm mt-2">
                            Please select a date at least 2 days from today.
                        </p>
                    )}
                </Card>


                <Card className="p-4">
                    <h3 className="font-semibold mb-3">Additional Notes</h3>
                    <textarea
                        placeholder="Add any notes for catering (optional)"
                        className="border rounded-md px-3 py-2 w-full text-sm min-h-[100px]"
                        value={notes}
                        onChange={(e) => setNotes(e.target.value)}
                    />
                </Card>

            </div>

            {/* ✅ Right Section - Bill Details */}
            <div className="space-y-4">
                <Card className="p-4 space-y-2">
                    <h3 className="font-semibold mb-3 border-b pb-2">Bill Details</h3>

                    {/* Adults */}
                    <div className="flex justify-between text-sm">
                        <span>
                            Adults ({noOfAdults})
                            <p className="text-xs text-gray-500">
                                {currency}{checkoutData.adult_price.toFixed(2)} × {noOfAdults}
                            </p>
                        </span>
                        <span className="font-medium">
                            {currency}{(noOfAdults * checkoutData.adult_price).toFixed(2)}
                        </span>
                    </div>

                    {/* Children */}
                    {noOfKids > 0 && (
                        <div className="flex justify-between text-sm">
                            <span>
                                Child ({noOfKids})
                                <p className="text-xs text-gray-500">
                                    {currency}{checkoutData.kid_price.toFixed(2)} × {noOfKids}
                                </p>
                            </span>
                            <span className="font-medium">
                                {currency}{(noOfKids * checkoutData.kid_price).toFixed(2)}
                            </span>
                        </div>
                    )}

                    <hr className="my-2" />

                    {/* Subtotal */}
                    <div className="flex justify-between text-sm">
                        <span>Subtotal</span>
                        <span>{currency}{total.toFixed(2)}</span>
                    </div>

                    {/* Tax */}
                    {taxPercentage > 0 && taxAmount > 0 && (
                        <div className="flex justify-between text-sm">
                            <span>{taxKeyword} ({taxPercentage}%)</span>
                            <span>{currency}{taxAmount.toFixed(2)}</span>
                        </div>
                    )}

                    {/* Platform Fee */}
                    {platformFee > 0 && (
                        <div className="flex justify-between text-sm">
                            <span>Platform Fee</span>
                            <span>{currency}{platformFee.toFixed(2)}</span>
                        </div>
                    )}

                    {/* Sales Commission */}
                    {/* {salesCommissionPercentage > 0 && (
                        <div className="flex justify-between text-sm">
                            <span>Sales Commission ({salesCommissionPercentage}%)</span>
                            <span>{currency}{salesCommission.toFixed(2)}</span>
                        </div>
                    )} */}

                    <hr className="my-2" />

                    {/* ✅ Grand Total */}
                    <div className="flex justify-between font-semibold text-base">
                        <span>Total</span>
                        <span>{currency}{grandTotal.toFixed(2)}</span>
                    </div>

                    <div className="flex justify-between text-sm font-semibold text-gray-700 mt-1">
                        <span>Token Amount</span>
                        <span>{currency}{tokenAmount.toFixed(2)}</span>
                    </div>

                    {/* Warning message for out-of-range delivery address */}
                    {!enablePayButton && orderTakingRange && deliveryDistance && (
                        <div className="mt-3 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md text-sm">
                            <span className="font-medium flex items-center gap-1">
                                {/* <Info className="h-8 w-8" /> */}
                                This location is outside the restaurant delivery range. Please select an address within {orderTakingRange}km
                            </span>
                        </div>
                    )}

                    <Button
                        size="lg"
                        className="w-full bg-[hsl(var(--primary))] hover:bg-[hsl(var(--primary))] text-white font-medium mt-4 disabled:opacity-50 disabled:cursor-not-allowed"
                        onClick={handleCreatePlate}
                        disabled={loading || !enablePayButton}
                    >
                        Proceed to Pay {currency}{tokenAmount.toFixed(2)}
                    </Button>
                </Card>
            </div>

            {/* ✅ Address Modal */}
            <Modal
                isOpen={isOpen5}
                onClose={() => setIsOpen5(false)}
                title="Select Address"
                description=""
            >
                <div className="w-full flex flex-col gap-4 max-h-[50vh] overflow-y-auto no-scrollbar">
                    {addresses?.length > 0 ? (
                        addresses.map((item: any) => (
                            <div
                                key={item._id}
                                className="border border-gray-200 rounded-lg p-4 cursor-pointer"
                                onClick={() => handleCurrentAddress(item)}
                            >
                                <div className="flex justify-between items-start mb-2">
                                    <div className="flex items-center">
                                        <div
                                            className={`w-5 h-5 rounded-full mr-2 flex items-center justify-center ${userInfo?.current_address?._id === item?._id
                                                ? "bg-yellow-500"
                                                : "border border-gray-300"
                                                }`}
                                        >
                                            {userInfo?.current_address?._id === item?._id && (
                                                <div className="w-2 h-2 rounded-full bg-white"></div>
                                            )}
                                        </div>
                                        <span className="font-medium capitalize">{item.type}</span>
                                    </div>
                                </div>
                                <div className="pl-7 text-sm text-gray-600">{item?.name}</div>
                            </div>
                        ))
                    ) : (
                        <div className="text-center text-gray-500 py-10">
                            <p className="text-base font-medium">No address found</p>
                            <p className="text-sm">Please add a new address to proceed.</p>
                        </div>
                    )}
                </div>
            </Modal>

            {paymentModalOpen && paymentConfig && (
                <PaymentModal
                    open={paymentModalOpen}
                    setOpen={setPaymentModalOpen}
                    clientSecret={clientSecret}
                    price={Number(tokenAmount.toFixed(2))}
                    stripePublishableKey={paymentConfig.stripe?.key}
                    onSuccess={() => {
                        Toast.success("Payment successful!");
                        router.push("/catering/orders");
                    }}
                />
            )}

        </div>
    );
};

export default function CateringCheckout() {
    return (
        <DashboardLayout>
            <CateringCheckoutPage />
        </DashboardLayout>
    );
}