frontend/components/Sidebar.tsx

'use client';

import { 
  LayoutDashboard, 
  Activity, 
  Settings,
  Cpu,
  HelpCircle
} from 'lucide-react';

interface SidebarProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

export default function Sidebar({ activeTab, onTabChange }: SidebarProps) {
  const menuItems = [
    { id: 'dashboard', icon: LayoutDashboard, label: 'Dashboard', description: 'Live monitoring' },
    { id: 'models', icon: Cpu, label: 'Models', description: 'Quantum & Classical' },
  ];

  return (
    <aside className="fixed left-0 top-0 h-screen w-16 bg-white border-r border-gray-200 flex flex-col items-center py-4 z-50 shadow-sm">
      {/* Logo */}
      <div className="mb-6">
        <img 
          src="/logo.png" 
          alt="QFD Logo" 
          className="w-10 h-10 rounded-xl object-contain"
        />
      </div>

      {/* Main Menu */}
      <nav className="flex-1 flex flex-col items-center gap-1 w-full px-2">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeTab === item.id;
          return (
            <button
              key={item.id}
              onClick={() => onTabChange(item.id)}
              className={`w-full p-3 rounded-lg transition-all duration-200 flex items-center justify-center group relative ${
                isActive 
                  ? 'bg-gray-900 text-white shadow-md' 
                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
              }`}
              title={item.label}
            >
              <Icon size={20} />
              {/* Tooltip */}
              <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
                {item.label}
              </div>
            </button>
          );
        })}
      </nav>

      {/* Bottom Menu */}
      <div className="flex flex-col items-center gap-1 w-full px-2">
        <button
          onClick={() => onTabChange('settings')}
          className={`w-full p-3 rounded-lg transition-all duration-200 flex items-center justify-center group relative ${
            activeTab === 'settings' 
              ? 'bg-gray-900 text-white shadow-md' 
              : 'text-gray-500 hover:bg-gray-100 hover:text-gray-900'
          }`}
          title="Settings"
        >
          <Settings size={20} />
          <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
            Settings
          </div>
        </button>
        
        <button
          className="w-full p-3 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 flex items-center justify-center group relative"
          title="Help"
          onClick={() => window.open('https://github.com', '_blank')}
        >
          <HelpCircle size={20} />
          <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50 shadow-lg">
            Help & Docs
          </div>
        </button>
      </div>
    </aside>
  );
}