'use client'

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

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

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

export default function SearchableUserSelect({
  id,
  users,
  value,
  onChange,
  placeholder = '请选择或搜索用户',
  required = false,
  className = '',
  disabled = false,
  clearable = true,
  loading = false,
}: 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 listboxId = useId()
  const isDisabled = disabled || loading

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

  // 人员数量较多时，预先生成一次搜索索引，避免每次按键都重复计算全量拼音。
  const indexedUsers = useMemo(() => users.map((user) => {
    const fullPinyin = pinyin(user.displayName, { toneType: 'none', type: 'array' }).join('')
    const firstLetters = pinyin(user.displayName, {
      pattern: 'first',
      toneType: 'none',
      type: 'array',
    }).join('')

    return {
      user,
      searchText: [
        user.displayName,
        user.username,
        fullPinyin,
        firstLetters,
      ].join(' ').toLowerCase(),
    }
  }), [users])

  const filteredUsers = useMemo(() => {
    const keyword = searchTerm.trim().toLowerCase()
    if (!keyword) return indexedUsers.map((item) => item.user)
    return indexedUsers
      .filter((item) => item.searchText.includes(keyword))
      .map((item) => item.user)
  }, [indexedUsers, searchTerm])

  useEffect(() => {
    setHighlightedIndex((current) => Math.min(current, Math.max(filteredUsers.length - 1, 0)))
  }, [filteredUsers.length])

  // 点击外部关闭下拉框
  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 (isDisabled) {
      return
    }

    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 = () => {
    if (isDisabled) {
      return
    }

    setIsOpen(true)
    setHighlightedIndex(0)
  }

  // 清空选择
  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation()
    if (isDisabled || !clearable) {
      return
    }

    onChange('', '')
    setSearchTerm('')
    setIsOpen(false)
    inputRef.current?.focus()
  }

  return (
    <div ref={containerRef} className={`relative ${className}`}>
      <div className="relative">
        <input
          id={id}
          ref={inputRef}
          type="text"
          value={isOpen ? searchTerm : displayValue}
          onChange={(e) => setSearchTerm(e.target.value)}
          onFocus={handleFocus}
          onKeyDown={handleKeyDown}
          placeholder={loading ? '正在加载人员...' : placeholder}
          required={required}
          disabled={isDisabled}
          className="input-apple pr-20 disabled:cursor-not-allowed disabled:opacity-60"
          autoComplete="off"
          role="combobox"
          aria-autocomplete="list"
          aria-expanded={isOpen && !isDisabled}
          aria-controls={listboxId}
          aria-activedescendant={
            isOpen && filteredUsers[highlightedIndex]
              ? `${listboxId}-option-${filteredUsers[highlightedIndex].id}`
              : undefined
          }
          aria-busy={loading}
        />

        <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1">
          {value && clearable && !isDisabled && (
            <button
              type="button"
              onClick={handleClear}
              className="flex h-9 w-9 items-center justify-center rounded transition-colors hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-gray-600"
              title="清空"
              aria-label="清空已选人员"
            >
              <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={() => {
              if (!isDisabled) {
                setIsOpen(!isOpen)
              }
            }}
            disabled={isDisabled}
            className="flex h-9 w-9 items-center justify-center rounded transition-colors hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-200 disabled:cursor-not-allowed dark:hover:bg-gray-600"
            aria-label={isOpen ? '收起人员列表' : '展开人员列表'}
          >
            <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 && !isDisabled && (
        <div
          id={listboxId}
          role="listbox"
          className="absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-lg border border-gray-300 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800"
        >
          {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}
                id={`${listboxId}-option-${user.id}`}
                role="option"
                aria-selected={user.id === value}
                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>
  )
}