import React from 'react';
import { motion } from 'motion/react';
import { 
  BarChart3, 
  FolderRoot, 
  Workflow,
  Crosshair,
  Settings, 
  LogOut,
  ChevronLeft,
  ChevronRight,
  UserCircle
} from 'lucide-react';
import { ViewType } from '../types';
import { cn } from '../lib/utils';

interface SidebarProps {
  activeView: ViewType;
  setActiveView: (view: ViewType) => void;
  onLogout: () => void;
  collapsed: boolean;
  setCollapsed: (collapsed: boolean) => void;
}

export default function Sidebar({ 
  activeView, 
  setActiveView, 
  onLogout,
  collapsed,
  setCollapsed
}: SidebarProps) {
  const menuItems = [
    { id: ViewType.OVERVIEW, icon: BarChart3, label: '总体概况' },
    { id: ViewType.PROJECTS, icon: FolderRoot, label: '项目库' },
    { id: ViewType.WORKSPACE, icon: Workflow, label: '逆向工作区' },
    { id: ViewType.AUTO_MATCH, icon: Crosshair, label: '自动微调匹配工作区' },
    { id: ViewType.SYSTEM, icon: Settings, label: '系统管理工作区' },
  ];

  return (
    <motion.aside 
      animate={{ width: collapsed ? 80 : 260 }}
      className="h-screen bg-slate-900 text-slate-300 flex flex-col relative z-20 transition-all duration-300 shadow-2xl"
    >
      <div className="p-6 flex items-center gap-3 overflow-hidden">
        <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 overflow-hidden">
          <img
            src="/logo.png"
            alt="模型逆向系统"
            className="h-full w-full object-contain"
          />
        </div>
        {!collapsed && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="flex flex-col"
          >
            <h1 className="text-white font-bold text-sm tracking-wide">模型逆向系统</h1>
          </motion.div>
        )}
      </div>

      <nav className="flex-1 px-4 py-4 space-y-2">
        {menuItems.map((item) => (
          <button
            key={item.id}
            onClick={() => setActiveView(item.id)}
            className={cn(
              "w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all group",
              activeView === item.id 
                ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20" 
                : "hover:bg-slate-800 text-slate-400 hover:text-white"
            )}
          >
            <item.icon size={22} className={cn(
              "shrink-0",
              activeView === item.id ? "text-white" : "group-hover:scale-110 transition-transform"
            )} />
            {!collapsed && (
              <span className="font-medium whitespace-nowrap">{item.label}</span>
            )}
          </button>
        ))}
      </nav>

      <div className="p-4 border-t border-slate-800">
        <div className={cn(
          "flex items-center gap-3 p-2 rounded-xl bg-slate-800/50 mb-4",
          collapsed ? "justify-center" : "px-3"
        )}>
          <UserCircle size={24} className="text-blue-400 shrink-0" />
          {!collapsed && (
            <div className="overflow-hidden">
              <p className="text-sm font-semibold text-white truncate">Admin</p>
              <p className="text-xs text-slate-500 truncate">管理员</p>
            </div>
          )}
        </div>
        
        <button 
          onClick={onLogout}
          className={cn(
            "w-full flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-red-500/10 text-slate-400 hover:text-red-400 transition-all",
            collapsed ? "justify-center" : ""
          )}
        >
          <LogOut size={22} className="shrink-0" />
          {!collapsed && <span className="font-medium">退出登录</span>}
        </button>
      </div>

      <button
        onClick={() => setCollapsed(!collapsed)}
        className="absolute -right-3 top-20 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg hover:scale-110 transition-transform"
      >
        {collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
      </button>
    </motion.aside>
  );
}