kino-app/frontend/src/components/Navbar.jsx

import { Link, NavLink, useNavigate } from "react-router-dom";
import { useAuth } from "../lib/auth";
import { useProfile } from "../lib/profile";
import { Search, LogOut, Upload, Users, Settings as SettingsIcon } from "lucide-react";
import { useState, useEffect } from "react";

export const Navbar = () => {
  const { user, logout } = useAuth();
  const { active, clearActive } = useProfile();
  const nav = useNavigate();
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const linkClass = ({ isActive }) =>
    `text-sm tracking-wide transition-colors duration-300 ${isActive ? "text-white" : "text-[#8A8A8A] hover:text-white"}`;

  const switchProfile = () => {
    clearActive();
    nav("/profile");
  };

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? "glass border-b" : ""}`} data-testid="main-navbar">
      <div className="px-6 md:px-12 py-4 flex items-center justify-between">
        <div className="flex items-center gap-10">
          <Link to="/browse" className="flex items-center gap-2" data-testid="nav-logo">
            <span className="font-display text-2xl font-black tracking-tighter text-white">Kino</span>
            <span className="text-[#D9381E] text-2xl leading-none">.</span>
          </Link>
          {user && (
            <nav className="hidden md:flex items-center gap-7">
              <NavLink to="/browse" className={linkClass} data-testid="nav-browse">Library</NavLink>
              <NavLink to="/shows" className={linkClass} data-testid="nav-shows">Series</NavLink>
              <NavLink to="/my-list" className={linkClass} data-testid="nav-my-list">Shelf</NavLink>
              <NavLink to="/requests" className={linkClass} data-testid="nav-requests">Wishlist</NavLink>
              {user.is_admin && <NavLink to="/admin" className={linkClass} data-testid="nav-admin">Admin</NavLink>}
            </nav>
          )}
        </div>

        {user ? (
          <div className="flex items-center gap-4">
            <button onClick={() => nav("/search")} className="text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-search-button" aria-label="Search">
              <Search size={18} strokeWidth={1.5} />
            </button>
            {user.is_admin && (
              <>
                <button onClick={() => nav("/admin/upload")} className="hidden sm:flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-upload-button">
                  <Upload size={14} strokeWidth={1.5} /> Upload
                </button>
                <button onClick={() => nav("/admin/settings")} className="hidden sm:flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-settings-button">
                  <SettingsIcon size={14} strokeWidth={1.5} /> Settings
                </button>
              </>
            )}
            <div className="flex items-center gap-3 pl-4 border-l border-[#222]">
              <button onClick={switchProfile} className="flex items-center gap-2 group" data-testid="nav-switch-profile" title="Switch profile">
                {active && (
                  <>
                    <div className="hidden sm:flex flex-col items-end leading-tight">
                      <span className="text-xs text-white">{active.name}</span>
                      <span className="text-[10px] uppercase tracking-[0.2em] text-[#8A8A8A] group-hover:text-white transition-colors">switch</span>
                    </div>
                    <div className="w-8 h-8 flex items-center justify-center text-white text-xs font-medium" style={{ backgroundColor: active.avatar_color || "#D9381E" }}>
                      {active.name?.[0]?.toUpperCase() || "U"}
                    </div>
                  </>
                )}
                {!active && <Users size={18} strokeWidth={1.5} className="text-[#8A8A8A]" />}
              </button>
              <button onClick={() => { logout(); nav("/login"); }} className="text-[#8A8A8A] hover:text-white transition-colors duration-300" data-testid="nav-logout-button" aria-label="Logout">
                <LogOut size={16} strokeWidth={1.5} />
              </button>
            </div>
          </div>
        ) : (
          <Link to="/login" className="text-sm tracking-wide bg-[#D9381E] hover:bg-[#ED4B32] text-white px-5 py-2 transition-colors duration-300" data-testid="nav-sign-in">Sign in</Link>
        )}
      </div>
    </header>
  );
};

export default Navbar;