/**
 * MaterialsTab 组件
 * 
 * 素材管理Tab组件
 * 从主页面拆分出来，负责素材管理功能
 * 包括素材列表、搜索、预览等
 * 使用三层架构样式系统，支持深浅色主题
 * 
 * @created 2025-01-XX（拆分自 page.tsx）
 * @component
 */

'use client'

import { useState, useEffect, useCallback, useRef } from 'react'
import Image from 'next/image'
import EditMaterialModal from '@/components/EditMaterialModal'
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
import { useDialog } from '@/components/ui/DialogProvider'
import type { Material, ToastFn, User } from './types'
import LoadingState from './ui/LoadingState'

const PAGE_SIZE = 40

interface MaterialsTabProps {
  showToast: ToastFn
}

export default function MaterialsTab({ showToast }: MaterialsTabProps) {
  const styles = useThemeStyles()
  const { confirm, prompt } = useDialog()
  const theme = useTheme()
  const [materials, setMaterials] = useState<Material[]>([])
  const [loading, setLoading] = useState(true)
  const [editingMaterial, setEditingMaterial] = useState<Material | null>(null)
  const [materialSearchTerm, setMaterialSearchTerm] = useState('')
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('')
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
  const [showDeleted, setShowDeleted] = useState(false) // 是否显示回收站
  const [currentPage, setCurrentPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [isLoadingMore, setIsLoadingMore] = useState(false)
  const loadMoreRef = useRef<HTMLDivElement | null>(null)
  const [isUserSelectOpen, setIsUserSelectOpen] = useState(false)
  const [userSearchTerm, setUserSearchTerm] = useState('')
  const [userSearchLoading, setUserSearchLoading] = useState(false)
  const [userSearchResults, setUserSearchResults] = useState<User[]>([])
  const [selectedTargetUser, setSelectedTargetUser] = useState<User | null>(null)

  const handleSearchUsers = useCallback(
    async (keyword: string) => {
      const trimmed = keyword.trim()
      setUserSearchTerm(keyword)
      if (!trimmed) {
        setUserSearchResults([])
        return
      }
      setUserSearchLoading(true)
      try {
        const params = new URLSearchParams()
        params.set('pageSize', '20')
        params.set('search', trimmed)
        const response = await fetch(`/api/admin/users?${params.toString()}`)
        if (!response.ok) {
          showToast('搜索用户失败', 'error')
          return
        }
        const data = await response.json()
        const users = Array.isArray(data.users) ? (data.users as User[]) : []
        setUserSearchResults(users)
      } catch (error) {
        console.error('Search users error:', error)
        showToast('搜索用户失败', 'error')
      } finally {
        setUserSearchLoading(false)
      }
    },
    [showToast],
  )

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearchTerm(materialSearchTerm.trim())
    }, 300)
    return () => clearTimeout(handler)
  }, [materialSearchTerm])

  const fetchMaterials = useCallback(
    async (page = 1, append = false) => {
      try {
        if (append) {
          setIsLoadingMore(true)
        } else {
          setLoading(true)
          setHasMore(true)
        }

        const params = new URLSearchParams()
        params.set('page', page.toString())
        params.set('pageSize', PAGE_SIZE.toString())
        if (showDeleted) {
          params.set('showDeleted', 'true')
        }
        if (debouncedSearchTerm) {
          params.set('search', debouncedSearchTerm)
        }

        const response = await fetch(`/api/materials?${params.toString()}`)
        if (response.ok) {
          const data = await response.json()
          const fetchedMaterials = (Array.isArray(data.materials)
            ? data.materials
            : Array.isArray(data)
              ? data
              : []) as Material[]

          if (append) {
            setMaterials((prev) => {
              const existingIds = new Set(prev.map((item) => item.id))
              const deduped = fetchedMaterials.filter((item) => !existingIds.has(item.id))
              if (deduped.length === 0) return prev
              return [...prev, ...deduped]
            })
          } else {
            setMaterials(fetchedMaterials)
          }

          const appendedCount = fetchedMaterials.length
          const totalPages = typeof data?.totalPages === 'number' ? data.totalPages : undefined

          setCurrentPage(page)
          if (totalPages) {
            setHasMore(page < totalPages)
          } else {
            setHasMore(appendedCount === PAGE_SIZE)
          }
          return appendedCount
        }

        showToast('获取素材列表失败', 'error')
      } catch (error) {
        console.error('Error fetching materials:', error)
        showToast('获取素材列表失败', 'error')
      } finally {
        if (append) {
          setIsLoadingMore(false)
        } else {
          setLoading(false)
        }
      }

      setHasMore(false)
      return 0
    },
    [debouncedSearchTerm, showDeleted, showToast]
  )

  useEffect(() => {
    fetchMaterials(1, false)
  }, [fetchMaterials])

  const handleDeleteMaterial = async (id: string, permanent = false) => {
    const confirmed = await confirm({
      title: permanent ? '确认永久删除' : '确认删除',
      message: permanent 
        ? '确定要永久删除这个素材吗？此操作不可恢复！'
        : '确定要删除这个素材吗？素材将移至回收站，7天后自动清除。',
      variant: 'danger',
    })
    if (!confirmed) return

    try {
      const url = permanent 
        ? `/api/materials?id=${id}&permanent=true`
        : `/api/materials?id=${id}`
      const response = await fetch(url, {
        method: 'DELETE',
      })

      if (response.ok) {
        setMaterials(prevMaterials => prevMaterials.filter(m => m.id !== id))
        showToast(permanent ? '永久删除成功' : '删除成功')
        fetchMaterials()
      } else {
        showToast('删除失败', 'error')
      }
    } catch (error) {
      console.error('Error deleting material:', error)
      showToast('删除失败', 'error')
    }
  }

  const handleBulkRestore = useCallback(async () => {
    const ids = Array.from(selectedIds)
    if (!ids.length) return
    
    const confirmed = await confirm({
      title: '批量恢复素材',
      message: `确定要恢复选中的 ${ids.length} 条素材吗？`,
      variant: 'default',
    })
    if (!confirmed) return

    try {
      for (const id of ids) {
        // eslint-disable-next-line no-await-in-loop
        await fetch(`/api/materials/restore`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id }),
        })
      }
      setMaterials((prev) => prev.filter((material) => !selectedIds.has(material.id)))
      setSelectedIds(new Set())
      showToast('批量恢复完成')
      fetchMaterials()
    } catch (error) {
      console.error('Bulk restore materials error:', error)
      showToast('批量恢复失败，请稍后重试', 'error')
    }
  }, [selectedIds, confirm, showToast, fetchMaterials])

  const handleRestoreMaterial = async (id: string) => {
    try {
      const response = await fetch(`/api/materials/restore`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id }),
      })

      if (response.ok) {
        showToast('恢复成功')
        fetchMaterials()
      } else {
        showToast('恢复失败', 'error')
      }
    } catch (error) {
      console.error('Error restoring material:', error)
      showToast('恢复失败', 'error')
    }
  }

  const toggleSelectMaterial = useCallback((id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (next.has(id)) {
        next.delete(id)
      } else {
        next.add(id)
      }
      return next
    })
  }, [])

  const clearSelection = useCallback(() => {
    setSelectedIds(new Set())
  }, [])

  const selectAllVisible = useCallback((list: Material[]) => {
    setSelectedIds(new Set(list.map((material) => material.id)))
  }, [])

  const handleBulkDelete = useCallback(async () => {
    const ids = Array.from(selectedIds)
    if (!ids.length) return
    
    if (showDeleted) {
      // 回收站中：批量永久删除
      const confirmed = await confirm({
        title: '批量永久删除素材',
        message: `确定要永久删除选中的 ${ids.length} 条素材吗？此操作不可恢复！`,
        variant: 'danger',
      })
      if (!confirmed) return

      try {
        for (const id of ids) {
          // eslint-disable-next-line no-await-in-loop
          await fetch(`/api/materials?id=${id}&permanent=true`, { method: 'DELETE' })
        }
        setMaterials((prev) => prev.filter((material) => !selectedIds.has(material.id)))
        setSelectedIds(new Set())
        showToast('批量永久删除完成')
      } catch (error) {
        console.error('Bulk permanent delete materials error:', error)
        showToast('批量永久删除失败，请稍后重试', 'error')
      }
    } else {
      // 正常列表：批量删除（软删除）
      const confirmed = await confirm({
        title: '批量删除素材',
        message: `确定要删除选中的 ${ids.length} 条素材吗？素材将移至回收站，7天后自动清除。`,
        variant: 'danger',
      })
      if (!confirmed) return

      try {
        for (const id of ids) {
          // eslint-disable-next-line no-await-in-loop
          await fetch(`/api/materials?id=${id}`, { method: 'DELETE' })
        }
        setMaterials((prev) => prev.filter((material) => !selectedIds.has(material.id)))
        setSelectedIds(new Set())
        showToast('批量删除完成')
      } catch (error) {
        console.error('Bulk delete materials error:', error)
        showToast('批量删除失败，请稍后重试', 'error')
      }
    }
  }, [selectedIds, confirm, showToast, showDeleted])

  useEffect(() => {
    // 移除已被删除的选择项
    setSelectedIds((prev) => {
      if (prev.size === 0) return prev
      const availableIds = new Set(materials.map((material) => material.id))
      const next = new Set<string>()
      prev.forEach((id) => {
        if (availableIds.has(id)) {
          next.add(id)
        }
      })
      return next
    })
  }, [materials])

  const handleLoadMore = useCallback(async () => {
    if (loading || isLoadingMore || !hasMore) return
    const nextPage = currentPage + 1
    await fetchMaterials(nextPage, true)
  }, [currentPage, fetchMaterials, hasMore, isLoadingMore, loading])

  useEffect(() => {
    if (!hasMore) return
    const sentinel = loadMoreRef.current
    if (!sentinel) return

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          handleLoadMore()
        }
      },
      { threshold: 0.2 }
    )

    observer.observe(sentinel)
    return () => {
      observer.disconnect()
    }
  }, [handleLoadMore, hasMore])

  const selectionCount = selectedIds.size
  const isAllVisibleSelected =
    materials.length > 0 && materials.every((material) => selectedIds.has(material.id))

  const handleBulkTransferToTeam = useCallback(async () => {
    const ids = Array.from(selectedIds)
    if (!ids.length) return

    const confirmed = await confirm({
      title: '移交到团队空间',
      message: `确定要将选中的 ${ids.length} 条素材的归属移交到团队空间吗？`,
      variant: 'default',
    })
    if (!confirmed) return

    try {
      const response = await fetch('/api/admin/materials/transfer-owner', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          materialIds: ids,
          toTeam: true,
        }),
      })

      if (!response.ok) {
        const data = await response.json().catch(() => ({}))
        showToast(data.error || '移交失败', 'error')
        return
      }

      showToast('已将选中素材移交到团队空间', 'success')
      setSelectedIds(new Set())
      fetchMaterials(1, false)
    } catch (error) {
      console.error('Bulk transfer to team error:', error)
      showToast('移交失败，请稍后重试', 'error')
    }
  }, [selectedIds, confirm, showToast, fetchMaterials])

  const handleBulkTransferToUser = useCallback(async () => {
    const ids = Array.from(selectedIds)
    if (!ids.length) return

    // 打开「选择用户」弹窗
    setIsUserSelectOpen(true)
    setUserSearchTerm('')
    setUserSearchResults([])
    setSelectedTargetUser(null)
  }, [selectedIds])

  if (loading) {
    return <LoadingState message="加载素材列表..." />
  }

  // 根据主题选择颜色类名
  const borderColor = theme === 'dark' ? 'border-slate-800' : 'border-slate-200'
  const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
  const textIcon = theme === 'dark' ? 'text-slate-500' : 'text-slate-400'
  const textIconHover = theme === 'dark' ? 'hover:text-slate-200' : 'hover:text-slate-700'
  const bgImage = theme === 'dark' ? 'bg-slate-800' : 'bg-slate-100'
  const textPlaceholder = theme === 'dark' ? 'text-slate-500' : 'text-slate-400'
  const textItem = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textItemDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'

  return (
    <>
      <div className={cn(styles.cardStyles.base)}>
        <div className={cn('px-6 py-4 border-b', borderColor, 'flex items-center justify-between')}>
          <div>
            <h2 className={cn('text-xl font-semibold', textTitle)}>素材管理</h2>
            <p className={cn('text-sm mt-1', textDesc)}>
              管理所有上传的素材，支持搜索、编辑和删除
            </p>
          </div>
        </div>
        <div className="p-6">
          {/* 搜索框 */}
          <div className="mb-6">
            <div className="flex items-center gap-3">
              <button
                type="button"
                onClick={() => setShowDeleted(!showDeleted)}
                className={cn(
                  'px-4 py-2 rounded-lg font-medium transition-colors',
                  'border border-slate-300 dark:border-slate-600',
                  showDeleted 
                    ? 'bg-indigo-600 text-white hover:bg-indigo-700 border-indigo-600 dark:border-indigo-600' 
                    : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700'
                )}
              >
                {showDeleted ? '返回素材列表' : '回收站'}
              </button>
              <div className="relative flex-1">
                <input
                  type="text"
                  placeholder="搜索素材（型号、品牌、分类、场景、类型、上传者）..."
                  value={materialSearchTerm}
                  onChange={(e) => setMaterialSearchTerm(e.target.value)}
                  className={cn(styles.inputStyles.base, 'pl-11 pr-10')}
                />
              <svg className={cn('absolute left-4 top-3 w-5 h-5', textIcon)} 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>
              {materialSearchTerm && (
                <button
                  onClick={() => setMaterialSearchTerm('')}
                  className={cn(
                    styles.buttonStyles.ghost,
                    styles.buttonModifiers.icon,
                    'absolute right-2 top-2',
                    textIcon,
                    textIconHover,
                  )}
                  aria-label="清空搜索"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              )}
              </div>
            </div>
          </div>

          {/* 批量操作 */}
          {materials.length > 0 && (
            <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
              <div className="text-sm">
                已选 <span className="font-semibold">{selectionCount}</span> 项
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <button
                  type="button"
                  onClick={() =>
                    isAllVisibleSelected ? clearSelection() : selectAllVisible(materials)
                  }
                  className={cn(styles.buttonStyles.secondary, styles.buttonModifiers.compactXs)}
                >
                  {isAllVisibleSelected ? '取消全选' : '全选当前结果'}
                </button>
                <button
                  type="button"
                  onClick={clearSelection}
                  className={cn(
                    styles.buttonStyles.ghost,
                    styles.buttonModifiers.compactXs,
                    'disabled:opacity-50 disabled:cursor-not-allowed'
                  )}
                  disabled={!selectionCount}
                >
                  清空选择
                </button>
                <button
                  type="button"
                  onClick={handleBulkTransferToTeam}
                  className={cn(
                    styles.buttonStyles.secondary,
                    styles.buttonModifiers.compactXs,
                    'disabled:opacity-50 disabled:cursor-not-allowed'
                  )}
                  disabled={!selectionCount}
                >
                  移交到团队空间
                </button>
                <button
                  type="button"
                  onClick={handleBulkTransferToUser}
                  className={cn(
                    styles.buttonStyles.secondary,
                    styles.buttonModifiers.compactXs,
                    'disabled:opacity-50 disabled:cursor-not-allowed'
                  )}
                  disabled={!selectionCount}
                >
                  移交给指定用户
                </button>
                {showDeleted && (
                  <button
                    type="button"
                    onClick={handleBulkRestore}
                    className={cn(
                      styles.buttonStyles.success,
                      styles.buttonModifiers.compactXs,
                      'disabled:opacity-50 disabled:cursor-not-allowed'
                    )}
                    disabled={!selectionCount}
                  >
                    批量恢复
                  </button>
                )}
                <button
                  type="button"
                  onClick={handleBulkDelete}
                  className={cn(
                    styles.buttonStyles.danger,
                    styles.buttonModifiers.compactXs,
                    'disabled:opacity-50 disabled:cursor-not-allowed'
                  )}
                  disabled={!selectionCount}
                >
                  {showDeleted ? '批量永久删除' : '批量删除'}
                </button>
              </div>
            </div>
          )}

          {/* 素材列表 */}
          {materials.length === 0 ? (
            <div className={cn('text-center py-12', textDesc)}>
              {debouncedSearchTerm ? '暂无匹配的素材' : '暂无素材'}
            </div>
          ) : (
            <div className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {materials.map((material) => (
                <div
                  key={material.id}
                  className={cn(
                    styles.cardStyles.hover,
                    'overflow-hidden relative',
                    selectedIds.has(material.id) && 'ring-2 ring-offset-2 ring-indigo-500'
                  )}
                >
                  <button
                    type="button"
                    onClick={() => toggleSelectMaterial(material.id)}
                    className={cn(
                      'absolute z-10 top-3 left-3 w-7 h-7 rounded-full border-2 flex items-center justify-center text-xs font-semibold transition-colors',
                      selectedIds.has(material.id)
                        ? 'bg-indigo-600 border-indigo-600 text-white'
                        : 'bg-white/80 border-slate-300 text-transparent hover:text-slate-400'
                    )}
                    aria-pressed={selectedIds.has(material.id)}
                    aria-label={selectedIds.has(material.id) ? '取消选择素材' : '选择素材'}
                  >
                    ✓
                  </button>
                  <div className={cn('aspect-square relative overflow-hidden', bgImage)}>
                    {material.previewUrl ? (
                      <Image
                        src={material.previewUrl}
                        alt={material.productModel || '素材预览图'}
                        fill
                        className="object-cover"
                        sizes="(max-width: 768px) 100vw, (max-width: 1280px) 33vw, 25vw"
                      />
                    ) : (
                      <div className={cn('w-full h-full flex items-center justify-center', textPlaceholder)}>
                        <svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                      </div>
                    )}
                  </div>
                  <div className="p-4">
                    <h3 className={cn('font-semibold truncate mb-1', textItem)}>
                      {material.productModel}
                    </h3>
                    <div className={cn('text-xs space-y-1 mb-3', textItemDesc)}>
                      <div>类型: {material.materialType}</div>
                      <div>分类: {material.categoryName}</div>
                      <div>上传者: {material.user.username}</div>
                    </div>
                    <div className="flex gap-2 mt-3">
                      {!showDeleted ? (
                        <>
                          <button
                            onClick={() => setEditingMaterial(material)}
                            className={cn(styles.buttonStyles.secondary, styles.buttonModifiers.compactXs, 'flex-1')}
                          >
                            编辑
                          </button>
                          <button
                            onClick={() => handleDeleteMaterial(material.id)}
                            className={cn(styles.buttonStyles.danger, styles.buttonModifiers.compactXs, 'flex-1')}
                          >
                            删除
                          </button>
                        </>
                      ) : (
                        <>
                          <button
                            onClick={() => handleRestoreMaterial(material.id)}
                            className={cn(styles.buttonStyles.secondary, styles.buttonModifiers.compactXs, 'flex-1')}
                          >
                            恢复
                          </button>
                          <button
                            onClick={() => handleDeleteMaterial(material.id, true)}
                            className={cn(styles.buttonStyles.danger, styles.buttonModifiers.compactXs, 'flex-1')}
                          >
                            永久删除
                          </button>
                        </>
                      )}
                    </div>
                  </div>
                </div>
              ))}
              </div>
              {(hasMore || isLoadingMore) && (
                <div
                  ref={hasMore ? loadMoreRef : null}
                  className="flex items-center justify-center py-4 text-sm text-slate-500 dark:text-slate-400"
                >
                  {isLoadingMore ? '加载中...' : '继续向下滚动加载更多'}
                </div>
              )}
              {!hasMore && materials.length > 0 && (
                <div className="text-center py-4 text-sm text-slate-400 dark:text-slate-500">已加载全部素材</div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Edit Material Modal */}
      {editingMaterial && (
        <EditMaterialModal
          material={editingMaterial as any}
          onClose={() => setEditingMaterial(null)}
          onSuccess={async () => {
            setEditingMaterial(null)
            await fetchMaterials()
            showToast('修改成功')
          }}
        />
      )}

      {/* 选择目标用户弹窗 */}
      {isUserSelectOpen && (
        <div className="fixed inset-0 z-40 flex items-center justify-center px-4 sm:px-6">
          <div className="absolute inset-0 bg-black/30" onClick={() => setIsUserSelectOpen(false)} />
          <div
            className={cn(
              'relative z-50 w-full max-w-xl rounded-lg border shadow-sm',
              theme === 'dark'
                ? 'bg-slate-900 border-slate-700/80 shadow-black/40'
                : 'bg-white border-slate-200 shadow-slate-900/5',
            )}
          >
            <div className="px-5 pt-4 pb-3 border-b border-slate-200/70 dark:border-slate-700/80 flex items-center justify-between">
              <div>
                <div className="text-base font-semibold text-slate-900 dark:text-slate-50">选择目标用户</div>
                <div className="text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                  搜索并选择接收素材的用户。
                </div>
              </div>
              <button
                type="button"
                onClick={() => setIsUserSelectOpen(false)}
                className="ml-2 inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-colors hover:text-slate-600 hover:bg-slate-100 dark:hover:bg-slate-800 dark:hover:text-slate-200"
              >
                <span className="sr-only">关闭</span>
                ×
              </button>
            </div>

            <div className="px-5 pt-3 pb-4 space-y-3">
              <div>
                <label className="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1.5">
                  搜索用户
                </label>
                <div className="flex gap-2">
                  <input
                    type="text"
                    value={userSearchTerm}
                    onChange={(e) => handleSearchUsers(e.target.value)}
                    placeholder="输入用户名、邮箱或部门关键字，例如：zhangsan / 设计部"
                    className={cn(
                      'flex-1 rounded-lg border px-3 py-1.5 text-sm outline-none',
                      'placeholder:text-slate-400',
                      theme === 'dark'
                        ? 'bg-slate-900 border-slate-700 text-slate-100 focus:border-slate-400 focus:ring-1 focus:ring-slate-600'
                        : 'bg-white border-slate-300 text-slate-900 focus:border-slate-500 focus:ring-1 focus:ring-slate-300',
                    )}
                  />
                </div>
                <p className="mt-1 text-[11px] text-slate-400 dark:text-slate-500">
                  支持用户名、邮箱或部门。
                </p>
              </div>

              <div className="border rounded-lg max-h-72 overflow-y-auto border-slate-200 dark:border-slate-700/80">
                {userSearchLoading ? (
                  <div className="px-4 py-6 text-sm text-slate-500 dark:text-slate-400 text-center">搜索中...</div>
                ) : userSearchResults.length === 0 ? (
                  <div className="px-4 py-6 text-sm text-slate-400 dark:text-slate-500 text-center">
                    {userSearchTerm.trim()
                      ? '未找到匹配的用户，请尝试调整关键字。'
                      : '请输入关键字开始搜索用户。'}
                  </div>
                ) : (
                  <ul className="divide-y divide-slate-100 dark:divide-slate-800/80">
                    {userSearchResults.map((user) => {
                      const isSelected = selectedTargetUser?.id === user.id
                      const label = user.username || user.email || user.id
                      const subLabel = user.email && user.username ? user.email : user.email || user.department || ''
                      const dept = user.department || user.managedDepartment || ''
                      return (
                        <li key={user.id}>
                          <button
                            type="button"
                            onClick={() => setSelectedTargetUser(user)}
                            className={cn(
                              'w-full px-4 py-2.5 flex items-center justify-between text-left text-sm transition-colors',
                              isSelected
                                ? theme === 'dark'
                                  ? 'bg-slate-700 text-slate-50'
                                  : 'bg-slate-100 text-slate-900'
                                : theme === 'dark'
                                  ? 'hover:bg-slate-800/70 text-slate-100'
                                  : 'hover:bg-slate-50 text-slate-800',
                            )}
                          >
                            <div className="min-w-0">
                              <div className="flex items-center gap-2">
                                <span className="truncate max-w-[180px] font-medium">{label}</span>
                                {user.isSuperAdmin && (
                                  <span className="inline-flex items-center rounded-md bg-amber-100 text-amber-700 px-1.5 py-0.5 text-[10px] font-medium dark:bg-amber-500/15 dark:text-amber-300">
                                    超级管理员
                                  </span>
                                )}
                                {user.role === 'ADMIN' && !user.isSuperAdmin && (
                                  <span className="inline-flex items-center rounded-md bg-slate-100 text-slate-700 px-1.5 py-0.5 text-[10px] font-medium dark:bg-slate-700 dark:text-slate-200">
                                    管理员
                                  </span>
                                )}
                              </div>
                              {subLabel && (
                                <div className="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400 truncate max-w-[220px]">
                                  {subLabel}
                                </div>
                              )}
                              {dept && (
                                <div className="mt-0.5 text-[11px] text-slate-400 dark:text-slate-500 truncate max-w-[220px]">
                                  部门：{dept}
                                </div>
                              )}
                            </div>
                            {isSelected && (
                              <span className="ml-3 inline-flex h-5 w-5 items-center justify-center rounded-md bg-slate-700 text-white text-xs dark:bg-slate-500">
                                ✓
                              </span>
                            )}
                          </button>
                        </li>
                      )
                    })}
                  </ul>
                )}
              </div>
            </div>

            <div className="px-5 pb-4 pt-3 border-t border-slate-200/70 dark:border-slate-700/80 flex items-center justify-between">
              <div className="text-[11px] text-slate-400 dark:text-slate-500">
                当前已选中素材：<span className="font-semibold">{selectedIds.size}</span> 条
              </div>
              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => {
                    setIsUserSelectOpen(false)
                    setSelectedTargetUser(null)
                  }}
                  className={cn(
                    styles.buttonStyles.secondary,
                    styles.buttonModifiers.compactXs,
                    'min-w-[80px]',
                  )}
                >
                  取消
                </button>
                <button
                  type="button"
                  disabled={!selectedTargetUser}
                  onClick={async () => {
                    if (!selectedTargetUser) return
                    const ids = Array.from(selectedIds)
                    if (!ids.length) {
                      showToast('请先勾选要移交的素材', 'error')
                      return
                    }

                    const confirmed = await confirm({
                      title: '确认移交',
                      message: `确定要将选中的 ${ids.length} 条素材的归属移交给用户「${
                        selectedTargetUser.username || selectedTargetUser.email || selectedTargetUser.id
                      }」吗？`,
                      variant: 'default',
                    })
                    if (!confirmed) return

                    try {
                      const response = await fetch('/api/admin/materials/transfer-owner', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                          materialIds: ids,
                          targetUserId: selectedTargetUser.id,
                        }),
                      })

                      const data = await response.json().catch(() => ({}))
                      if (!response.ok) {
                        showToast(data.error || '移交失败', 'error')
                        return
                      }

                      showToast('已将选中素材移交给指定用户', 'success')
                      setIsUserSelectOpen(false)
                      setSelectedTargetUser(null)
                      setSelectedIds(new Set())
                      fetchMaterials(1, false)
                    } catch (error) {
                      console.error('Bulk transfer to user error:', error)
                      showToast('移交失败，请稍后重试', 'error')
                    }
                  }}
                  className={cn(
                    styles.buttonStyles.primary,
                    styles.buttonModifiers.compactXs,
                    'min-w-[100px] disabled:opacity-50 disabled:cursor-not-allowed',
                  )}
                >
                  确认移交
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}