import React, { useState } from 'react';
import { Home, User, Camera, Edit2, Info, FileText, Settings, ChevronLeft, ChevronRight } from 'lucide-react';

type MenuKey = 'home' | 'patientinfo' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings';

type Props = {
  current: MenuKey;
  onNavigate: (key: MenuKey) => void;
};

export function Sidebar({ current, onNavigate }: Props) {
  const [collapsed, setCollapsed] = useState(true);
  const items: { key: MenuKey; label: string; icon: React.ReactNode }[] = [
    { key: 'home', label: 'Home', icon: <Home className="w-5 h-5" /> },
    { key: 'patientinfo', label: 'Patients', icon: <User className="w-5 h-5" /> },
    { key: 'capture', label: 'Capture', icon: <Camera className="w-5 h-5" /> },
    { key: 'annotation', label: 'Annotate', icon: <Edit2 className="w-5 h-5" /> },
    { key: 'compare', label: 'Compare', icon: <img src="/arrow.png" alt="Compare" className="w-6 h-6 brightness-0 opacity-70" /> },
    { key: 'report', label: 'Report', icon: <FileText className="w-5 h-5" /> }
  ];

  return (
    <aside className={`bg-white border-r border-gray-100 transition-all flex-shrink-0 ${collapsed ? 'w-16 md:w-20' : 'w-56 md:w-64'}`}>
      <div className="flex flex-col h-full">
        <div className="px-2 md:px-3 py-3 md:py-4 flex items-center justify-between">
          {!collapsed && <div className="font-bold text-sm md:text-lg text-[#0A2540]">Menu</div>}
          <button onClick={() => setCollapsed(c => !c)} className="p-1 rounded hover:bg-gray-100">
            {collapsed ? <ChevronRight className="w-4 h-4 md:w-5 md:h-5" /> : <ChevronLeft className="w-4 h-4 md:w-5 md:h-5" />}
          </button>
        </div>

        <nav className="flex-1 px-1 md:px-2 py-2 md:py-4 space-y-0.5 md:space-y-1">
          {items.map(item => {
            const active = current === item.key;
            return (
              <button key={item.key} onClick={() => onNavigate(item.key)} className={`w-full flex items-center gap-2 md:gap-3 px-2 md:px-3 py-1.5 md:py-2 rounded-lg text-left hover:bg-gray-50 transition-colors ${active ? 'bg-[#E0F2F1] border-l-4 border-[#05998c]' : ''}`}>
                <div className={`text-gray-600 flex-shrink-0 ${active ? 'text-[#0A2540]' : ''}`}>{item.icon}</div>
                {!collapsed && <span className={`text-xs md:text-sm truncate ${active ? 'text-[#0A2540] font-semibold' : 'text-gray-700'}`}>{item.label}</span>}
              </button>
            );
          })}
        </nav>

        <div className="px-1 md:px-2 py-2 md:py-4 border-t border-gray-100">
          <div className="px-0.5 md:px-1">
            <button onClick={() => onNavigate('settings')} className={`w-full flex items-center gap-2 md:gap-3 px-2 md:px-3 py-1.5 md:py-2 rounded-lg hover:bg-gray-50 transition-colors ${current === 'settings' ? 'bg-[#E0F2F1] border-l-4 border-[#05998c]' : ''}`}>
              <Settings className="w-4 h-4 md:w-5 md:h-5 text-gray-600 flex-shrink-0" />
              {!collapsed && <span className="text-xs md:text-sm text-gray-700 truncate">Settings</span>}
            </button>
          </div>
        </div>
      </div>
    </aside>
  );
}

export default Sidebar;