"use client"; import { usePathname } from "next/navigation"; import { useTranslation } from "react-i18next"; import Link from "next/link"; import Image from "next/image"; import { NavLink, MobileNavLink } from "./components/NavLinks"; import { FavoritesProvider } from '@/app/contexts/FavoritesContext'; import FloatingSidebar from '@/app/components/FloatingSidebar'; import { Globe, LogIn, UserPlus, UserCircle, LogOut, Calendar, Building, PlusCircle, Heart, MessageCircle, Settings, Edit, Phone, Mail, MapPin, Camera, Shield, Bell, Home, ChevronDown, Menu, X, TrendingUp, CalendarDays, Clock, Users, DollarSign, } from "lucide-react"; import { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import AuthService from "./services/AuthService"; import { UserRole, UserRoleLabels } from "./enums/UserRole"; import "./i18n/config"; export default function ClientLayout({ children }) { const { t, i18n } = useTranslation(); const pathname = usePathname(); const [currentLanguage, setCurrentLanguage] = useState("en"); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [showUserMenu, setShowUserMenu] = useState(false); const [user, setUser] = useState(null); const [isMounted, setIsMounted] = useState(false); const currentYear = new Date().getFullYear(); const menuRef = useRef(null); useEffect(() => { setIsMounted(true); const savedLanguage = localStorage.getItem("language") || "ar"; setCurrentLanguage(savedLanguage); i18n.changeLanguage(savedLanguage); if (savedLanguage === "ar") { document.documentElement.dir = "rtl"; document.documentElement.lang = "ar"; } else { document.documentElement.dir = "ltr"; document.documentElement.lang = "en"; } }, [i18n]); // Re-read user from JWT on every route change (handles post-login) useEffect(() => { const authUser = AuthService.getUser(); if (authUser) { setUser({ name: authUser.name || authUser.email, email: authUser.email, phone: authUser.phone, role: AuthService.isAdmin() ? UserRole.ADMIN : AuthService.isOwner() ? UserRole.OWNER : UserRole.CUSTOMER, }); } else { setUser(null); } }, [pathname]); useEffect(() => { const handleClickOutside = (event) => { if (menuRef.current && !menuRef.current.contains(event.target)) { setShowUserMenu(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const changeLanguage = (lng) => { i18n.changeLanguage(lng); setCurrentLanguage(lng); localStorage.setItem("language", lng); if (lng === "ar") { document.documentElement.dir = "rtl"; document.documentElement.lang = "ar"; } else { document.documentElement.dir = "ltr"; document.documentElement.lang = "en"; } }; const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen); }; const closeMobileMenu = () => { setIsMobileMenuOpen(false); }; const logout = () => { AuthService.deleteToken(); setUser(null); setShowUserMenu(false); window.location.href = "/"; }; const isAuthPage = [ "/login", "/register", "/forgot-password", "/auth/choose-role", ].includes(pathname); const isProfilePage = pathname === "/profile"; const isOwner = user?.role === UserRole.OWNER; const isAdmin = user?.role === UserRole.ADMIN; const isCustomer = user?.role === UserRole.CUSTOMER; const isAuthenticated = !!user; const getUserInitial = () => { if (user?.name) { return user.name.charAt(0).toUpperCase(); } return ; }; if (!isMounted) { return (

جاري التحميل...

); } return ( <> {!isAuthPage && ( )}
{children} {!isAdmin && }
{!isAuthPage && !isProfilePage && ( )} ); }