import React from 'react';
import { Home, FolderOpen, Edit3, LayoutTemplate, BrainCircuit } from 'lucide-react';
import { cn } from '../lib/utils';
import type { ActiveModule } from '../App';
import { ModelStatusBadge } from './ModelStatusBadge';

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

export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
  const navItems = [
    { id: 'dashboard', icon: Home, label: '总体概况' },
    { id: 'projects', icon: FolderOpen, label: '项目库' },
    { id: 'workspace', icon: Edit3, label: '分割工作区' },
    { id: 'ai', icon: BrainCircuit, label: 'AI智能分割' },
    { id: 'templates', icon: LayoutTemplate, 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.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 />
      </div>
    </aside>
  );
}
