Sidebar.tsx

import React, { useState, useEffect } from 'react';
import { LayoutDashboard, Users, BookOpen, GraduationCap, Settings, LogOut, FileText, School, UserCog, Palette, X, Building, Gamepad2, CalendarCheck, UserCircle, MessageSquare, Bot, ArrowUp, ArrowDown, Save, UserCheck } from 'lucide-react';
import { UserRole } from '../types';
import { api } from '../services/api';

interface SidebarProps {
  currentView: string;
  onChangeView: (view: string) => void;
  userRole: UserRole;
  onLogout: () => void;
  isOpen: boolean;
  onClose: () => void;
}

interface MenuItem {
  id: string;
  label: string;
  icon: React.ElementType;
  roles: UserRole[];
}

export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, userRole, onLogout, isOpen, onClose }) => {
  const currentUser = api.auth.getCurrentUser();
  const canSeeAI = userRole === UserRole.ADMIN || (userRole === UserRole.TEACHER && currentUser?.aiAccess);
  const isHomeroom = userRole === UserRole.TEACHER && !!currentUser?.homeroomClass;

  // Default Items
  const defaultItems: MenuItem[] = [
    { id: 'dashboard', label: '工作台', icon: LayoutDashboard, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
    { id: 'my-class', label: '我的班级', icon: UserCheck, roles: isHomeroom ? [UserRole.TEACHER] : [] }, 
    { id: 'ai-assistant', label: 'AI 智能助教', icon: Bot, roles: canSeeAI ? [UserRole.ADMIN, UserRole.TEACHER] : [] }, 
    { id: 'attendance', label: '考勤管理', icon: CalendarCheck, roles: [UserRole.TEACHER, UserRole.PRINCIPAL] }, 
    { id: 'games', label: '互动教学', icon: Gamepad2, roles: [UserRole.TEACHER, UserRole.STUDENT] }, 
    { id: 'wishes', label: '心愿与反馈', icon: MessageSquare, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] }, 
    { id: 'students', label: '学生管理', icon: Users, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] },
    { id: 'classes', label: '班级管理', icon: School, roles: [UserRole.ADMIN, UserRole.PRINCIPAL] },
    { id: 'schools', label: '学校管理', icon: Building, roles: [UserRole.ADMIN] }, 
    { id: 'courses', label: '课程管理', icon: BookOpen, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] },
    { id: 'grades', label: '成绩管理', icon: GraduationCap, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] },
    { id: 'reports', label: '报表统计', icon: FileText, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
    { id: 'subjects', label: '学科设置', icon: Palette, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] },
    { id: 'users', label: '用户管理', icon: UserCog, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER] }, 
    { id: 'profile', label: '个人中心', icon: UserCircle, roles: [UserRole.ADMIN, UserRole.PRINCIPAL, UserRole.TEACHER, UserRole.STUDENT] },
    { id: 'settings', label: '系统设置', icon: Settings, roles: [UserRole.ADMIN, UserRole.PRINCIPAL] },
  ];

  const [menuItems, setMenuItems] = useState<MenuItem[]>(defaultItems);
  const [isEditing, setIsEditing] = useState(false);

  useEffect(() => {
      // Load saved order
      if (currentUser?.menuOrder && currentUser.menuOrder.length > 0) {
          const ordered: MenuItem[] = [];
          const map = new Map(defaultItems.map(i => [i.id, i]));
          // Add saved items in order
          currentUser.menuOrder.forEach(id => {
              if (map.has(id)) {
                  ordered.push(map.get(id)!);
                  map.delete(id);
              }
          });
          // Append any new/remaining items
          map.forEach(item => ordered.push(item));
          setMenuItems(ordered);
      }
  }, []);

  const handleMove = (index: number, direction: -1 | 1) => {
      const newItems = [...menuItems];
      const targetIndex = index + direction;
      if (targetIndex < 0 || targetIndex >= newItems.length) return;
      [newItems[index], newItems[targetIndex]] = [newItems[targetIndex], newItems[index]];
      setMenuItems(newItems);
  };

  const saveOrder = async () => {
      setIsEditing(false);
      const orderIds = menuItems.map(i => i.id);
      if (currentUser && currentUser._id) {
          try {
              await api.users.saveMenuOrder(currentUser._id, orderIds);
              // Update local user object
              const updatedUser = { ...currentUser, menuOrder: orderIds };
              localStorage.setItem('user', JSON.stringify(updatedUser));
          } catch(e) { console.error("Failed to save menu order"); }
      }
  };

  const sidebarClasses = `
    fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-white transition-transform duration-300 ease-in-out transform 
    ${isOpen ? 'translate-x-0' : '-translate-x-full'} 
    lg:relative lg:translate-x-0 lg:flex lg:flex-col lg:h-screen shadow-2xl lg:shadow-none
  `;

  return (
    <>
      {isOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm" onClick={onClose}></div>}

      <div className={sidebarClasses}>
        <div className="flex items-center justify-between h-20 border-b border-slate-700 px-6">
          <div className="flex items-center space-x-2">
            <GraduationCap className="h-8 w-8 text-blue-400" />
            <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-300">
              智慧校园
            </span>
          </div>
          <button onClick={onClose} className="lg:hidden text-slate-400 hover:text-white"><X size={24} /></button>
        </div>

        <div className="flex-1 overflow-y-auto py-4 custom-scrollbar">
          <div className="px-4 mb-2 flex justify-between items-center">
              <span className="text-xs text-slate-500 font-bold uppercase">主菜单</span>
              <button 
                onClick={() => isEditing ? saveOrder() : setIsEditing(true)} 
                className={`text-xs px-2 py-1 rounded hover:bg-slate-800 ${isEditing ? 'text-green-400' : 'text-slate-600'}`}
              >
                  {isEditing ? '完成' : '调整'}
              </button>
          </div>
          <nav className="space-y-1 px-2">
            {menuItems.map((item, idx) => {
              if (item.roles.length > 0 && !item.roles.includes(userRole)) return null;
              if (item.id === 'ai-assistant' && !canSeeAI) return null;
              // Special check for 'my-class': only homeroom teachers
              if (item.id === 'my-class' && !isHomeroom) return null;
              
              const Icon = item.icon;
              const isActive = currentView === item.id;
              
              return (
                <div key={item.id} className="flex items-center gap-1 group">
                    <button
                      onClick={() => !isEditing && onChangeView(item.id)}
                      disabled={isEditing}
                      className={`flex-1 flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors duration-200 ${
                        isActive
                          ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/50'
                          : 'text-slate-300 hover:bg-slate-800 hover:text-white'
                      } ${isEditing ? 'opacity-70 cursor-grab' : ''}`}
                    >
                      <Icon size={20} />
                      <span className="font-medium">{item.label}</span>
                    </button>
                    {isEditing && (
                        <div className="flex flex-col gap-1 pr-1">
                            <button onClick={()=>handleMove(idx, -1)} className="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white"><ArrowUp size={12}/></button>
                            <button onClick={()=>handleMove(idx, 1)} className="p-1 hover:bg-slate-700 rounded text-slate-400 hover:text-white"><ArrowDown size={12}/></button>
                        </div>
                    )}
                </div>
              );
            })}
          </nav>
        </div>

        <div className="p-4 border-t border-slate-700">
          <div className="px-4 py-2 mb-2 text-xs text-slate-500 flex justify-between">
              <span>当前角色:</span>
              <span className="text-slate-300 font-bold">
                  {userRole === 'ADMIN' ? '超级管理员' : 
                   userRole === 'PRINCIPAL' ? '校长' : 
                   userRole === 'TEACHER' ? '教师' : '学生'}
              </span>
          </div>
          <button onClick={onLogout} className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-slate-400 hover:bg-red-500/10 hover:text-red-400 transition-all duration-200">
            <LogOut size={20} />
            <span className="font-medium">退出登录</span>
          </button>
        </div>
      </div>
    </>
  );
};