import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { FaUsers, FaFilm, FaTrophy, FaHeadset, FaLightbulb, FaHome } from 'react-icons/fa';
import { useAuth } from '../../contexts/AuthContext';
import {
  canManageMedia,
  canManageUsers,
  canManageSeasons,
  canManageAchievements,
  canManageSuggestions,
  canManageSupport
} from '../../utils/permissions';

const AdminSidebar = () => {
  const location = useLocation();
  const { user } = useAuth();
  
  console.log('AdminSidebar - Current location:', location.pathname);

  const menuItems = [
    {
      title: 'Главная',
      path: '/admin',
      icon: <FaHome />,
      show: true // Всегда показываем главную
    },
    {
      title: 'Медиа',
      path: '/admin/media',
      icon: <FaFilm />,
      show: canManageMedia(user)
    },
    {
      title: 'Пользователи',
      path: '/admin/users',
      icon: <FaUsers />,
      show: canManageUsers(user)
    },
    {
      title: 'Сезоны',
      path: '/admin/seasons',
      icon: <FaFilm />,
      show: canManageSeasons(user)
    },
    {
      title: 'Достижения',
      path: '/admin/achievements',
      icon: <FaTrophy />,
      show: canManageAchievements(user)
    },
    {
      title: 'Поддержка',
      path: '/admin/support',
      icon: <FaHeadset />,
      show: canManageSupport(user)
    },
    {
      title: 'Предложения',
      path: '/admin/suggestions',
      icon: <FaLightbulb />,
      show: canManageSuggestions(user)
    }
  ];

  return (
    <div className="w-64 bg-campfire-darker min-h-screen p-4">
      <nav className="space-y-2">
        {menuItems.map((item) => {
          if (!item.show) return null;
          
          const isActive = location.pathname === item.path || 
                         (item.path !== '/admin' && location.pathname.startsWith(item.path));
          
          console.log(`AdminSidebar - Checking item ${item.path}:`, {
            pathname: location.pathname,
            itemPath: item.path,
            isActive
          });

          return (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                `flex items-center space-x-2 px-4 py-2 rounded-md transition-colors ${
                  isActive
                    ? 'bg-campfire-amber/20 text-campfire-amber'
                    : 'text-campfire-light hover:bg-campfire-ash/20'
                }`
              }
              onClick={(e) => {
                console.log(`AdminSidebar - Clicked on ${item.path}`);
                e.preventDefault();
                window.history.pushState({}, '', item.path);
                window.dispatchEvent(new PopStateEvent('popstate'));
              }}
            >
              {item.icon}
              <span>{item.title}</span>
            </NavLink>
          );
        })}
      </nav>
    </div>
  );
};

export default AdminSidebar; 