import React from 'react';
import '../../styles/components.css';

const Sidebar = ({ isMobileMenuOpen, onToggleMobileMenu, activeView = 'dashboard', onNavigate }) => {
  const handleLogout = () => {
    try {
      localStorage.setItem('auth', 'false');
    } catch (e) {}
    window.location.reload();
  };

  const navItems = [
    { key: 'dashboard', icon: 'fas fa-tachometer-alt', label: 'Dashboard', badge: null },
    { key: 'scheduled', icon: 'fas fa-list', label: 'Solicitudes Programadas', badge: null },
    { key: 'create', icon: 'fas fa-plus-circle', label: 'Crear Solicitud', badge: null },
    { key: 'history', icon: 'fas fa-history', label: 'Historial', badge: null },
    { key: 'settings', icon: 'fas fa-cog', label: 'Configuración', badge: null },
    { key: 'help', icon: 'fas fa-question-circle', label: 'Ayuda', badge: null }
  ];

  const handleClick = (e, key) => {
    e.preventDefault();
    onNavigate?.(key);
  };

  return (
    <>
      <button 
        className="menu-toggle" 
        id="menuToggle"
        onClick={onToggleMobileMenu}
      >
        <i className="fas fa-bars"></i>
      </button>
      
      <div className={`sidebar ${isMobileMenuOpen ? 'active' : ''}`} id="sidebar">
        <div className="logo-container">
          <div className="logo">
            <div className="logo-icon">
              <i className="fas fa-clock"></i>
            </div>
            <div className="logo-text">Request <span>Scheduler</span></div>
          </div>
        </div>
        
        <div className="nav-container">
          <ul className="nav-links">
            {navItems.map((item) => (
              <li 
                key={item.key}
                className={activeView === item.key ? 'active' : ''}
                data-tooltip={item.label}
              >
                <a href="#" onClick={(e) => handleClick(e, item.key)}>
                  <i className={item.icon}></i>
                  <span>{item.label}</span>
                  {item.badge && <span className="badge">{item.badge}</span>}
                </a>
              </li>
            ))}
          </ul>
        </div>
        
        <div className="sidebar-footer">
          <div 
            className="user-info"
            role="button"
            tabIndex={0}
            onClick={() => onNavigate?.('profile')}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNavigate?.('profile'); } }}
            title="Ver perfil"
            style={{ cursor: 'pointer' }}
          >
            <div className="user-avatar">JP</div>
            <div className="user-details">
              <div className="user-name">Juan Pérez</div>
              <div className="user-role">Administrador</div>
            </div>
            <a href="#" style={{color: 'white'}} onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleLogout(); }} title="Cerrar sesión">
              <i className="fas fa-sign-out-alt"></i>
            </a>
          </div>
        </div>
      </div>
    </>
  );
};

export default Sidebar;