photum/components/Navbar.tsx

import React, { useState, useEffect } from 'react';
import { UserRole } from '../types';
import { useAuth } from '../contexts/AuthContext';
import { Menu, X, LogOut } from 'lucide-react';
import { Button } from './Button';

interface NavbarProps {
  onNavigate: (page: string) => void;
  currentPage: string;
}

export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
  const { user, logout } = useAuth();
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const getLinks = () => {
    if (!user) return [];

    switch (user.role) {
      case UserRole.SUPERADMIN:
      case UserRole.BUSINESS_OWNER:
        return [
          { name: 'Gestão de Eventos', path: 'dashboard' },
          { name: 'Equipe & Fotógrafos', path: 'team' },
          { name: 'Financeiro', path: 'finance' },
          { name: 'Configurações', path: 'settings' }
        ];
      case UserRole.EVENT_OWNER:
        return [
          { name: 'Meus Eventos', path: 'dashboard' },
          { name: 'Solicitar Evento', path: 'request-event' },
          { name: 'Álbuns Entregues', path: 'albums' }
        ];
      case UserRole.PHOTOGRAPHER:
        return [
          { name: 'Eventos Designados', path: 'dashboard' },
          { name: 'Meus Uploads', path: 'uploads' },
          { name: 'Agenda', path: 'calendar' }
        ];
      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 (
    <nav 
      className={`fixed w-full z-50 transition-all duration-300 border-b ${
        isScrolled ? 'bg-white/95 backdrop-blur-md shadow-sm border-gray-100 py-2' : 'bg-white border-transparent py-4'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-12">
          
          {/* Logo */}
          <div 
            className="flex-shrink-0 flex items-center cursor-pointer"
            onClick={() => onNavigate('home')}
          >
            <img 
              src="https://photum.com.br/wp-content/uploads/2019/09/logo-photum.png" 
              alt="Photum Formaturas" 
              className="h-10 md:h-12 w-auto object-contain transition-all hover:opacity-90"
              onError={(e) => {
                e.currentTarget.onerror = null; 
                e.currentTarget.style.display = 'none';
                e.currentTarget.nextElementSibling?.classList.remove('hidden');
              }}
            />
            {/* Fallback Text Logo if image fails */}
            <span className="hidden font-sans font-bold text-xl tracking-tight text-brand-black ml-2">
              PHOTUM<span className="font-light text-brand-gold">FORMATURAS</span>
            </span>
          </div>

          {/* Desktop Navigation */}
          {user && (
            <div className="hidden md:flex items-center space-x-6">
                {getLinks().map((link) => (
                <button
                    key={link.path}
                    onClick={() => onNavigate(link.path)}
                    className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${
                    currentPage === link.path ? 'text-brand-gold border-b-2 border-brand-gold' : 'text-gray-600 border-b-2 border-transparent'
                    }`}
                >
                    {link.name}
                </button>
                ))}
            </div>
          )}

          {/* Right Side Actions */}
          <div className="hidden md:flex items-center space-x-4">
            {user ? (
              <div className="flex items-center space-x-4 pl-4 border-l border-gray-200">
                 <div className="flex flex-col items-end mr-2">
                    <span className="text-sm font-bold text-brand-black leading-tight">{user.name}</span>
                    <span className="text-[10px] uppercase tracking-wider text-brand-gold leading-tight">{getRoleLabel()}</span>
                 </div>
                 <div className="h-9 w-9 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent hover:ring-brand-gold transition-all">
                    <img src={user.avatar} alt="Avatar" className="w-full h-full object-cover" />
                 </div>
                 <button onClick={logout} className="text-gray-400 hover:text-red-500 transition-colors p-1" title="Sair">
                    <LogOut size={18} />
                 </button>
              </div>
            ) : (
              <Button onClick={() => onNavigate('login')} size="sm">
                Login
              </Button>
            )}
          </div>

          {/* Mobile Button */}
          <div className="md:hidden flex items-center">
            <button
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="text-brand-black hover:text-brand-gold p-2"
            >
              {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 w-full bg-white border-b border-gray-100 shadow-lg fade-in">
          <div className="px-4 py-4 space-y-3">
             {user && getLinks().map((link) => (
              <button
                key={link.path}
                onClick={() => {
                  onNavigate(link.path);
                  setIsMobileMenuOpen(false);
                }}
                className="block w-full text-left text-base font-medium text-gray-700 hover:text-brand-gold py-2 border-b border-gray-50"
              >
                {link.name}
              </button>
            ))}
             <div className="pt-4">
                {user ? (
                    <div className="flex items-center justify-between">
                         <div className="flex items-center">
                            <img src={user.avatar} className="w-8 h-8 rounded-full mr-2"/>
                            <div>
                                <span className="font-bold text-sm block">{user.name}</span>
                                <span className="text-xs text-brand-gold">{getRoleLabel()}</span>
                            </div>
                         </div>
                         <Button variant="ghost" size="sm" onClick={logout}>Sair</Button>
                    </div>
                ) : (
                    <Button className="w-full" onClick={() => onNavigate('login')}>
                    Acessar Painel
                    </Button>
                )}
             </div>
          </div>
        </div>
      )}
    </nav>
  );
};