"use client"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; type Account = { id: string; email: string; name: string | null; avatarUrl: string | null; }; type Props = { prefix: string; locale: "sr" | "en"; }; const FAV_KEY = "bp_favorites_v1"; /** * Visitor identity dropdown that lives in the **top bar** of a business * portal. Replaces the in-flow "Prijava" link with a richer experience * once the user has signed in: * * • Avatar (initial gradient or Google picture) * • First name visible to the right * • Tiny pulse dot indicates "you have unread messages" * • Click → premium dropdown with: Moj nalog · Poruke (count) · Favoriti * (count) · Uporedi · Odjavi se * * Why in the top bar and not the main bar? * • This is a **business portal** — visitor accounts are secondary to the * "Dodaj firmu" CTA. Hiding consumer features in the utility row keeps * the main bar laser-focused. * • Pattern matches Booking, Crunchbase, LinkedIn (utility row owns * account, locale, help; main bar owns search + categories + CTA). */ export function TopBarUserMenu({ prefix, locale }: Props) { const en = locale === "en"; const [account, setAccount] = useState(null); const [hydrated, setHydrated] = useState(false); const [open, setOpen] = useState(false); const [unreadMessages, setUnreadMessages] = useState(0); const [favCount, setFavCount] = useState(0); const [busy, setBusy] = useState(false); const wrapperRef = useRef(null); // Hydrate identity. useEffect(() => { let cancelled = false; fetch("/api/visitor-auth/me", { credentials: "same-origin" }) .then((r) => r.json()) .then((data: { account: Account | null }) => { if (cancelled) return; setAccount(data.account ?? null); setHydrated(true); }) .catch(() => { if (!cancelled) setHydrated(true); }); return () => { cancelled = true; }; }, []); // Hydrate counters (favorites from localStorage, messages from API). useEffect(() => { function readFav() { try { const raw = window.localStorage.getItem(FAV_KEY); if (!raw) { setFavCount(0); return; } const parsed = JSON.parse(raw); setFavCount(Array.isArray(parsed) ? parsed.length : 0); } catch { setFavCount(0); } } readFav(); window.addEventListener("bp:favorites:change", readFav); window.addEventListener("storage", readFav); return () => { window.removeEventListener("bp:favorites:change", readFav); window.removeEventListener("storage", readFav); }; }, []); // Poll unread message count when authed (every 30s). useEffect(() => { if (!account) { return; } let cancelled = false; let timer: ReturnType; async function load() { try { const res = await fetch("/api/messages/unread-count", { cache: "no-store" }); if (!res.ok) return; const data = (await res.json()) as { count?: number }; if (cancelled) return; setUnreadMessages(typeof data.count === "number" ? data.count : 0); } catch { /* noop */ } } void load(); function schedule() { timer = setTimeout(async () => { if (cancelled) return; await load(); schedule(); }, 30_000); } schedule(); return () => { cancelled = true; if (timer) clearTimeout(timer); }; }, [account]); // Close on outside click + Esc. useEffect(() => { if (!open) return; function onClick(e: MouseEvent) { if (!wrapperRef.current) return; if (!wrapperRef.current.contains(e.target as Node)) setOpen(false); } function onKey(e: KeyboardEvent) { if (e.key === "Escape") setOpen(false); } window.addEventListener("mousedown", onClick); window.addEventListener("keydown", onKey); return () => { window.removeEventListener("mousedown", onClick); window.removeEventListener("keydown", onKey); }; }, [open]); async function logout() { setBusy(true); try { await fetch("/api/visitor-auth/logout", { method: "POST" }); } catch { /* noop */ } window.location.assign(prefix || "/"); } if (!hydrated) { return