import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../../lib/AuthContext';
import { 
  LayoutDashboard, 
  Trophy, 
  Users, 
  User, 
  Calendar, 
  BarChart, 
  Settings, 
  LogOut,
  Zap
} from 'lucide-react';

const Sidebar = () => {
  const { logout } = useAuth();
  const navigate = useNavigate();


  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  const menuItems = [
    { icon: LayoutDashboard, label: 'Dashboard', path: '/' },
    { icon: Zap, label: 'Jogos Live', path: '/games/live' },
    { icon: Calendar, label: 'Jornadas', path: '/games' },
    { icon: Trophy, label: 'Classificação', path: '/standings' },
    { icon: Users, label: 'Clubes', path: '/clubs' },
    { icon: User, label: 'Jogadores', path: '/players' },
    { icon: BarChart, label: 'Melhores Marcadores', path: '/scorers' },
  ];

  return (
    <aside className="w-60 bg-bg-surface border-r border-border flex flex-col h-screen sticky top-0 z-20">
      <div className="p-5 flex items-center gap-3 border-b border-border h-20">
        <div className="bg-brand-primary p-2 rounded-xl shadow-lg shadow-brand-primary/20 shrink-0">
          <Zap className="text-bg-base fill-bg-base" size={22} />
        </div>
        <div className="flex flex-col leading-tight overflow-hidden">
          <span className="font-display text-[10px] text-brand-primary tracking-[0.2em] uppercase">Admin</span>
          <span className="font-display text-xl tracking-wide truncate">VdcScore</span>
        </div>
      </div>

      <nav className="flex-1 py-6 px-3 space-y-1 overflow-y-auto">
        {menuItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) => `
              flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 group
              ${isActive 
                ? 'bg-brand-primary/10 text-brand-primary' 
                : 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'}
            `}
          >
            {({ isActive }) => (
              <>
                <item.icon size={18} className={`shrink-0 ${isActive ? 'animate-pulse' : ''}`} />
                <span className="font-medium text-sm tracking-wide">{item.label}</span>
              </>
            )}
          </NavLink>
        ))}
      </nav>

      <div className="p-3 border-t border-border space-y-1 bg-bg-surface">
        <NavLink
          to="/settings"
          className={({ isActive }) => `
            flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all text-sm font-medium
            ${isActive ? 'bg-bg-elevated text-brand-primary' : 'text-text-secondary hover:bg-bg-elevated hover:text-text-primary'}
          `}
        >
          <Settings size={18} />
          <span>Definições</span>
        </NavLink>
        <button 
          onClick={handleLogout}
          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-brand-danger hover:bg-brand-danger/10 transition-all text-sm font-medium text-left"
        >
          <LogOut size={18} />
          <span>Sair</span>
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;