import { useState, useEffect, useRef, useCallback } from "react" import { Link, NavLink, useNavigate, useLocation } from "react-router-dom" import Search from "./Search" import NotificationCenter from "./NotificationCenter" import { useSelector, useDispatch } from "react-redux" import { logout, setUser } from "../store/slices/authSlice" import { useGetWishlistsQuery } from "../store/slices/userApiSlice"; import { useGetCartsQuery } from "../store/slices/userApiSlice"; import { toast } from "react-toastify" import { motion, AnimatePresence } from "framer-motion" import { ShoppingCart, User, LogOut, Package, Menu, X, Heart, Gift, CreditCard } from "lucide-react" import "./Header.css" import { useLogoutAPIMutation } from "../store/slices/userApiSlice"; import { apiSlice } from "../store/slices/apiSlice"; import { performLogout } from "../utils/authUtils"; export default function Header({ onOpenLiveChat, onOpenAIAssistant }) { const { isLoggedIn, userData } = useSelector((state) => state.auth) const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [showUserDropdown, setShowUserDropdown] = useState(false) const shouldSkipQueries = !isLoggedIn || !userData || !localStorage.getItem('token'); const { data: wishlistData, refetch: refetchWishlist, error: wishlistError } = useGetWishlistsQuery(undefined, { skip: shouldSkipQueries, refetchOnMountOrArgChange: false, pollingInterval: 0, }); const { data: cartsData, refetch: refetchCarts, error: cartError } = useGetCartsQuery(undefined, { skip: shouldSkipQueries, refetchOnMountOrArgChange: false, pollingInterval: 0, }); const [logoutAPI] = useLogoutAPIMutation(); const dispatch = useDispatch() const navigate = useNavigate() const location = useLocation() useEffect(() => { const initializeAuth = () => { try { const storedUserData = localStorage.getItem('userData'); const storedToken = localStorage.getItem('token'); if (storedUserData && storedToken) { try { const userData = JSON.parse(storedUserData); if (userData._id && userData.email) { dispatch(setUser(userData)); } else { localStorage.removeItem('userData'); localStorage.removeItem('token'); } } catch (error) { console.error('Error parsing stored user data:', error); localStorage.removeItem('userData'); localStorage.removeItem('token'); } } } catch (error) { console.error('Error initializing auth:', error); localStorage.removeItem('userData'); localStorage.removeItem('token'); } }; initializeAuth(); }, [dispatch]); const wishlistCount = Array.isArray(wishlistData?.wishlist) ? new Set(wishlistData.wishlist.map(item => item.productId || item._id)).size : 0; const cartItems = cartsData?.carts?.[0]?.cartItems || []; useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) useEffect(() => { const handleClick = (e) => { if (!e.target.closest('.user-menu')) setShowUserDropdown(false); }; if (showUserDropdown) document.addEventListener('mousedown', handleClick); return () => document.removeEventListener('mousedown', handleClick); }, [showUserDropdown]); useEffect(() => { const handleCartUpdated = () => { if (isLoggedIn && userData) { refetchCarts(); } }; window.addEventListener('cart-updated', handleCartUpdated); return () => window.removeEventListener('cart-updated', handleCartUpdated); }, [isLoggedIn, userData, refetchCarts]); useEffect(() => { const handleWishlistUpdated = () => { if (isLoggedIn && userData) { refetchWishlist(); } }; window.addEventListener('wishlist-updated', handleWishlistUpdated); return () => window.removeEventListener('wishlist-updated', handleWishlistUpdated); }, [isLoggedIn, userData, refetchWishlist]); const logoutHandler = useCallback(async () => { await performLogout(dispatch, logoutAPI, logout, apiSlice.util.resetApiState); }, [logoutAPI, dispatch]); return ( ) }