checklist/frontend/src/Sidebar.jsx

export default function Sidebar({ user, activeTab, setActiveTab, sidebarOpen, setSidebarOpen, onLogout }) {
  return (
    <aside className={`bg-gradient-to-b from-gray-900 via-indigo-950 to-purple-950 text-white transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'} flex flex-col fixed h-full z-10 shadow-2xl`}>
      {/* Sidebar Header */}
      <div className={`p-4 flex items-center ${sidebarOpen ? 'justify-between' : 'justify-center'} border-b border-indigo-800/50`}>
        {sidebarOpen && (
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">S</span>
            </div>
            <h2 className="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">Syntria</h2>
          </div>
        )}
        <button
          onClick={() => setSidebarOpen(!sidebarOpen)}
          className="p-2 rounded-lg hover:bg-indigo-800/50 transition"
          title={sidebarOpen ? 'Ocultar sidebar' : 'Mostrar sidebar'}
        >
          {sidebarOpen ? '☰' : '☰'}
        </button>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-2">
        <ul className="space-y-2">
          <li>
            <button
              onClick={() => setActiveTab('checklists')}
              className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                activeTab === 'checklists'
                  ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                  : 'text-indigo-200 hover:bg-indigo-900/50'
              }`}
              title={!sidebarOpen ? 'Checklists' : ''}
            >
              <span className="text-xl">📋</span>
              {sidebarOpen && <span>Checklists</span>}
            </button>
          </li>
          <li>
            <button
              onClick={() => setActiveTab('inspections')}
              className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                activeTab === 'inspections'
                  ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                  : 'text-indigo-200 hover:bg-indigo-900/50'
              }`}
              title={!sidebarOpen ? 'Inspecciones' : ''}
            >
              <span className="text-xl">🔍</span>
              {sidebarOpen && <span>Inspecciones</span>}
            </button>
          </li>
          {user.role === 'admin' && (
            <>
              <li>
                <button
                  onClick={() => setActiveTab('users')}
                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                    activeTab === 'users'
                      ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                      : 'text-indigo-200 hover:bg-indigo-900/50'
                  }`}
                  title={!sidebarOpen ? 'Usuarios' : ''}
                >
                  <span className="text-xl">👥</span>
                  {sidebarOpen && <span>Usuarios</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setActiveTab('reports')}
                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                    activeTab === 'reports'
                      ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                      : 'text-indigo-200 hover:bg-indigo-900/50'
                  }`}
                  title={!sidebarOpen ? 'Reportes' : ''}
                >
                  <span className="text-xl">📊</span>
                  {sidebarOpen && <span>Reportes</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setActiveTab('api-tokens')}
                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                    activeTab === 'api-tokens'
                      ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                      : 'text-indigo-200 hover:bg-indigo-900/50'
                  }`}
                  title={!sidebarOpen ? 'API Tokens' : ''}
                >
                  <span className="text-xl">🔑</span>
                  {sidebarOpen && <span>API Tokens</span>}
                </button>
              </li>
              <li>
                <button
                  onClick={() => setActiveTab('settings')}
                  className={`w-full flex items-center ${sidebarOpen ? 'gap-3 px-4' : 'justify-center px-2'} py-3 rounded-lg transition ${
                    activeTab === 'settings'
                      ? 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg'
                      : 'text-indigo-200 hover:bg-indigo-900/50'
                  }`}
                  title={!sidebarOpen ? 'Configuración' : ''}
                >
                  <span className="text-xl">⚙️</span>
                  {sidebarOpen && <span>Configuración</span>}
                </button>
              </li>
            </>
          )}
        </ul>
      </nav>

      {/* User Info */}
      <div className="p-4 border-t border-indigo-800/50">
        <div className={`flex items-center gap-3 ${!sidebarOpen && 'justify-center'}`}>
          <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0 shadow-lg">
            {user.username.charAt(0).toUpperCase()}
          </div>
          {sidebarOpen && (
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium truncate text-white">{user.full_name || user.username}</p>
              <p className="text-xs text-indigo-300">{user.role === 'admin' ? '👑 Admin' : '🔧 Mecánico'}</p>
            </div>
          )}
        </div>
        <button
          onClick={onLogout}
          className={`mt-3 w-full px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-lg hover:from-red-600 hover:to-pink-600 transition-all transform hover:scale-105 flex items-center justify-center gap-2 shadow-lg`}
          title={!sidebarOpen ? 'Cerrar Sesión' : ''}
        >
          {sidebarOpen ? (
            <>
              <span>Cerrar Sesión</span>
            </>
          ) : (
            <span className="text-lg">🚪</span>
          )}
        </button>
      </div>
    </aside>
  )
}