"use client"; import { useState, useEffect, useRef, KeyboardEvent } from "react"; import Image from "next/image"; import Link from "next/link"; import { useRouter, usePathname } from "next/navigation"; import { Menu, Search, Mic, Upload, Bell, User, UserPlus, Globe, ChevronDown, Check, X, ShoppingBag, Heart, MessageCircle, } from "lucide-react"; import { useWishlist } from "@/lib/WishlistContext"; import { useMessaging } from "@/lib/MessagingContext"; import { cn } from "@/utils/cn"; import { TEXT } from "@/branding"; import { IMAGES } from "@/branding/images"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { setQuery, performSearch } from "@/store/slices/searchSlice"; import { fetchNotifications } from "@/store/slices/notificationSlice"; import { fetchMarketplaceCategories } from "@/store/slices/marketplaceCategorySlice"; import { useTranslation, type Language } from "@/i18n"; import { ThemeToggle } from "@/components/common/ThemeToggle"; interface HeaderProps { onMenuToggle: () => void; } /* ── Language dropdown ──────────────────────────────────────────────────── */ const LANGS: { code: Language; label: string; name: string }[] = [ { code: "en", label: "EN", name: "English" }, { code: "hi", label: "हि", name: "हिंदी" }, { code: "gu", label: "ગુ", name: "ગુજરાતી" }, ]; function LangDropdown() { const { lang, setLang, t } = useTranslation(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); const current = LANGS.find((l) => l.code === lang) ?? LANGS[0]; return (
{open && (
{LANGS.map(({ code, label, name }) => { const active = lang === code; return ( ); })}
)}
); } /* ── Header ─────────────────────────────────────────────────────────────── */ export function Header({ onMenuToggle }: HeaderProps) { const [focused, setFocused] = useState(false); const [mobileSearchOpen, setMobileSearchOpen] = useState(false); const [searchVal, setSearchVal] = useState(""); const router = useRouter(); const pathname = usePathname(); const dispatch = useAppDispatch(); const isSearchPage = pathname === "/search"; const isAuthenticated = useAppSelector((s) => s.auth.isAuthenticated); const unreadCount = useAppSelector((s) => s.notifications.unreadCount); const { t } = useTranslation(); const { count: wishlistCount } = useWishlist(); const { totalUnread: msgUnread } = useMessaging(); /* Pre-fetch notifications only when logged in */ useEffect(() => { if (isAuthenticated) dispatch(fetchNotifications(1)); }, [dispatch, isAuthenticated]); const handleSearch = () => { const q = searchVal.trim(); if (!q) return; dispatch(setQuery(q)); dispatch(performSearch(q)); setMobileSearchOpen(false); router.push(`/search?q=${encodeURIComponent(q)}`); }; /* Shared search bar content */ const SearchBar = (
setSearchVal(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onKeyDown={(e: KeyboardEvent) => { if (e.key === "Enter") handleSearch(); }} />
); return ( <>
{/* ── Desktop layout (md+) ──────────────────────────────────────── */}
{/* Left */}
{TEXT.app.name} {TEXT.app.name}
{/* Center search */}
{SearchBar}
{/* Right */}
{isAuthenticated && ( )} {/* Wishlist */} {/* */} {/* Messages */} {/* */} {isAuthenticated ? ( <> ) : ( {t("nav_signUp")} )}
{/* ── Mobile layout (< md) ──────────────────────────────────────── */}
{/* Menu toggle (opens sidebar for secondary nav items) */} {/* Logo — grows to fill center space */} {TEXT.app.name} {TEXT.app.name} {/* Right actions — compact */}
{/* Marketplace */} {isAuthenticated && ( )} {/* Messages */} {/* */} {/* Search icon */} {isAuthenticated ? ( <> {/* Notifications */} ) : ( {t("nav_login")} )}
{/* ── Mobile search overlay ─────────────────────────────────────────── */} {mobileSearchOpen && (
{SearchBar}
)} ); }