gongxiangp2/components/SearchableUserSelect.tsx

'use client'

import { useState, useRef, useEffect } from 'react'
import { pinyin } from 'pinyin-pro'

interface User {
  id: string
  username: string
  displayName: string
}

interface SearchableUserSelectProps {
  users: User[]
  value: string
  onChange: (userId: string, displayName: string) => void
  placeholder?: string
  required?: boolean
  className?: string
}

export default function SearchableUserSelect({
  users,
  value,
  onChange,
  placeholder = '请选择或搜索用户',
  required = false,
  className = '',
}: SearchableUserSelectProps) {
  const [searchTerm, setSearchTerm] = useState('')
  const [isOpen, setIsOpen] = useState(false)
  const [highlightedIndex, setHighlightedIndex] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  // 获取选中用户的显示名称
  const selectedUser = users.find(u => u.id === value)
  const displayValue = selectedUser ? `${selectedUser.displayName} (${selectedUser.username})` : ''

  // 拼音搜索匹配函数
  const matchesSearch = (user: User, search: string): boolean => {
    if (!search) return true

    const searchLower = search.toLowerCase()

    // 1. 匹配显示名称
    if (user.displayName.toLowerCase().includes(searchLower)) {
      return true
    }

    // 2. 匹配用户名
    if (user.username.toLowerCase().includes(searchLower)) {
      return true
    }

    // 3. 匹配拼音全拼
    const fullPinyin = pinyin(user.displayName, { toneType: 'none', type: 'array' }).join('').toLowerCase()
    if (fullPinyin.includes(searchLower)) {
      return true
    }

    // 4. 匹配拼音首字母
    const firstLetters = pinyin(user.displayName, { pattern: 'first', toneType: 'none', type: 'array' }).join('').toLowerCase()
    if (firstLetters.includes(searchLower)) {
      return true
    }

    return false
  }

  // 过滤用户列表
  const filteredUsers = users.filter(user => matchesSearch(user, searchTerm))

  // 点击外部关闭下拉框
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  // 键盘导航
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (!isOpen) {
      if (e.key === 'Enter' || e.key === 'ArrowDown') {
        e.preventDefault()
        setIsOpen(true)
      }
      return
    }

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault()
        setHighlightedIndex(prev =>
          prev < filteredUsers.length - 1 ? prev + 1 : prev
        )
        break
      case 'ArrowUp':
        e.preventDefault()
        setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0)
        break
      case 'Enter':
        e.preventDefault()
        if (filteredUsers[highlightedIndex]) {
          handleSelect(filteredUsers[highlightedIndex])
        }
        break
      case 'Escape':
        e.preventDefault()
        setIsOpen(false)
        break
    }
  }  // 选择用户
  const handleSelect = (user: User) => {
    onChange(user.id, user.displayName)
    setSearchTerm('')
    setIsOpen(false)
    setHighlightedIndex(0)
  }

  // 打开下拉框
  const handleFocus = () => {
    setIsOpen(true)
    setHighlightedIndex(0)
  }

  // 清空选择
  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation()
    onChange('', '')
    setSearchTerm('')
    setIsOpen(false)
    inputRef.current?.focus()
  }

  return (
    <div ref={containerRef} className={`relative ${className}`}>
      <div className="relative">
        <input
          ref={inputRef}
          type="text"
          value={isOpen ? searchTerm : displayValue}
          onChange={(e) => setSearchTerm(e.target.value)}
          onFocus={handleFocus}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          required={required}
          className="input-apple pr-20"
          autoComplete="off"
        />

        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
          {value && (
            <button
              type="button"
              onClick={handleClear}
              className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
              title="清空"
            >
              <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          )}

          <button
            type="button"
            onClick={() => setIsOpen(!isOpen)}
            className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
          >
            <svg
              className={`w-4 h-4 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`}
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
        </div>
      </div>

      {isOpen && (
        <div className="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
          {filteredUsers.length === 0 ? (
            <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center">
              未找到匹配的用户
            </div>
          ) : (
            filteredUsers.map((user, index) => (
              <button
                key={user.id}
                type="button"
                onClick={() => handleSelect(user)}
                className={`w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
                  index === highlightedIndex ? 'bg-gray-100 dark:bg-gray-700' : ''
                } ${
                  user.id === value ? 'bg-blue-50 dark:bg-blue-900/20' : ''
                }`}
                onMouseEnter={() => setHighlightedIndex(index)}
              >
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-sm font-medium text-gray-900 dark:text-white">
                      {user.displayName}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      {user.username}
        </div>
                  </div>
                  {user.id === value && (
                    <svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                  )}
                </div>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  )
}