"use client"; import Image from "next/image"; import { useEffect, useState, useRef } from "react"; import { Package, ShoppingBag, Menu, X, LogOut, User, Search } from "lucide-react"; import { Button } from "../ui/button"; import { usePathname, useRouter } from "next/navigation"; import Link from "next/link"; import { getClientProfileAction, logoutAction } from "@/actions/auth.actions"; import { toast } from "sonner"; import { useSiteConfig } from "@/context/SiteConfigContext"; import SearchModal from "./SearchModal"; const navLinks = [ { label: "Home", href: "#home", id: "home" }, { label: "Products", href: "#products", id: "products" }, { label: "Contact", href: "#contact", id: "contact" }, ]; export default function Navbar() { const [open, setOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false); const siteConfig = useSiteConfig(); const [active, setActive] = useState("home"); const [shrink, setShrink] = useState(false); const [user, setUser] = useState<{ name: string; image?: string } | null>(null); const [loading, setLoading] = useState(true); const [mounted, setMounted] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false); const [mobileDropdownOpen, setMobileDropdownOpen] = useState(false); const isClickScrolling = useRef(false); const pathname = usePathname(); const router = useRouter(); const isHome = pathname === "/"; const handleNavClick = (id: string, e: React.MouseEvent) => { if (!isHome) { setOpen(false); return; } e.preventDefault(); const element = document.getElementById(id); if (element) { if ((window as any).lenis) { (window as any).lenis.scrollTo(element, { duration: 1.2 }); } else { element.scrollIntoView({ behavior: "smooth" }); } } isClickScrolling.current = true; setActive(id); setOpen(false); setTimeout(() => { isClickScrolling.current = false; }, 1000); }; useEffect(() => { const mountTimeout = setTimeout(() => { setMounted(true); if (typeof window !== "undefined") { try { const cached = localStorage.getItem("cachedUser"); if (cached) { setUser(JSON.parse(cached)); setLoading(false); } } catch { } } }, 0); const hasToken = typeof window !== "undefined" && document.cookie.includes("clientLoggedIn=true"); if (!hasToken) { const loadTimeout = setTimeout(() => { setLoading(false); }, 0); return () => { clearTimeout(mountTimeout); clearTimeout(loadTimeout); }; } const checkAuth = async () => { const res = await getClientProfileAction(); if (res.success && res.data) { setUser(res.data); try { localStorage.setItem("cachedUser", JSON.stringify(res.data)); } catch { } } else { setUser(null); try { localStorage.removeItem("cachedUser"); } catch { } } setLoading(false); }; checkAuth(); window.addEventListener("profileUpdated", checkAuth); return () => { clearTimeout(mountTimeout); window.removeEventListener("profileUpdated", checkAuth); }; }, [pathname]); // Support smooth scroll-to-hash when navigating from another page useEffect(() => { if (typeof window === "undefined" || !isHome) return; const hash = window.location.hash; if (hash) { const id = hash.replace("#", ""); const timer = setTimeout(() => { const element = document.getElementById(id); if (element) { element.scrollIntoView({ behavior: "smooth" }); setActive(id); } }, 500); // Allow time for Suspense skeletons to mount return () => clearTimeout(timer); } }, [pathname, isHome]); const handleLogout = async () => { const toastId = toast.loading("Logging out..."); const res = await logoutAction(); toast.dismiss(toastId); if (res.success) { toast.success("Logged out successfully"); setUser(null); try { localStorage.removeItem("cachedUser"); } catch { } router.push("/login"); router.refresh(); } else { toast.error("Logout failed"); } }; useEffect(() => { const threshold = 100; const onScroll = () => { setShrink(window.scrollY > 40 || window.innerWidth < 1280); if (!isHome) return; if (isClickScrolling.current) return; const isAtBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 30; if (isAtBottom) { setActive("contact"); return; } let current = "home"; for (const link of navLinks) { const el = document.getElementById(link.id); if (!el) continue; const rect = el.getBoundingClientRect(); if (rect.top <= threshold) { current = link.id; } } setActive(current); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [isHome]); // Keyboard shortcut listener for search modal useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key === "k") { e.preventDefault(); setSearchOpen(true); } else if (e.key === "/") { const activeEl = document.activeElement; if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA")) { return; } e.preventDefault(); setSearchOpen(true); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); return ( <> setSearchOpen(false)} /> ); }