'use client'; import { useState, useEffect, useRef, useCallback } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import { useSession, signOut } from 'next-auth/react'; import { agentsService } from '@/services/agents.service'; import { usersService } from '@/services/users.service'; import { uploadService } from '@/services/upload.service'; import { notificationsApiService } from '@/services/notifications-api.service'; const navLinks = [ { label: 'Education', href: '/education' }, { label: 'About Us', href: '/about' }, { label: "FAQ's", href: '/faq' }, ]; export function CommonHeader() { const { data: session } = useSession(); const [showProfileMenu, setShowProfileMenu] = useState(false); const profileMenuRef = useRef(null); const [profileImage, setProfileImage] = useState(null); const [profileName, setProfileName] = useState(null); const [notificationCount, setNotificationCount] = useState(0); // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) { setShowProfileMenu(false); } } if (showProfileMenu) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [showProfileMenu]); // Fetch profile data (image and name) from backend based on user role const fetchProfileData = useCallback(async () => { try { const role = (session?.user as any)?.role; let avatar: string | null = null; let name: string | null = null; if (role === 'AGENT') { const profile = await agentsService.getMyProfile(); avatar = profile.avatar; name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null; } else if (role === 'USER') { const profile = await usersService.getMyProfile(); avatar = profile.avatar; name = profile.firstName ? `${profile.firstName} ${profile.lastName || ''}`.trim() : null; } if (name) { setProfileName(name); } if (avatar) { try { const avatarUrl = await uploadService.getPresignedDownloadUrl(avatar); setProfileImage(avatarUrl); } catch { setProfileImage(avatar); } } } catch (err) { console.error('Failed to fetch profile data:', err); } }, [session]); useEffect(() => { if (session) { fetchProfileData(); } }, [session, fetchProfileData]); // Fetch notification unread count const fetchUnreadCount = useCallback(async () => { try { const count = await notificationsApiService.getUnreadCount(); setNotificationCount(count); } catch { // Silently fail - user may not be authenticated yet } }, []); useEffect(() => { if (session) { fetchUnreadCount(); // Poll every 30 seconds for new notifications const interval = setInterval(fetchUnreadCount, 30000); // Also refresh when a foreground notification arrives const handleNotification = () => fetchUnreadCount(); window.addEventListener('notification-received', handleNotification); return () => { clearInterval(interval); window.removeEventListener('notification-received', handleNotification); }; } }, [session, fetchUnreadCount]); // Listen for profile update events to refresh the header useEffect(() => { const handleProfileUpdate = () => { if (session) { fetchProfileData(); } }; window.addEventListener('profile-updated', handleProfileUpdate); return () => { window.removeEventListener('profile-updated', handleProfileUpdate); }; }, [session, fetchProfileData]); // Use fetched profile name, fallback to session name const userName = profileName || session?.user?.name; const userEmail = session?.user?.email; const userRole = (session?.user as any)?.role; // Use fetched profile image, fallback to session image const userImage = profileImage || session?.user?.image; // Determine dashboard link based on user role const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/dashboard'; return (

{/* Logo */}

{/* Navigation */} {/* Right Side Icons */}

{session ? ( <> {/* Notification Bell */}

{/* Notification Badge */} {notificationCount > 0 && ( {notificationCount > 99 ? '99+' : notificationCount} )} {/* Profile Section with Greeting - Entire area clickable */}