import React from 'react';
import { Home, FolderOpen, Edit3, LayoutTemplate, LogOut, UserCircle, ShieldCheck } from 'lucide-react';
import { cn } from '../lib/utils';
import type { ActiveModule } from '../App';
import { ModelStatusBadge } from './ModelStatusBadge';
import { useStore } from '../store/useStore';
import { AiSegmentationIcon } from './AiSegmentationIcon';

interface SidebarProps {
  activeModule: ActiveModule;
  setActiveModule: (m: ActiveModule) => void;
}

export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
  const currentUser = useStore((state) => state.currentUser);
  const logout = useStore((state) => state.logout);
  const navItems = [
    { id: 'dashboard', icon: Home, label: '总体概况' },
    { id: 'projects', icon: FolderOpen, label: '项目库' },
    { id: 'workspace', icon: Edit3, label: '分割工作区' },
    { id: 'ai', icon: AiSegmentationIcon, label: 'AI智能分割' },
    { id: 'templates', icon: LayoutTemplate, label: '模板库' },
    ...(currentUser?.role === 'admin' ? [{ id: 'admin', icon: ShieldCheck, label: '用户管理' }] : []),
  ] as const;

  return (
    <aside className="w-16 flex flex-col items-center py-6 bg-[#0d0d0d] border-r border-white/10 z-50 gap-8">
      <div className="w-10 h-10 rounded-lg overflow-hidden flex items-center justify-center bg-white">
        <img src="/logo_square.png" alt="Logo" className="w-full h-full object-cover" />
      </div>
      <nav className="flex flex-col gap-6 w-full px-2">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeModule === item.id;
          return (
            <button
              key={item.id}
              onClick={() => setActiveModule(item.id as ActiveModule)}
              className={cn(
                "relative group flex items-center justify-center w-full aspect-square rounded-xl transition-all duration-200",
                isActive ? "text-cyan-400 border-l-2 border-cyan-400 bg-cyan-400/5 rounded-none aspect-auto py-2" : "text-gray-500 hover:text-white"
              )}
              title={item.label}
            >
              {/* Indicator removed in favor of border-l-2 added above */}
              <Icon size={22} strokeWidth={isActive ? 2.5 : 2} />
              
              <div className="absolute left-full ml-2 px-2 py-1 bg-[#222] border border-[#333] text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl">
                {item.label}
              </div>
            </button>
          );
        })}
      </nav>
      <div className="mt-auto mb-4 flex flex-col gap-4">
         <ModelStatusBadge compact />
         <button
           type="button"
           title={currentUser ? `当前用户：${currentUser.username}，点击退出` : '退出登录'}
           onClick={logout}
           className="group relative flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-gray-400 transition-colors hover:border-red-400/40 hover:bg-red-500/10 hover:text-red-200"
         >
           {currentUser ? <UserCircle size={20} /> : <LogOut size={20} />}
           <span className="absolute left-full ml-2 whitespace-nowrap rounded border border-[#333] bg-[#222] px-2 py-1 text-xs text-gray-200 opacity-0 shadow-xl transition-all group-hover:opacity-100">
             {currentUser ? `${currentUser.username} / 退出` : '退出登录'}
           </span>
         </button>
      </div>
    </aside>
  );
}
