"use client"; import { useSidebar } from "@/context/SidebarContext"; import Image from "next/image"; import Link from "next/link"; import React, { useState, useEffect, useRef } from "react"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { logoutUser } from "@/store/slices/authSlice"; import { toast } from "react-toastify"; import { useRouter, usePathname } from "next/navigation"; import { ConfirmLogoutModal } from "@/components/common/modal"; import axios from "axios"; import { useSocket } from "@/hooks/useSocket"; import { usePushNotifications } from "@/hooks/usePushNotifications"; const AppHeader: React.FC = () => { const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false); const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); const dispatch = useAppDispatch(); const user = useAppSelector((state) => state.auth.user); const router = useRouter(); const pathname = usePathname(); const { isMobileOpen, toggleSidebar, toggleMobileSidebar } = useSidebar(); const handleToggle = () => { if (window.innerWidth >= 1024) { toggleSidebar(); } else { toggleMobileSidebar(); } }; const toggleApplicationMenu = () => { setApplicationMenuOpen(!isApplicationMenuOpen); }; const inputRef = useRef(null); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key === "k") { event.preventDefault(); inputRef.current?.focus(); } }; document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("keydown", handleKeyDown); }; }, []); // Dropdown const [isNotificationOpen, setIsNotificationOpen] = useState(false); const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false); const notificationRef = useRef(null); const userDropdownRef = useRef(null); usePushNotifications(); const { socket, isConnected } = useSocket(); const [notifications, setNotifications] = useState([]); const [unreadCount, setUnreadCount] = useState(0); const [unreadChatCount, setUnreadChatCount] = useState(0); const [page, setPage] = useState(1); const [hasMore, setHasMore] = useState(false); const fetchNotifications = async (pageNum = 1) => { try { const token = localStorage.getItem('token') || sessionStorage.getItem('token'); const res = await axios.get(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'}/api/notifications?page=${pageNum}&limit=10`, { headers: { Authorization: `Bearer ${token}` } }); if (res.data.success) { if (pageNum === 1) { setNotifications(res.data.data || []); } else { setNotifications(prev => [...prev, ...(res.data.data || [])]); } setUnreadCount(res.data.unreadCount || 0); setHasMore(pageNum < (res.data.meta?.totalPages || 1)); } } catch (e) { console.error(e); } }; const fetchUnreadChatCount = async () => { try { const token = localStorage.getItem('token') || sessionStorage.getItem('token'); const res = await axios.get(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'}/api/chat/users`, { headers: { Authorization: `Bearer ${token}` } }); if (res.data.success && res.data.data) { const total = res.data.data.reduce((acc: number, u: any) => acc + (u.unreadCount || 0), 0); setUnreadChatCount(total); } } catch (e) { console.error("Failed to fetch chat unread count", e); } }; useEffect(() => { if (user) { setPage(1); fetchNotifications(1); fetchUnreadChatCount(); } }, [user]); useEffect(() => { const handleChatRead = () => fetchUnreadChatCount(); window.addEventListener('chat_read', handleChatRead); return () => window.removeEventListener('chat_read', handleChatRead); }, []); const loadMore = () => { if (hasMore) { const nextPage = page + 1; setPage(nextPage); fetchNotifications(nextPage); } }; useEffect(() => { if (socket && isConnected) { socket.on('notification', (newNotif: any) => { setNotifications(prev => [newNotif, ...prev]); setUnreadCount(prev => prev + 1); }); socket.on('receive_message', (msg: any) => { setUnreadChatCount(prev => prev + 1); }); } return () => { if (socket) { socket.off('notification'); socket.off('receive_message'); } }; }, [socket, isConnected]); const handleMarkAsRead = async (notifId: string, type?: string) => { try { if (type !== 'CHAT_MESSAGE') { const token = localStorage.getItem('token') || sessionStorage.getItem('token'); await axios.delete(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'}/api/notifications/${notifId}`, { headers: { Authorization: `Bearer ${token}` } }); } setNotifications(prev => prev.filter(n => n.id !== notifId)); setUnreadCount(prev => Math.max(0, prev - 1)); } catch (e) { console.error(e); } }; const handleMarkAllAsRead = async () => { try { const token = localStorage.getItem('token') || sessionStorage.getItem('token'); await axios.delete(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000'}/api/notifications/delete-all`, { headers: { Authorization: `Bearer ${token}` } }); setNotifications([]); setUnreadCount(0); } catch (e) { console.error(e); } }; const toggleNotification = () => { setIsNotificationOpen((prev) => !prev); setIsUserDropdownOpen(false); }; const toggleUserDropdown = () => { setIsUserDropdownOpen(!isUserDropdownOpen); setIsNotificationOpen(false); }; useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as Node; if ( notificationRef.current && !notificationRef.current.contains(target) && userDropdownRef.current && !userDropdownRef.current.contains(target) ) { setIsNotificationOpen(false); setIsUserDropdownOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); return (

{/* Chat Link */}

0 ? "block" : "hidden" }`} >

{isNotificationOpen && (

Notification

No notifications

{hasMore && ( )}

)}

{isUserDropdownOpen && (

{user?.name || `${user?.firstName || 'System'} ${user?.lastName || 'User'}`} {user?.email || "user@example.com"}

Edit profile

)}

setIsLogoutModalOpen(false)} onConfirm={async () => { try { const resultAction = await dispatch(logoutUser()); if (logoutUser.fulfilled.match(resultAction)) { toast.success("Logout successful"); router.push("/login"); } else { toast.error((resultAction.payload as string) || "Logout failed"); } } catch (err) { toast.error("An error occurred during logout"); } }} />

); }; export default AppHeader;