import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faBook,
  faPlus, 
  faFileImport, 
  faCompass, 
  faExchangeAlt,
  faCalendar,
  faClockRotateLeft,
  faCog,
  faDesktop,
  faChevronDown,
  faChevronUp
} from '@fortawesome/free-solid-svg-icons';

export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
  const [expandedMenus, setExpandedMenus] = useState({
    mangas: true, // Par défaut, le menu Mangas est ouvert
    settings: false,
    system: false
  });

  const menuItems = [
    {
      icon: faBook,
      text: 'Mangas',
      id: 'mangas',
      subItems: [
        { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
        { icon: faFileImport, text: 'Import bibliothèque', href: '#' },
        { icon: faCompass, text: 'Découvrir', href: '#' },
      ]
    },
    {
      icon: faExchangeAlt,
      text: 'Convertir CBR en CBZ',
      href: '#'
    },
    {
      icon: faCalendar,
      text: 'Calendrier',
      href: '#'
    },
    {
      icon: faClockRotateLeft,
      text: 'Activité',
      href: '#',
      badge: '3'
    },
    {
      icon: faCog,
      text: 'Paramètres',
      id: 'settings',
      subItems: [
        { text: 'Général', href: '#' },
        { text: 'Dossiers', href: '#' },
        { text: 'Scrappers', href: '#' },
        { text: 'UI', href: '#' }
      ]
    },
    {
      icon: faDesktop,
      text: 'Système',
      id: 'system',
      subItems: [
        { text: 'Status', href: '#' },
        { text: 'Backup', href: '#' },
        { text: 'Logs', href: '#' },
        { text: 'Updates', href: '#' }
      ]
    },
  ];

  const toggleMenu = (menuId) => {
    setExpandedMenus(prev => ({
      ...prev,
      [menuId]: !prev[menuId]
    }));
  };

  const MenuItem = ({ item }) => {
    const hasSubItems = item.subItems && item.subItems.length > 0;
    const isExpanded = item.id && expandedMenus[item.id];
    const isActive = false; // À implémenter avec un vrai système de routing
    
    return (
      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
        <button
          onClick={() => {
            if (hasSubItems) {
              toggleMenu(item.id);
            } else if (item.onClick) {
              item.onClick();
            } else if (item.href) {
              window.location.href = item.href;
            }
          }}
          className={`
            w-full text-left pl-4 py-2 flex items-center justify-between
            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
            transition-colors duration-150
          `}
        >
          <div className="flex items-center space-x-3">
            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
            <span>{item.text}</span>
          </div>
          {hasSubItems ? (
            <FontAwesomeIcon 
              icon={isExpanded ? faChevronUp : faChevronDown} 
              className="w-4 h-4 mr-4"
            />
          ) : item.badge ? (
            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
              {item.badge}
            </span>
          ) : null}
        </button>
        
        {hasSubItems && isExpanded && (
          <div className="ml-8 mt-2 space-y-2">
            {item.subItems.map((subItem, index) => (
              <a
                key={index}
                href={subItem.href}
                onClick={(e) => {
                  e.preventDefault();
                  if (subItem.onClick) {
                    subItem.onClick();
                  } else if (subItem.href !== '#') {
                    window.location.href = subItem.href;
                  }
                }}
                className="block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
              >
                {subItem.icon && (
                  <FontAwesomeIcon icon={subItem.icon} className="w-4 h-4 mr-2" />
                )}
                {subItem.text}
              </a>
            ))}
          </div>
        )}
      </div>
    );
  };

  return (
    <nav className={`
      w-60 bg-gray-600 h-full overflow-y-auto fixed left-0 top-16 transform transition-transform duration-200 ease-in-out z-40
      ${isOpen ? 'translate-x-0' : '-translate-x-full'}
      md:translate-x-0
    `}>
      <div className="py-4">
        <div className="space-y-1">
          {menuItems.map((item, index) => (
            <MenuItem key={index} item={item} />
          ))}
        </div>
      </div>
    </nav>
  );
}