"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import Logo from "@/assets/images/logo.png";
import Profile from "@/assets/images/profileimg.png";
import { Bell, ChevronDown, Dot, Home, MapPin, MessageSquare, Plus, Search, ShoppingCart, Sparkles } from "lucide-react";
import { useRouter, usePathname } from "next/navigation";
import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import { Input } from "../ui/input";
import { useGlobalContext } from "@/context/Provider";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import { getValidImage } from "@/lib/utils";
import noImage from "@/assets/images/noImage.png";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/store/store";
import { updateAddress, updateCart } from "@/store/actions/user/userAction";
import { Modal } from "@/components/ui/modal";
import { getLiveLocationWithAddress, waitForGoogleMaps } from "@/utils/commonFunctions";
import NotificationDialog from "../notificationDialog/page";
import ChatbotModal from "../chatBot/page";
import AuthDrawer from "../AuthDrawer/page";
import { destroyCookie } from "nookies";
import { COOKIES_USER_ACCESS_TOKEN } from "@/context/actionTypes";

interface LiveLocation {
    lat: number;
    lng: number;
    address: string;
    addressComponents: google.maps.GeocoderAddressComponent[];
}

const processRelevantSearchResponse = (apiRes: any) => {
    if (apiRes && (apiRes.dishes || apiRes.matching_food || apiRes.relevant_restaurant)) {
        return {
            dishes: apiRes.dishes || {},
            matching_food: apiRes.matching_food || [],
            relevant_restaurant: apiRes.relevant_restaurant || [],
        };
    }

    const dataList = apiRes?.data;
    if (Array.isArray(dataList)) {
        // Separate restaurant-level items (type "food" with restaurant_name, no store) from dish items
        const restaurantItems: any[] = [];
        const dishItems: any[] = [];
        dataList.forEach((item: any) => {
            if (item?.restaurant_name && item?.restaurant_type && !item?.store) {
                restaurantItems.push(item);
            } else {
                dishItems.push(item);
            }
        });

        const matching_food = dishItems.map((item: any) => {
            return {
                ...item,
                image: Array.isArray(item.image)
                    ? item.image
                    : item.imageUrl
                        ? [item.imageUrl]
                        : [],
            };
        });

        const uniqueStoresMap = new Map<string, any>();
        // Add restaurant-level items directly as relevant restaurants
        restaurantItems.forEach((item: any) => {
            if (item._id && !uniqueStoresMap.has(item._id)) {
                uniqueStoresMap.set(item._id, {
                    ...item,
                    image: item.image || "",
                    address: item.address || { name: item.restaurant_name || "" },
                });
            }
        });
        // Also extract unique stores from dish items
        dishItems.forEach((item: any) => {
            if (item?.store && item.store._id) {
                const storeId = item.store._id;
                if (!uniqueStoresMap.has(storeId)) {
                    uniqueStoresMap.set(storeId, {
                        ...item.store,
                        image: item.store.image || "",
                        address: item.store.address || { name: item.store.restaurant_name || "" },
                    });
                }
            }
        });
        const relevant_restaurant = Array.from(uniqueStoresMap.values());

        let dishes: any = {};
        const itemWithCategory = dataList.find((item: any) => item?.category_name && item.category_name.trim() !== "");
        if (itemWithCategory) {
            dishes = {
                category_name: itemWithCategory.category_name || "",
                category_image: itemWithCategory.category_image || itemWithCategory.imageUrl || "",
                category_id: itemWithCategory.category_id || "",
            };
        }

        return {
            dishes,
            matching_food,
            relevant_restaurant,
        };
    }

    return {
        dishes: {},
        matching_food: [],
        relevant_restaurant: [],
    };
};

