// frontend/src/components/Layout/Navbar.jsx

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Volleyball, LogOut, Lock } from 'lucide-react';

export default function Navbar({ title, subtitle, isAdmin }) {
    const location = useLocation();
    const isDashboard = location.pathname === '/';

    return (
        <nav className="bg-white/95 dark:bg-zinc-900/95 backdrop-blur-lg border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-[100] px-6 py-4 flex justify-between items-center shadow-sm">
            <Link to="/" className="flex items-center gap-4 cursor-pointer group select-none shrink-0">
                <div className="p-2.5 bg-orange-600 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-orange-600/30">
                    <Volleyball className="text-white" size={24} />
                </div>
                <div className="hidden sm:block">
                    <h1 className="text-2xl font-black tracking-tighter leading-none text-zinc-900 dark:text-white">VolleyManager</h1>
                    <p className="text-[10px] font-black text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mt-0.5">Tournament Ops</p>
                </div>
            </Link>

            <div className="absolute left-1/2 -translate-x-1/2 text-center pointer-events-none">
                <div className="font-black uppercase text-sm tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
                    {title || 'Dashboard'}
                </div>
                {subtitle && (
                    <div className="text-[10px] font-black text-zinc-400 dark:text-zinc-500 uppercase tracking-widest leading-none">
                        {subtitle}
                    </div>
                )}
            </div>

            <div className="flex gap-4 items-center">
                {isAdmin ? (
                    <button
                        onClick={() => { localStorage.removeItem('volleyToken'); window.location.reload(); }}
                        className="text-zinc-400 hover:text-red-500 transition active:scale-90"
                        title="Logout"
                    >
                        <LogOut size={22} />
                    </button>
                ) : (
                    <Link to="/login" className="text-orange-600 font-black flex items-center gap-2 text-[10px] uppercase tracking-widest hover:text-orange-500 transition group p-2 rounded-xl hover:bg-orange-50 dark:hover:bg-orange-950/20">
                        <Lock size={14} className="group-hover:-translate-y-0.5 transition-transform" /> <span>Login</span>
                    </Link>
                )}
            </div>
        </nav>
    );
}