import React from 'react';
import { LayoutList,
  Server,
  LayoutDashboard,
  Box,
  GitBranch,
  ScrollText,
  Container,
  LogOut,
  Wifi,
  WifiOff,
  Activity,
  BookOpen,
} from 'lucide-react';
const navItems = [
  { id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
  { id: 'apps', label: 'Applications', icon: Box },
  { id: 'deployments', label: 'Déploiements', icon: ScrollText },
  { id: 'gitea', label: 'Gitea', icon: GitBranch },
  { id: 'docker', label: 'Docker', icon: Container },
  { id: 'monitoring', label: 'Monitoring', icon: Activity },
  { id: 'documentation', label: 'Documentation Infra', icon: BookOpen },
  { id: 'inventaire', label: 'Inventaire Apps', icon: LayoutList },
];
export default function Sidebar({
  currentPage,
  onNavigate,
  onLogout,
  wsConnected,
}) {
  return (
    <aside className="w-64 bg-dark-900 border-r border-dark-700 flex flex-col h-screen fixed left-0 top-0">
      {/* Logo */}
      <div className="p-6 border-b border-dark-700">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-primary-600 flex items-center justify-center">
            <Server className="w-5 h-5 text-white" />
          </div>
          <div>
            <h1 className="text-lg font-bold text-white">Dashboard</h1>
            <p className="text-xs text-gray-500">Recette</p>
          </div>
        </div>
      </div>
      {/* Navigation */}
      <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = currentPage === item.id;
          const isDoc = item.id === 'documentation';
          return (
            <button
              key={item.id}
              onClick={() => onNavigate(item.id)}
              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                isActive
                  ? isDoc
                    ? 'bg-purple-600/10 text-purple-400 border border-purple-500/20'
                    : 'bg-primary-600/10 text-primary-400 border border-primary-500/20'
                  : isDoc
                  ? 'text-purple-400/70 hover:text-purple-300 hover:bg-purple-500/10'
                  : 'text-gray-400 hover:text-gray-200 hover:bg-dark-800'
              }`}
            >
              <Icon className="w-4.5 h-4.5" />
              {item.label}
            </button>
          );
        })}
      </nav>
      {/* Footer */}
      <div className="p-4 border-t border-dark-700 space-y-3">
        {/* WebSocket status */}
        <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-dark-800">
          {wsConnected ? (
            <>
              <Wifi className="w-4 h-4 text-emerald-400" />
              <span className="text-xs text-emerald-400">Temps réel actif</span>
            </>
          ) : (
            <>
              <WifiOff className="w-4 h-4 text-gray-500" />
              <span className="text-xs text-gray-500">Hors ligne</span>
            </>
          )}
        </div>
        <button
          onClick={onLogout}
          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
        >
          <LogOut className="w-4.5 h-4.5" />
          Déconnexion
        </button>
      </div>
    </aside>
  );
}