const MobileHeader: React.FC = () => {
    const router = useRouter();
    const dispatch: AppDispatch = useDispatch();
    const pathname = usePathname();
    const isGroceryRoute = pathname?.startsWith('/grocery') || false;
    const [groceryCartCount, setGroceryCartCount] = useState(0);
    const { cartItems } = useSelector((state: RootState) => state.user.profile);

    const selectedAddress = useSelector(
        (state: RootState) => state.user.profile.selectedAddress
    );

    const { userInfo, setLocationData, loacte, locationData, getCategory, Toast, logout } =
        useGlobalContext();
    const isLoggedIn =
        !!userInfo?.access_token ||
        (typeof window !== "undefined" &&
            (!!document.cookie.includes("COOKIES_USER_ACCESS_TOKEN") ||
                !!document.cookie.includes("cookies_user_access_token") ||
                !!sessionStorage.getItem("token") ||
                !!localStorage.getItem("auth_token")));
    const [searchValue, setSearchValue] = useState<any>("");
    const [suggestionDish, setSuggestionDish] = useState<any>({});
    const [suggestionMatch, setSuggestionMatch] = useState<any>([]);
    const [suggestionRes, setSuggestionRes] = useState<any>([]);
    const [isOpen1, setIsOpen1] = useState(false);
    const [address, setAddress] = useState<any>("")
    const [loading, setLoading] = useState<boolean>(false);
    const [addresses, setAddresses] = useState([]);
    const [isAddressDropdownOpen, setIsAddressDropdownOpen] = useState(false);
    const [showNotifications, setShowNotifications] = useState(false);
    const [showChatbotModal, setShowChatbotModal] = useState(false);
    const [showAuthDrawer, setShowAuthDrawer] = useState(false);

    const AddressSearchSection = () => {
        return (
            <div className="w-full flex items-center bg-[#F3F3F3] rounded-lg justify-between md:max-w-2xl mx-auto">
                {/* Address Dropdown */}
                <DropdownMenu
                    open={isAddressDropdownOpen}
                    onOpenChange={setIsAddressDropdownOpen}
                >
                    <DropdownMenuTrigger asChild>
                        <div className="flex items-center space-x-1 cursor-pointer p-2 w-[50%]">
                            <span className="text-sm font-medium whitespace-nowrap flex flex-row">
                                <MapPin size={15} />
                                {loading ? (
                                    "Fetching address..."
                                ) : selectedAddress ? (
                                    `${selectedAddress.area}, ${selectedAddress.name}`.length > 12
                                        ? `${`${selectedAddress.area}, ${selectedAddress.name}`.slice(0, 12)}...`
                                        : `${selectedAddress.area}, ${selectedAddress.name}`
                                ) : address ? (
                                    address.length > 12 ? `${address.slice(0, 12)}...` : address
                                ) : (
                                    "Address not available"
                                )}
                            </span>
                            <ChevronDown strokeWidth={1.5} size={15} />
                        </div>
                    </DropdownMenuTrigger>

                    <DropdownMenuContent className="w-[400px] mt-2 bg-white shadow-lg rounded-lg max-h-[300px] overflow-y-auto">
                        <div className="px-4 py-2">
                            <h4 className="text-sm font-semibold text-gray-500 uppercase">
                                Current Addresses
                            </h4>
                            <span className="pl-0 text-sm text-gray-600">{address}</span>
                        </div>
                        <div className="border-t border-gray-200 my-2" />
                        <div
                            className="px-4 py-3 flex items-center space-x-3 hover:bg-gray-100 cursor-pointer"
                            onClick={handleAddAddressClick}
                        >
                            <Plus className="w-5 h-5 text-primary" />
                            <span className="text-base text-primary font-medium">
                                Add Address
                            </span>
                        </div>
                        <div className="border-t border-gray-200 my-2" />
                        <div className="px-4 py-2">
                            <h4 className="text-sm font-semibold text-gray-500 uppercase">
                                Saved Addresses
                            </h4>
                        </div>
                        <div className="space-y-3 mb-4 px-4">
                            {addresses?.length > 0 ? (
                                addresses.map((item: any) => (
                                    <div
                                        key={item._id}
                                        className="group cursor-pointer"
                                        onClick={() => handleAddressClick(item)}
                                    >
                                        <div className="flex justify-between items-center">
                                            <div className="flex items-center gap-2">
                                                <Home className="w-4 h-4 text-gray-600" />
                                                <span className="font-semibold text-gray-800 capitalize">
                                                    {item.type}
                                                </span>
                                            </div>
                                        </div>
                                        <div className="pl-6 text-sm text-gray-600">{item.name}</div>
                                        <div className="border-t border-gray-100 mt-3 group-last:border-0"></div>
                                    </div>
                                ))
                            ) : (
                                <div className="text-sm text-gray-500 text-center">
                                    No saved addresses
                                </div>
                            )}
                        </div>
                    </DropdownMenuContent>
                </DropdownMenu>

                {/* Search */}
                <div className="relative w-[65%]">
                    <Input
                        type="text"
                        placeholder="Search for Item & Stores/Vendor"
                        className="flex-1 border-none text-sm bg-transparent px-2"
                        onChange={handleRelevent}
                    />
                    {searchValue && (
                        <div className="absolute w-full z-50 max-h-[35vh] bg-white rounded-lg shadow-lg overflow-y-auto no-scrollbar">
                            {!suggestionDish && !suggestionMatch && !suggestionRes && (
                                <span className="w-full flex justify-center h-[7vh] items-center text-gray-500">
                                    No data found
                                </span>
                            )}
                            {Object.keys(suggestionDish || {}).length > 0 && suggestionDish?.category_name && (
                                <div className="w-full flex flex-col p-2">
                                    <div
                                        className="w-full flex flex-row items-center justify-start gap-4 bg-[#f3f3f3] rounded-3xl cursor-pointer"
                                        onClick={() =>
                                            handleDetailed(suggestionDish?.category_name, "category")
                                        }
                                    >
                                        <div className="relative w-12 h-12 rounded-full overflow-hidden">
                                            <Image
                                                src={getValidImage(suggestionDish?.category_image)}
                                                alt="dish"
                                                fill
                                                className="object-cover"
                                                onError={(e: any) => {
                                                    e.currentTarget.src = noImage.src;
                                                }}
                                            />
                                        </div>
                                        <div className="flex flex-col">
                                            <span className="text-lg font-medium text-black">
                                                {suggestionDish?.category_name}
                                            </span>
                                            <span className="text-sm text-gray-400">Category</span>
                                        </div>
                                    </div>
                                </div>
                            )}
                            {suggestionMatch?.length > 0 && (
                                <div className="w-full flex flex-col gap-2 p-2">
                                    <div className="w-full flex justify-center text-sm text-gray-500 mt-2">
                                        Results Matching Your Query
                                    </div>
                                    {suggestionMatch.map((item: any) => (
                                        <div
                                            key={item?._id}
                                            className="w-full flex flex-row items-center justify-start gap-4 bg-[#f3f3f3] rounded-3xl cursor-pointer"
                                            onClick={() => handleDetailed(item?.name, "dishes", item)}
                                        >
                                            <div className="relative w-12 h-12 rounded-full overflow-hidden">
                                                <Image
                                                    src={getValidImage(item?.image?.[0])}
                                                    alt="dish"
                                                    fill
                                                    className="object-cover"
                                                    onError={(e: any) => {
                                                        e.currentTarget.src = noImage.src;
                                                    }}
                                                />
                                            </div>
                                            <div className="flex flex-col">
                                                <span className="text-lg font-medium text-black">
                                                    {item?.name}
                                                </span>
                                                <span className="text-sm text-gray-400 capitalize flex items-center gap-1.5 flex-wrap">
                                                    <span>{item?.type || "Item"}</span>
                                                    {(item?.restaurant_name || item?.store?.restaurant_name || item?.store_name || item?.store?.name || item?.restaurant?.restaurant_name || item?.restaurant?.name) && (
                                                        <>
                                                            <span className="text-gray-300">•</span>
                                                            <span className="text-primary font-medium">
                                                                {item?.restaurant_name || item?.store?.restaurant_name || item?.store_name || item?.store?.name || item?.restaurant?.restaurant_name || item?.restaurant?.name}
                                                            </span>
                                                        </>
                                                    )}
                                                </span>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                            {suggestionRes?.length > 0 && (
                                <div className="w-full flex flex-col gap-2 p-2">
                                    <div className="w-full flex justify-center text-sm text-gray-500 mt-2 p-2">
                                        Relevant Vendors/Stores For Your Query
                                    </div>
                                    {suggestionRes.map((item: any) => {
                                        const address = item?.address?.name ? item.address.name.split(",") : [];
                                        return (
                                            <div
                                                key={item?._id}
                                                className="w-full flex flex-row items-center justify-start gap-4 bg-[#f3f3f3] rounded-3xl cursor-pointer"
                                                onClick={() => handleDetailed(item?._id, "restaurant", item)}
                                            >
                                                <div className="relative w-12 h-12 rounded-full overflow-hidden">
                                                    <Image
                                                        src={getValidImage(item?.image)}
                                                        alt="dish"
                                                        fill
                                                        className="object-cover"
                                                        onError={(e: any) => {
                                                            e.currentTarget.src = noImage.src;
                                                        }}
                                                    />
                                                </div>
                                                <div className="flex flex-col">
                                                    <span className="text-lg font-medium text-black">
                                                        {item?.restaurant_name}
                                                    </span>
                                                    <span className="text-sm text-gray-400 flex items-center">
                                                        {item?.average_preparing_time} mins{" "}
                                                        <Dot color="#8e8e8e" /> {address?.[0]}
                                                    </span>
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>
                    )}
                </div>

                {/* Search Button */}
                <button
                    className="bg-primary p-2 rounded-r-md ml-2"
                    onClick={() => handleDetailed(searchValue, "dishes")}
                >
                    <Search className="w-5 h-5 text-white" />
                </button>
            </div>
        );
    };

    const handleLogout = () => {
        logout();
        setIsOpen1(false);
    };

    useEffect(() => {
        const cartItems = JSON.parse(localStorage.getItem("cartItems") || "[]");
        if (cartItems?.length > 0) {
            dispatch(updateCart(cartItems));
        }

        // Initialize grocery cart count
        const groceryItems = JSON.parse(localStorage.getItem("groceryCartItems") || "[]");
        setGroceryCartCount(groceryItems.length);

        const handleGroceryUpdate = (e: any) => {
            setGroceryCartCount(e.detail);
        };

        window.addEventListener('grocery-cart-updated', handleGroceryUpdate);
        return () => window.removeEventListener('grocery-cart-updated', handleGroceryUpdate);
    }, []);
    useEffect(() => {
        getCategory();
        getLiveAddress();
    }, []);

    const handleRelevent = async (e: any) => {
        let val = e.target.value;
        setSearchValue(val);
        if (val?.length < 2) {
            return;
        }
        try {
            const latVal = loacte?.lat ?? selectedAddress?.lat ?? locationData?.lat ?? "";
            const lngVal = loacte?.lng ?? selectedAddress?.long ?? locationData?.lng ?? "";
            const params = new URLSearchParams({
                lat: latVal !== null && latVal !== undefined ? String(latVal) : "",
                long: lngVal !== null && lngVal !== undefined ? String(lngVal) : "",
                search: val,
            });
            const apiRes = await apis.SearchList.relevant(`${params.toString()}`);
            const processed = processRelevantSearchResponse(apiRes);
            setSuggestionDish(processed.dishes);
            setSuggestionMatch(processed.matching_food);
            setSuggestionRes(processed.relevant_restaurant);
        } catch (error) { }
    };
    const handleDetailed = (search: any, type: any, item?: any) => {
        const storeType = item?.type || item?.store?.type;
        const storeId = item?._id || item?.store?._id || search;
        if (type === "restaurant") {
            if (storeType === "food") {
                router.push(`/restaurant?id=${storeId}`);
            } else {
                router.push(`/grocery/${storeId}?type=${storeType || 'grocery'}`);
            }
        } else if (type === "dishes") {
            if (storeType && storeType !== "food") {
                router.push(`/grocery/product/${item._id}?restaurantId=${item.store_id || item.store?._id}`);
            } else {
                router.push(`/search?type=${type}&search=${search}`);
            }
        } else {
            router.push(`/search?type=${type}&search=${search}`);
        }
        setSuggestionDish({});
        setSuggestionMatch([]);
        setSuggestionRes([]);
        setSearchValue("");
    };
    const getLiveAddress = async () => {
        try {
            setLoading(true)
            await waitForGoogleMaps();
            const data = await getLiveLocationWithAddress();
            setAddress(data?.address)
            setLocationData(data)
        } catch (err) {
            console.error("Error getting address:", err);
        } finally {
            setLoading(false);
        }
    };

    const getAdress = async () => {
        try {
            const apires = await apis.Profile.getAddress();
            if (apires) {
                setAddresses(apires?.data);
            }
        } catch (error) {
            console.error("Failed to get addresses", error);
        }
    };

    useEffect(() => {
        getAdress();

        const handleAddressesUpdated = () => {
            getAdress();
        };

        window.addEventListener("addresses-updated", handleAddressesUpdated);
        return () => {
            window.removeEventListener("addresses-updated", handleAddressesUpdated);
        };
    }, []);

    const handleAddAddressClick = () => {
        router.push('/location');
    };

    const handleAddressClick = (address: any) => {
        dispatch(updateAddress(address));
        setIsAddressDropdownOpen(false);
    };

    return (
        <header className="fixed top-0 left-0 right-0 bg-white shadow z-50">
            <div className="max-w-[100vw] mx-auto px-4 py-3 flex items-center justify-between">
                <div className="flex items-center justify-between w-full md:w-auto">
                    <div
                        className="flex items-center gap-2.5 cursor-pointer shrink-0 group"
                        onClick={() => {
                            window.location.href = "/";
                        }}
                    >
                        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-black text-white shadow-sm transition-transform group-hover:scale-105">
                            <Sparkles className="h-4 w-4" />
                        </div>
                        <div className="flex flex-col text-left">
                            <span className="text-base font-bold tracking-tight text-neutral-900 flex items-center gap-1">
                                Ready<span className="text-black font-black">Go</span>
                            </span>
                            <span className="text-[10px] font-medium text-neutral-500 -mt-0.5 whitespace-nowrap">
                                Food &bull; Cab &bull; Services
                            </span>
                        </div>
                    </div>
                </div>

                <div className="flex items-center space-x-4">
                    {!isLoggedIn ? (
                        <>
                            <button
                                onClick={() => setShowAuthDrawer(true)}
                                className="text-sm font-medium hover:underline"
                            >
                                Login
                            </button>
                            <button
                                onClick={() => setShowAuthDrawer(true)}
                                className="bg-primary text-sm text-white font-semibold px-4 py-2 rounded-lg hover:bg-primary"
                            >
                                Sign Up
                            </button>
                        </>
                    ) : (
                        <>
                            <button onClick={() => setShowChatbotModal(true)} className="relative p-2 bg-gray-200 rounded-full shadow-lg cursor-pointer">
                                <MessageSquare size={24} color="gray" />
                            </button>
                            <NotificationDialog open={showNotifications} setOpen={setShowNotifications} />
                            <button
                                className="flex items-center text-sm space-x-2"
                                onClick={() => {
                                    if (isGroceryRoute) {
                                        if (groceryCartCount === 0) {
                                            Toast.error("Your cart is empty");
                                        } else {
                                            window.dispatchEvent(new CustomEvent('toggle-grocery-cart'));
                                        }
                                    } else {
                                        if (cartItems?.length > 0 && cartItems.every((item: any) => item.no_of_quantity > 0)) {
                                            router.push("/checkout");
                                        } else {
                                            Toast.error("Your cart is empty");
                                        }
                                    }
                                }}
                            >
                                <span className="bg-gray-200 shadow-lg rounded-full p-2 cursor-pointer relative">
                                    <ShoppingCart strokeWidth={1.5} />
                                    {isGroceryRoute ? (
                                        groceryCartCount > 0 && (
                                            <span className="absolute -top-2 -right-1 text-white flex items-center justify-center text-[8px] bg-red-600 w-5 h-5 rounded-full">
                                                {groceryCartCount}
                                            </span>
                                        )
                                    ) : (
                                        cartItems?.length > 0 && (
                                            <span className="absolute -top-2 -right-1 text-white flex items-center justify-center text-[8px] bg-red-600 w-5 h-5 rounded-full">
                                                {cartItems.length}
                                            </span>
                                        )
                                    )}
                                </span>
                            </button>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <div className="flex items-center space-x-2 cursor-pointer">
                                        <Image
                                            src={Profile || "/default-avatar.png"}
                                            alt={userInfo?.name || ""}
                                            width={40}
                                            height={40}
                                            className="rounded-full"
                                        />
                                        <span className="text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap max-w-full">
                                            {userInfo?.name}
                                        </span>
                                    </div>
                                </DropdownMenuTrigger>


                                <DropdownMenuContent className="w-40 mt-2">
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/profile")}>
                                        Edit Personal Info
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/wallet")}>
                                        Wallet
                                    </DropdownMenuItem>
                                    {/* <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/rewards")}>
                                        Rewards & Levels
                                    </DropdownMenuItem> */}
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/favourite")}>
                                        Favourites
                                    </DropdownMenuItem>
                                    <DropdownMenuItem
                                        className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer"
                                        onClick={() => router.push("/myorders?page=1&limit=10")}
                                    >
                                        Your Orders
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/location")}>
                                        Saved Address
                                    </DropdownMenuItem>
                                    {/* <DropdownMenuItem onClick={() => router.push("/card")}>
                    Saved Cards
                  </DropdownMenuItem> */}
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/contact")}>
                                        Contact Us
                                    </DropdownMenuItem>
                                    {/* <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/my-queries")}>
                                        Support Queries
                                    </DropdownMenuItem> */}
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/notification")}>
                                        Notification
                                    </DropdownMenuItem>
                                    {userInfo?.appConfiguration?.[0]?.referral?.is_active && (
                                        <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/referral")}>
                                            Referral
                                        </DropdownMenuItem>
                                    )}
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/loyalty")}>
                                        Loyalty Points
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => setIsOpen1(true)}>
                                        Logout
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </>
                    )}
                </div>

            </div>
            <div className="w-full flex flex-col items-center space-y-6 px-4 py-6 md:px-0">
                <AddressSearchSection />
            </div>
            <Modal
                isOpen={isOpen1}
                description=""
                onClose={() => setIsOpen1(false)}
                title={"Logout Account"}
            >
                <div className="w-full p-2 flex flex-col items-center">
                    <span className="block mt-4 mb-4 text-lg text-gray-500">
                        Are sure want to logout?
                    </span>
                    <div className="flex flex-row gap-4 w-full">
                        <button
                            onClick={() => setIsOpen1(false)}
                            className="flex-1 py-3 px-4 border-2 border-primary text-primary bg-transparent hover:bg-primary hover:!text-white text-center font-medium rounded-md transition duration-200"
                        >
                            Cancel
                        </button>
                        <button
                            onClick={handleLogout}
                            className="flex-1 py-3 px-4 bg-primary text-white text-center font-medium rounded-md hover:bg-primary/95 transition duration-200 border-2 border-primary"
                        >
                            Logout
                        </button>
                    </div>
                </div>
            </Modal>
            <ChatbotModal
                isOpen={showChatbotModal}
                onClose={() => setShowChatbotModal(false)}
            />
            <AuthDrawer
                isOpen={showAuthDrawer}
                onClose={() => setShowAuthDrawer(false)}
            />
        </header>
    );
};

export default MobileHeader;