/**
 * 用户管理组件
 * 提取自 app/admin/page.tsx 的用户管理功能
 */

'use client'

import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
import { format } from 'date-fns'
import type { User, Department } from '@/hooks/useAdminState'
import DepartmentTreeSelect from '@/components/DepartmentTreeSelect'
import { buildDepartmentDescendants } from '@/lib/departments'
import { parseFetchError, handleError } from '@/lib/error-handler'

// 用户分组类型（参考 flnxi_sucai）
interface DepartmentUserGrouping {
  managers: User[]
  regulars: User[]
}

interface UserManagementProps {
  users: User[]
  setUsers: React.Dispatch<React.SetStateAction<User[]>>
  departments: Department[]
  userSearchTerm: string
  setUserSearchTerm: React.Dispatch<React.SetStateAction<string>>
  collapsedDepartments: Set<string>
  collapsedAdmins: Set<string>
  toggleDepartmentCollapse: (dept: string) => void
  toggleAdminCollapse: (adminId: string) => void
  showToast: (message: string, type?: 'success' | 'error') => void
  fetchData: () => Promise<void>
  currentUserEmail?: string
}

export default function UserManagement({
  users,
  setUsers,
  departments,
  userSearchTerm,
  setUserSearchTerm,
  collapsedDepartments,
  collapsedAdmins,
  toggleDepartmentCollapse,
  toggleAdminCollapse,
  showToast,
  fetchData,
  currentUserEmail,
}: UserManagementProps) {
  // 编辑用户部门
  const [editingUser, setEditingUser] = useState<User | null>(null)
  const [selectedDepartment, setSelectedDepartment] = useState('')

  // 组织用户树形结构数据（根据部门层级结构，与部门管理逻辑统一）
  const getUserTreeData = useCallback(() => {
    // 构建部门ID到部门的映射
    const deptMap = new Map<string, Department>()
    departments.forEach(dept => {
      deptMap.set(dept.id, dept)
    })
    
    // 构建部门名称到部门的映射（用于匹配用户的department字段）
    const deptNameMap = new Map<string, Department>()
    departments.forEach(dept => {
      deptNameMap.set(dept.name, dept)
    })
    
    // 构建用户到部门的映射（通过department或departmentId）
    const getUserDepartment = (user: User): Department | null => {
      const userAny = user as any
      // 优先使用departmentRef.id（新字段，来自API的include）
      if (userAny.departmentRef?.id) {
        const dept = deptMap.get(userAny.departmentRef.id)
        if (dept) return dept
      }
      // 其次使用departmentId（新字段）
      if (userAny.departmentId) {
        const dept = deptMap.get(userAny.departmentId)
        if (dept) return dept
      }
      // 回退到department名称（旧字段）
      // 注意：department 可能是空字符串 ''，需要检查是否为 truthy
      if (user.department && user.department.trim() !== '') {
        const dept = deptNameMap.get(user.department)
        if (dept) return dept
      }
      return null
    }
    
    // 获取部门的所有用户（包括管理员和普通用户）- 只包括直接属于该部门的用户
    const getUsersByDepartment = (dept: Department): User[] => {
      return users.filter(u => {
        const userDept = getUserDepartment(u)
        return userDept && userDept.id === dept.id
      })
    }
    
    // 获取部门的管理员（通过managerId匹配）
    const getDepartmentManager = (dept: Department): User | null => {
      if (!dept.managerId) return null
      return users.find(u => u.id === dept.managerId) || null
    }
    
    // 构建部门用户分组映射（参考 flnxi_sucai 的 departmentUsersMap 逻辑）
    const departmentUsersMap = (() => {
      const map = new Map<string, DepartmentUserGrouping>()
      
      // 确保每个部门都有条目
      const ensureEntry = (deptName: string): DepartmentUserGrouping => {
        if (!map.has(deptName)) {
          map.set(deptName, { managers: [], regulars: [] })
        }
        return map.get(deptName)!
      }
      
      // 用户排序函数
      const sortUsers = (a: User, b: User): number => {
        const userAnyA = a as any
        const userAnyB = b as any
        // 超级管理员优先
        if (userAnyA.isSuperAdmin && !userAnyB.isSuperAdmin) return -1
        if (!userAnyA.isSuperAdmin && userAnyB.isSuperAdmin) return 1
        // 管理员角色优先
        if ((userAnyA.role === 'SYSTEM_ADMIN' || userAnyA.role === 'DEPT_ADMIN' || userAnyA.role === 'ADMIN') &&
            (userAnyB.role !== 'SYSTEM_ADMIN' && userAnyB.role !== 'DEPT_ADMIN' && userAnyB.role !== 'ADMIN')) return -1
        if ((userAnyA.role !== 'SYSTEM_ADMIN' && userAnyA.role !== 'DEPT_ADMIN' && userAnyA.role !== 'ADMIN') &&
            (userAnyB.role === 'SYSTEM_ADMIN' || userAnyB.role === 'DEPT_ADMIN' || userAnyB.role === 'ADMIN')) return 1
        // 按用户名排序
        const labelA = (a.username || a.email || '').toLowerCase()
        const labelB = (b.username || b.email || '').toLowerCase()
        return labelA.localeCompare(labelB, 'zh-CN')
      }
      
      // 遍历所有用户，分组到对应部门
      users.forEach(user => {
        const userDept = getUserDepartment(user)
        const deptName = userDept ? userDept.name : '未分配部门'
        const entry = ensureEntry(deptName)
        
        const userAny = user as any
        // 判断是否为管理员：超级管理员、部门管理员（通过managerId匹配）、管理员角色
        const isManager = userAny.isSuperAdmin || 
                         userDept?.managerId === user.id ||
                         userAny.role === 'SYSTEM_ADMIN' || 
                         userAny.role === 'DEPT_ADMIN' || 
                         userAny.role === 'ADMIN'
        
        if (isManager) {
          entry.managers.push(user)
        } else {
          entry.regulars.push(user)
        }
      })
      
      // 确保所有部门都有条目（即使没有用户）
      departments.forEach(dept => {
        ensureEntry(dept.name)
      })
      ensureEntry('未分配部门')
      
      // 排序每个分组内的用户
      map.forEach(entry => {
        entry.managers.sort(sortUsers)
        entry.regulars.sort(sortUsers)
      })
      
      return map
    })()
    
    // 构建部门树形结构（与部门管理逻辑统一：找出所有顶级部门，然后使用childrenMap）
    const departmentTree = (() => {
      // 找出所有顶级部门（没有parentId或parentId不在列表中）
      const topLevelDepts = departments.filter(dept => !dept.parentId || !departments.find(d => d.id === dept.parentId))
      
      // 构建子部门映射
      const childrenMap = new Map<string, Department[]>()
      departments.forEach(dept => {
        if (dept.parentId) {
          if (!childrenMap.has(dept.parentId)) {
            childrenMap.set(dept.parentId, [])
          }
          childrenMap.get(dept.parentId)!.push(dept)
        }
      })

      // 排序子部门
      childrenMap.forEach((children) => {
        children.sort((a, b) => {
          const sortA = a.sortOrder ?? 0
          const sortB = b.sortOrder ?? 0
          if (sortA !== sortB) return sortA - sortB
          return a.name.localeCompare(b.name)
        })
      })

      return { topLevelDepts, childrenMap }
    })()
    
    // 递归获取部门及其所有子部门的用户总数（用于显示）
    const getTotalUsersCountIncludingChildren = (deptId: string): number => {
      let count = getUsersByDepartment({ id: deptId } as Department).length
      const children = departmentTree.childrenMap.get(deptId) || []
      children.forEach(child => {
        count += getTotalUsersCountIncludingChildren(child.id)
      })
      return count
    }
    
    // 获取未分配部门的用户（包括department为空字符串、null、undefined或找不到匹配部门的情况）
    const usersWithoutDepartment = users.filter(u => {
      const userDept = getUserDepartment(u)
      // 如果找不到匹配的部门，则认为是未分配部门的用户
      if (!userDept) return true
      return false
    })
    
    return {
      departmentTree,
      getUsersByDepartment,
      getTotalUsersCountIncludingChildren,
      getDepartmentManager,
      getUserDepartment,
      usersWithoutDepartment,
      departmentUsersMap,
    }
  }, [users, departments])

  // 编辑用户部门
  const handleEditUserDepartment = (user: User) => {
    setEditingUser(user)
    // 获取用户的部门名称（API接受名称）
    setSelectedDepartment(user.department || '')
  }

  // 更新用户部门
  const handleUpdateUserDepartment = async () => {
    if (!editingUser) return

    try {
      const response = await fetch('/api/admin/users/update-department', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: editingUser.id,
          department: selectedDepartment,
        }),
      })

      if (response.ok) {
        // 重新获取数据以同步更新
        await fetchData()
        setEditingUser(null)
        setSelectedDepartment('')
        showToast('部门更新成功')
      } else {
        const parsedError = await parseFetchError(response)
        showToast(parsedError.message, 'error')
      }
    } catch (error) {
      console.error('Update department error:', error)
      const { message } = handleError(error)
      showToast(message, 'error')
    }
  }

  // 归档用户，素材和历史记录保留
  const handleDeleteUser = async (id: string) => {
    if (!confirm('确定要归档这个用户吗？归档后账号无法登录，素材和历史记录会保留。')) return

    try {
      const response = await fetch(`/api/admin/users?id=${id}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        setUsers(prevUsers => prevUsers.map(user => (
          user.id === id
            ? { ...user, status: 'archived', isActive: false, archivedAt: new Date().toISOString() }
            : user
        )))
        showToast('用户已归档')
      } else {
        const parsedError = await parseFetchError(response)
        showToast(parsedError.message, 'error')
      }
    } catch (error) {
      console.error('Error deleting user:', error)
      const { message } = handleError(error)
      showToast(message, 'error')
    }
  }

  // 切换下载权限
  const handleToggleDownload = async (userId: string, currentCanDownload: boolean) => {
    const action = currentCanDownload ? '关闭' : '开启'
    if (!confirm(`确定要${action}该用户的下载权限吗？`)) return

    try {
      const response = await fetch('/api/admin/users/toggle-download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId }),
      })

      if (response.ok) {
        setUsers(prevUsers => 
          prevUsers.map(user => 
            user.id === userId 
              ? { ...user, canDownload: !currentCanDownload }
              : user
          )
        )
        showToast(`下载权限已${action}`)
      } else {
        const data = await response.json()
        showToast(data.error || '操作失败', 'error')
      }
    } catch (error) {
      console.error('Error toggling download permission:', error)
      showToast('操作失败', 'error')
    }
  }

  // 切换激活状态
  const handleToggleActive = async (userId: string, currentStatus: boolean) => {
    const action = currentStatus ? '禁用' : '激活'
    if (!confirm(`确定要${action}这个用户吗？`)) return

    try {
      const response = await fetch('/api/admin/users/toggle-active', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId,
          isActive: !currentStatus,
        }),
      })

      if (response.ok) {
        setUsers(prevUsers => 
          prevUsers.map(user => 
            user.id === userId 
              ? { ...user, isActive: !currentStatus }
              : user
          )
        )
        showToast(`${action}成功`)
      } else {
        const data = await response.json()
        showToast(data.error || `${action}失败`, 'error')
      }
    } catch (error) {
      console.error('Toggle active error:', error)
      showToast(`${action}失败`, 'error')
    }
  }

  // 角色选项配置（阶段四：支持所有角色）
  const roleOptions = [
    { value: 'USER', label: '普通用户', description: '基础权限，可上传和查看素材' },
    { value: 'ADMIN', label: '管理员', description: '系统管理员（向后兼容，建议使用系统管理员）' },
    { value: 'DEPT_ADMIN', label: '部门管理员', description: '管理指定部门的用户和素材' },
    { value: 'SYSTEM_ADMIN', label: '系统管理员', description: '拥有系统级管理权限' },
  ]

  // 获取角色标签
  const getRoleLabel = (role: string) => {
    const option = roleOptions.find(r => r.value === role)
    return option?.label || role
  }

  // 设置角色（阶段四：支持所有角色）
  const handleSetRole = async (userId: string, newRole: string) => {
    if (!confirm(`确定要将用户角色设置为"${getRoleLabel(newRole)}"吗？`)) return

    try {
      const response = await fetch('/api/admin/users/set-role', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId,
          role: newRole,
        }),
      })

      if (response.ok) {
        setUsers(prevUsers => 
          prevUsers.map(user => 
            user.id === userId 
              ? { ...user, role: newRole }
              : user
          )
        )
        showToast(`角色已设置为"${getRoleLabel(newRole)}"`)
      } else {
        const data = await response.json()
        showToast(data.error || '设置角色失败', 'error')
      }
    } catch (error) {
      console.error('Set role error:', error)
      showToast('设置角色失败', 'error')
    }
  }

  const treeData = getUserTreeData()
  const filteredUsers = useMemo(() => {
    if (!userSearchTerm) return users
    const searchLower = userSearchTerm.toLowerCase()
    return users.filter(user => 
      user.username.toLowerCase().includes(searchLower) ||
      (user.department && user.department.toLowerCase().includes(searchLower)) ||
      ((user as any).realName && (user as any).realName.toLowerCase().includes(searchLower)) ||
      (user.email && user.email.toLowerCase().includes(searchLower))
    )
  }, [users, userSearchTerm])

  // 当有搜索条件时，自动展开包含匹配用户的部门
  useEffect(() => {
    if (!userSearchTerm) return

    // 找出包含匹配用户的部门ID
    const departmentsWithMatches = new Set<string>()
    
    filteredUsers.forEach(user => {
      const userDept = treeData.getUserDepartment(user)
      if (userDept) {
        // 添加该部门及其所有父部门
        let currentDept: Department | null = userDept
        while (currentDept) {
          departmentsWithMatches.add(currentDept.id)
          // 查找父部门
          currentDept = currentDept.parentId 
            ? departments.find(d => d.id === currentDept!.parentId) || null
            : null
        }
      }
    })

    // 自动展开包含匹配用户的部门
    departmentsWithMatches.forEach(deptId => {
      if (collapsedDepartments.has(deptId)) {
        toggleDepartmentCollapse(deptId)
      }
    })

    // 如果有未分配部门的匹配用户，展开未分配部门
    const hasUnassignedMatches = treeData.usersWithoutDepartment.some(u => 
      filteredUsers.some(fu => fu.id === u.id)
    )
    if (hasUnassignedMatches && collapsedDepartments.has('__UNASSIGNED__')) {
      toggleDepartmentCollapse('__UNASSIGNED__')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userSearchTerm, filteredUsers])

  // 检查部门或其子部门是否有匹配的用户（用于搜索时过滤部门）
  const hasMatchingUsersInDepartment = useCallback((dept: Department): boolean => {
    if (!userSearchTerm) return true // 没有搜索条件时，显示所有部门
    
    // 检查该部门是否有匹配的用户
    const userGrouping = treeData.departmentUsersMap.get(dept.name) || { managers: [], regulars: [] }
    const allDeptUsers = [...userGrouping.managers, ...userGrouping.regulars]
    const hasMatchingUsers = allDeptUsers.some(u => filteredUsers.some(fu => fu.id === u.id))
    
    if (hasMatchingUsers) return true
    
    // 检查子部门是否有匹配的用户（递归）
    const children = treeData.departmentTree.childrenMap.get(dept.id) || []
    for (const childDept of children) {
      if (hasMatchingUsersInDepartment(childDept)) {
        return true
      }
    }
    
    return false
  }, [userSearchTerm, filteredUsers, treeData])

  // 递归渲染部门树（使用用户分组逻辑，参考 flnxi_sucai）
  const renderDepartmentNode = (dept: Department, level: number = 0): React.ReactNode => {
    // 如果有搜索条件，只显示包含匹配用户的部门
    if (userSearchTerm && !hasMatchingUsersInDepartment(dept)) {
      return null
    }
    
    const children = treeData.departmentTree.childrenMap.get(dept.id) || []
    const hasChildren = children.length > 0
    
    // 使用分组后的用户数据
    const userGrouping = treeData.departmentUsersMap.get(dept.name) || { managers: [], regulars: [] }
    const managers = userGrouping.managers
    const regulars = userGrouping.regulars
    
    // 过滤用户（如果有搜索条件）
    const filteredManagers = !userSearchTerm 
      ? managers 
      : managers.filter(u => filteredUsers.some(fu => fu.id === u.id))
    const filteredRegulars = !userSearchTerm 
      ? regulars 
      : regulars.filter(u => filteredUsers.some(fu => fu.id === u.id))
    
    // 获取包括子部门在内的总用户数
    const totalUsersCount = treeData.getTotalUsersCountIncludingChildren(dept.id)
    
    // 统计未激活人数（统计该部门的所有用户，包括管理员和普通成员）
    const allDeptUsers = [...managers, ...regulars]
    const inactiveCount = allDeptUsers.filter(u => {
      const userAny = u as any
      const isActive = userAny.isActive !== false && userAny.status !== 'inactive' && userAny.status !== 'disabled'
      return !isActive
    }).length
    
    // 检查是否有用户（包括子部门的用户）或有子部门，如果有就可以展开
    const hasUsers = filteredManagers.length > 0 || filteredRegulars.length > 0
    const hasUsersInChildren = hasChildren && totalUsersCount > allDeptUsers.length
    const canExpand = hasUsers || hasUsersInChildren || hasChildren
    const isCollapsed = collapsedDepartments.has(dept.id)
    const indent = level * 24
    const paddingLeftStyle = { paddingLeft: `${indent + 16}px` }
    
    // 渲染用户组（管理员或普通成员）
    const renderUserGroup = (userList: User[], isManagerGroup: boolean, hasManagers: boolean) => {
      if (userList.length === 0) return null
      
      return (
        <div className="space-y-2">
          {isManagerGroup && (
            <div className="text-xs font-semibold text-purple-600 dark:text-purple-300 px-4 py-1">
              管理员
            </div>
          )}
          {!isManagerGroup && userList.length > 0 && hasManagers && (
            <div className="text-xs font-semibold text-gray-600 dark:text-gray-400 px-4 py-1">
              成员
            </div>
          )}
          <div className="space-y-1">
            {userList.map((user) => (
              <div key={user.id} style={{ paddingLeft: `${(level + 1) * 24 + 16}px` }}>
                <UserRow
                  user={user}
                  indentLevel={0}
                  onEditDepartment={handleEditUserDepartment}
                  onSetRole={handleSetRole}
                  onToggleActive={handleToggleActive}
                  onToggleDownload={handleToggleDownload}
                  onDelete={handleDeleteUser}
                  roleOptions={roleOptions}
                  getRoleLabel={getRoleLabel}
                  isManager={isManagerGroup}
                />
              </div>
            ))}
          </div>
        </div>
      )
    }
    
    return (
      <div key={dept.id}>
        <div
          className={`border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden ${level > 0 ? 'mt-2' : ''}`}
        >
          {/* 部门标题行 */}
          <div 
            className={`bg-blue-50 dark:bg-blue-900/20 p-4 ${canExpand ? 'cursor-pointer' : ''} hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors`}
            style={paddingLeftStyle}
            onClick={() => canExpand && toggleDepartmentCollapse(dept.id)}
          >
            <div className="flex items-center gap-3">
              {canExpand && (
                <div
                  className="flex-shrink-0 w-6 h-6 flex items-center justify-center"
                  onClick={(e) => e.stopPropagation()}
                >
                  <svg className={`w-4 h-4 transform transition-transform ${isCollapsed ? '' : 'rotate-90'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </div>
              )}
              
              <div className="flex-1">
                <div className="flex items-center gap-2 flex-wrap">
                  <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                  <span className="font-medium text-gray-900 dark:text-white">{dept.name}</span>
                  {dept.code && (
                    <span className="text-xs text-gray-500 dark:text-gray-400">({dept.code})</span>
                  )}
                  {managers.length > 0 && (
                    <div className="flex items-center gap-1.5 flex-wrap">
                      <span className="text-xs text-gray-500 dark:text-gray-400">管理员：</span>
                      {managers.slice(0, 3).map((mgr) => (
                        <span 
                          key={mgr.id}
                          className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs rounded-full"
                        >
                          {mgr.username}
                        </span>
                      ))}
                      {managers.length > 3 && (
                        <span className="text-xs text-gray-500 dark:text-gray-400">
                          等{managers.length}人
                        </span>
                      )}
                    </div>
                  )}
                  <span className="text-xs text-gray-500 dark:text-gray-400">
                    ({totalUsersCount} 人
                    {hasChildren && totalUsersCount > allDeptUsers.length && (
                      <span className="text-blue-600 dark:text-blue-400">，含子部门</span>
                    )}
                    {inactiveCount > 0 && (
                      <span className="text-red-600 dark:text-red-400">，{inactiveCount} 人未激活</span>
                    )}
                    )
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* 部门用户列表（使用分组显示） */}
          {!isCollapsed && (
            <div className="space-y-3 py-2">
              {/* 显示"暂无成员"提示 */}
              {filteredManagers.length === 0 && filteredRegulars.length === 0 && (
                <div className="px-4 py-2 border-dashed border-2 border-gray-200 dark:border-gray-700 rounded-lg text-xs text-gray-500 dark:text-gray-400 mx-4">
                  暂无成员
                </div>
              )}
              
              {/* 管理员组 */}
              {renderUserGroup(filteredManagers, true, filteredManagers.length > 0)}
              
              {/* 普通成员组 */}
              {renderUserGroup(filteredRegulars, false, filteredManagers.length > 0)}
            </div>
          )}
        </div>
        
        {/* 递归渲染子部门 */}
        {!isCollapsed && hasChildren && (
          <div className="ml-4">
            {children.map(child => renderDepartmentNode(child, level + 1))}
          </div>
        )}
      </div>
    )
  }

  return (
    <div className="card-apple overflow-hidden">
      {/* 用户搜索框 */}
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="relative">
          <input
            type="text"
            placeholder="搜索用户名或部门..."
            value={userSearchTerm}
            onChange={(e) => setUserSearchTerm(e.target.value)}
            className="w-full px-4 py-2 pl-10 rounded-apple border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-gray-900 dark:focus:border-gray-400 focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-600 outline-none"
          />
          <svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      {/* 树形结构显示 */}
      <div className="p-6">
        <div className="space-y-2">
          {/* 根据部门层级结构显示（与部门管理逻辑统一） */}
          {treeData.departmentTree.topLevelDepts.map(dept => renderDepartmentNode(dept, 0))}

          {/* 未分配部门的用户 */}
          {treeData.usersWithoutDepartment.length > 0 && (() => {
            // 如果有搜索条件，只显示匹配的用户
            const unassignedUsers = !userSearchTerm 
              ? treeData.usersWithoutDepartment
              : treeData.usersWithoutDepartment.filter(u => filteredUsers.some(fu => fu.id === u.id))
            
            // 如果有搜索条件但没有匹配的用户，不显示未分配部门
            if (userSearchTerm && unassignedUsers.length === 0) {
              return null
            }
            
            const isCollapsed = collapsedDepartments.has('__UNASSIGNED__')
            
            // 统计未激活人数
            const inactiveCount = treeData.usersWithoutDepartment.filter(u => {
              const userAny = u as any
              const isActive = userAny.isActive !== false && userAny.status !== 'inactive' && userAny.status !== 'disabled'
              return !isActive
            }).length
            
            return (
              <div className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden">
                <div 
                  className="bg-gray-50 dark:bg-gray-900/20 p-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                  onClick={() => unassignedUsers.length > 0 && toggleDepartmentCollapse('__UNASSIGNED__')}
                >
                  <div className="flex items-center gap-3">
                    {unassignedUsers.length > 0 && (
                      <div
                        className="flex-shrink-0 w-6 h-6 flex items-center justify-center"
                        onClick={(e) => e.stopPropagation()}
                      >
                        <svg className={`w-4 h-4 transform transition-transform ${isCollapsed ? '' : 'rotate-90'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </div>
                    )}
                    
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        <span className="font-medium text-gray-900 dark:text-white">未分配部门</span>
                        <span className="text-xs text-gray-500 dark:text-gray-400">
                          ({treeData.usersWithoutDepartment.length} 人
                          {inactiveCount > 0 && (
                            <span className="text-red-600 dark:text-red-400">，{inactiveCount} 人未激活</span>
                          )}
                          )
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                {!isCollapsed && unassignedUsers.map((user) => (
                  <div key={user.id} style={{ paddingLeft: '40px' }}>
                    <UserRow
                      user={user}
                      indentLevel={0}
                      onEditDepartment={handleEditUserDepartment}
                      onSetRole={handleSetRole}
                      onToggleActive={handleToggleActive}
                      onToggleDownload={handleToggleDownload}
                      onDelete={handleDeleteUser}
                      roleOptions={roleOptions}
                      getRoleLabel={getRoleLabel}
                    />
                  </div>
                ))}
              </div>
            )
          })()}

          {users.length === 0 && (
            <div className="text-center py-12 text-gray-500 dark:text-gray-400">
              暂无用户
            </div>
          )}
        </div>
      </div>

      {/* 编辑部门弹窗 */}
      {editingUser && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-96 max-w-[90vw]">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              编辑用户部门
            </h3>
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
              用户: {editingUser.username}
            </p>
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                部门
              </label>
              <DepartmentTreeSelect
                departments={departments}
                value={selectedDepartment}
                onChange={(deptId) => {
                  // 将部门ID转换为部门名称（API接受名称）
                  const dept = departments.find(d => d.id === deptId || d.name === deptId)
                  setSelectedDepartment(dept ? dept.name : '')
                }}
                placeholder="请选择部门"
                allowEmpty={true}
                emptyLabel="未分配"
                className="w-full"
              />
            </div>
            <div className="flex justify-end gap-3">
              <button
                onClick={() => {
                  setEditingUser(null)
                  setSelectedDepartment('')
                }}
                className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
              >
                取消
              </button>
              <button
                onClick={handleUpdateUserDepartment}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                保存
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}

// 用户行组件
interface UserRowProps {
  user: User
  indentLevel: number
  onEditDepartment: (user: User) => void
  onSetRole: (userId: string, newRole: string) => void
  onToggleActive: (userId: string, currentStatus: boolean) => void
  onToggleDownload: (userId: string, currentCanDownload: boolean) => void
  onDelete: (userId: string) => void
  roleOptions: Array<{ value: string; label: string; description: string }>
  getRoleLabel: (role: string) => string
  isManager?: boolean
}

function UserRow({
  user,
  indentLevel,
  onEditDepartment,
  onSetRole,
  onToggleActive,
  onToggleDownload,
  onDelete,
  roleOptions,
  getRoleLabel,
  isManager = false,
}: UserRowProps) {
  const [showRoleMenu, setShowRoleMenu] = useState(false)
  
  // 获取角色标签颜色
  const getRoleColor = (role: string) => {
    switch (role) {
      case 'SYSTEM_ADMIN':
        return 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200'
      case 'ADMIN':
        return 'bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200'
      case 'DEPT_ADMIN':
        return 'bg-cyan-100 dark:bg-cyan-900 text-cyan-800 dark:text-cyan-200'
      case 'USER':
      default:
        return 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
    }
  }
  
  return (
    <div className={`bg-white dark:bg-gray-800 p-4 border-t border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors ${isManager ? 'bg-purple-50/50 dark:bg-purple-900/10' : ''}`}>
      <div className="flex items-center gap-3">
        <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
        </svg>
        
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <span className="text-sm font-medium text-gray-900 dark:text-white">{user.username}</span>
            {/* 管理员标识 */}
            {isManager && (
              <span className="px-2 py-0.5 bg-purple-600 text-white text-xs rounded-full">部门管理员</span>
            )}
            {/* 角色标签（阶段四新增） */}
            <span className={`px-2 py-0.5 text-xs rounded-full ${getRoleColor(user.role)}`}>
              {getRoleLabel(user.role)}
            </span>
            <span className={`px-2 py-0.5 text-xs rounded-full ${
              user.isActive 
                ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' 
                : 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200'
            }`}>
              {user.isActive ? '已激活' : '未激活'}
            </span>
            <span className={`px-2 py-0.5 text-xs rounded-full ${
              user.canDownload 
                ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' 
                : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'
            }`}>
              {user.canDownload ? '可下载' : '禁止下载'}
            </span>
          </div>
          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            素材: {user._count.materials} | 注册: {format(new Date(user.createdAt), 'yyyy-MM-dd')}
          </div>
        </div>
        
        <div className="flex items-center gap-2 relative">
          <button
            onClick={() => onEditDepartment(user)}
            className="px-2 py-1 text-xs text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded transition-colors"
          >
            编辑
          </button>
          {/* 角色选择下拉菜单（阶段四更新） */}
          <div className="relative">
            <button
              onClick={() => setShowRoleMenu(!showRoleMenu)}
              className="px-2 py-1 text-xs text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/30 rounded transition-colors"
            >
              设置角色
            </button>
            {showRoleMenu && (
              <>
                <div 
                  className="fixed inset-0 z-10" 
                  onClick={() => setShowRoleMenu(false)}
                />
                <div className="absolute right-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-20">
                  <div className="py-1">
                    {roleOptions.map((option) => (
                      <button
                        key={option.value}
                        onClick={() => {
                          if (user.role !== option.value) {
                            onSetRole(user.id, option.value)
                          }
                          setShowRoleMenu(false)
                        }}
                        className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
                          user.role === option.value 
                            ? 'bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400' 
                            : 'text-gray-700 dark:text-gray-300'
                        }`}
                      >
                        <div className="font-medium">{option.label}</div>
                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                          {option.description}
                        </div>
                      </button>
                    ))}
                  </div>
                </div>
              </>
            )}
          </div>
          <button
            onClick={() => onToggleActive(user.id, user.isActive)}
            className="px-2 py-1 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
          >
            {user.isActive ? '禁用' : '激活'}
          </button>
          <button
            onClick={() => onToggleDownload(user.id, user.canDownload)}
            className="px-2 py-1 text-xs text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/30 rounded transition-colors"
          >
            {user.canDownload ? '禁止下载' : '允许下载'}
          </button>
          <button
            onClick={() => onDelete(user.id)}
            className="px-2 py-1 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors"
          >
            删除
          </button>
        </div>
      </div>
    </div>
  )
}