"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, Mic, Plus, Search, ShoppingCart, Sparkles, X } from "lucide-react";
import { useRouter, usePathname } from "next/navigation";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
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 { Button } from "../ui/button";
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 Header: 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();
  // Check both userInfo and cookie for persistent login state
  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 [isLogoutDialogOpen, setIsLogoutDialogOpen] = 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 [isListening, setIsListening] = useState(false);
  const [showAuthDrawer, setShowAuthDrawer] = useState(false);

  const handleLogout = () => {
    logout();
    setIsLogoutDialogOpen(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}`);
    }
    setSearchValue("");
    setSuggestionDish({});
    setSuggestionMatch([]);
    setSuggestionRes([]);
  };
  const getLiveAddress = async () => {
    try {
      setLoading(true)
      await waitForGoogleMaps();
      const data = await getLiveLocationWithAddress();
      setAddress(data?.address)
      setLocationData(data)
    } catch (err) {
      Toast.error(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(() => {
    if (isLoggedIn) {
      getAdress();
    }

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

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

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

  const handleAddressClick = (address: any) => {
    dispatch(updateAddress(address));
    setIsAddressDropdownOpen(false);
  };
  const recognition = typeof window !== "undefined" ? (window.SpeechRecognition || (window as any).webkitSpeechRecognition) : null;

  const [speechRecognition, setSpeechRecognition] = useState<any>(null);

  useEffect(() => {
    if (recognition) {
      const recog = new recognition();
      recog.lang = "en-US";
      recog.continuous = false;
      recog.interimResults = false;

      recog.onstart = () => setIsListening(true);
      recog.onend = () => setIsListening(false);

      recog.onresult = async (event: any) => {
        const transcript = event.results[0][0].transcript;
        setSearchValue(transcript);
        if (transcript?.length > 0) {
          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: transcript,
            });
            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) {
            console.error("Error fetching search results:", error);
          }
        }
      };

      setSpeechRecognition(recog);
    }
  }, [recognition, loacte?.lat, loacte?.lng, selectedAddress?.lat, selectedAddress?.long, locationData?.lat, locationData?.lng]);


  const handleMicClick = () => {
    if (speechRecognition) {
      if (!isListening) {
        speechRecognition.start();
      } else {
        speechRecognition.stop();
      }
    }
  };
  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="w-2/3 flex flex-row justify-around items-center">
          <div
            className="flex items-center gap-3 cursor-pointer shrink-0 group mr-4"
            onClick={() => {
              window.location.href = "/";
            }}
          >
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-black text-white shadow-sm transition-transform group-hover:scale-105">
              <Sparkles className="h-5 w-5" />
            </div>
            <div className="flex flex-col text-left">
              <span className="text-lg 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-[11px] font-medium text-neutral-500 -mt-0.5 whitespace-nowrap">
                Food &bull; Cab &bull; Services
              </span>
            </div>
          </div>

          <div className="w-full flex items-center bg-[#F3F3F3] rounded-lg justify-between md:max-w-2xl mx-auto">
            <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 > 35
                        ? `${`${selectedAddress.area}, ${selectedAddress.name}`.slice(0, 35)}...`
                        : `${selectedAddress.area}, ${selectedAddress.name}`
                    ) : address ? (
                      address.length > 35
                        ? `${address.slice(0, 35)}...`
                        : 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 Address</h4>
                  <span className="pl-0 text-sm text-gray-600">{address}</span>
                </div>

                {isLoggedIn && (
                  <>
                    <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>
                  </>
                )}

                {isLoggedIn && addresses?.length > 0 && (
                  <>
                    <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.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>
                  </>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
            <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"
                value={searchValue}
                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) => {
                        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?.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>
            <button
              className={`p-2 rounded-r-md ml-2 transition-colors ${isListening ? "bg-gray-300" : "bg-primary hover:bg-neutral-800"}`}
              onClick={handleMicClick}
            >
              <Mic className="w-5 h-5 text-white" />
            </button>
            {/* <button
              className="bg-[#F97316] p-2 rounded-r-md ml-2"
              onClick={() => handleDetailed(searchValue, "dishes")}
            >
              <Search className="w-5 h-5 text-white" />
            </button> */}
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <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>
          {!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} />

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <div className="flex items-center space-x-2 cursor-pointer">
                    {userInfo?.image ? (
                      <img
                        src={BUCKET_ROOT + userInfo?.image}
                        className="h-[40px] w-[40px] rounded-full"
                      />
                    ) : (
                      <img
                        src={Profile.src}
                        className="h-[40px] w-[44px] rounded-full"
                      />
                    )}
                    <span className="text-sm font-medium">
                      {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>
                  {userInfo?.appConfiguration?.[0]?.wallet && (
                    <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 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("/subscriptions")}>
                    Auto Renew Orders
                  </DropdownMenuItem> */}
                  <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/dineout-list")}>
                    DineOut List
                  </DropdownMenuItem>
                  <DropdownMenuItem className="focus:bg-transparent focus:text-black hover:bg-transparent cursor-pointer" onClick={() => router.push("/catering-list")}>
                    Catering List
                  </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>
                  )}
                  {userInfo?.appConfiguration?.[0]?.loyalty && (
                    <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={() => setIsLogoutDialogOpen(true)}>
                    Logout
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          )}
        </div>
      </div>
      {isLogoutDialogOpen && (
        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
          {/* Backdrop */}
          <div
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
            onClick={() => setIsLogoutDialogOpen(false)}
          />

          {/* Modal Content */}
          <div className="relative bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6 animate-in fade-in zoom-in duration-200">
            {/* Content */}
            <div className="text-center">
              <h2 className="text-xl font-bold text-gray-900 mb-2">
                Logout Account
              </h2>
              <p className="text-gray-500 mb-6">
                Are you sure you want to logout?
              </p>

              {/* Buttons */}
              <div className="flex gap-3">
                <Button
                  onClick={() => setIsLogoutDialogOpen(false)}
                  className="flex-1 px-4 py-3 border-2 border-primary text-primary bg-transparent rounded-lg font-medium hover:bg-primary hover:!text-white transition-all duration-200 shadow-none"
                >
                  Cancel
                </Button>
                <Button
                  onClick={handleLogout}
                  className="flex-1 px-4 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-all duration-200 shadow-none border-2 border-primary"
                >
                  Logout
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
      <ChatbotModal
        isOpen={showChatbotModal}
        onClose={() => setShowChatbotModal(false)}
      />
      <AuthDrawer
        isOpen={showAuthDrawer}
        onClose={() => setShowAuthDrawer(false)}
      />
    </header>
  );
};

export default Header;