import React, { useState, useEffect } from "react"; import { UserRole } from "../types"; import { useAuth } from "../contexts/AuthContext"; import { Menu, X, LogOut, User, Settings, Camera, Mail, Phone, GraduationCap, } from "lucide-react"; import { Button } from "./Button"; interface NavbarProps { onNavigate: (page: string) => void; currentPage: string; } export const Navbar: React.FC = ({ onNavigate, currentPage }) => { const { user, logout } = useAuth(); const [isScrolled, setIsScrolled] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false); const [isEditProfileModalOpen, setIsEditProfileModalOpen] = useState(false); const [profileData, setProfileData] = useState({ name: user?.name || "", email: user?.email || "", phone: "", avatar: user?.avatar || "", }); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (isAccountDropdownOpen) { const target = event.target as HTMLElement; if (!target.closest(".relative")) { setIsAccountDropdownOpen(false); } } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, [isAccountDropdownOpen]); const getLinks = () => { if (!user) return []; switch (user.role) { case UserRole.SUPERADMIN: case UserRole.BUSINESS_OWNER: return [ { name: "Gestão de Eventos", path: "painel" }, { name: "Equipe", path: "equipe" }, { name: "Gestão de Cursos", path: "cursos" }, { name: "Aprovação de Cadastros", path: "aprovacao-cadastros" }, { name: "Financeiro", path: "financeiro" }, ]; case UserRole.EVENT_OWNER: return [ { name: "Meus Eventos", path: "painel" }, { name: "Solicitar Evento", path: "solicitar-evento" }, ]; case UserRole.PHOTOGRAPHER: return [{ name: "Eventos Designados", path: "painel" }]; default: return []; } }; const getRoleLabel = () => { if (!user) return ""; if (user.role === UserRole.BUSINESS_OWNER) return "Empresa"; if (user.role === UserRole.EVENT_OWNER) return "Cliente"; if (user.role === UserRole.PHOTOGRAPHER) return "Fotógrafo"; if (user.role === UserRole.SUPERADMIN) return "Super Admin"; return ""; }; return ( <> {/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */} {isEditProfileModalOpen && (user?.role === UserRole.PHOTOGRAPHER || user?.role === UserRole.EVENT_OWNER) && (
setIsEditProfileModalOpen(false)} >
e.stopPropagation()} > {/* Header */}
Avatar

Editar Perfil

Atualize suas informações pessoais

{/* Form */}
{ e.preventDefault(); // Aqui você pode adicionar a lógica para salvar os dados alert("Perfil atualizado com sucesso!"); setIsEditProfileModalOpen(false); }} > {/* Nome Completo */}
setProfileData({ ...profileData, name: e.target.value }) } className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" placeholder="Seu nome completo" required />
{/* Email */}
setProfileData({ ...profileData, email: e.target.value, }) } className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" placeholder="seu@email.com" required />
{/* Telefone */}
setProfileData({ ...profileData, phone: e.target.value, }) } className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all" placeholder="(00) 00000-0000" />
{/* Botões */}
)} ); };