import { useState, useRef, useEffect } from 'react'
import { Users, Check, X } from 'lucide-react'

/**
 * 多选成员选择器
 * 支持搜索、已选 Tag 展示、点击外部关闭
 */
export default function MemberSelector({ members = [], selected = [], onChange }) {
  const [open, setOpen] = useState(false)
  const [search, setSearch] = useState('')
  const ref = useRef(null)

  // 点击外部关闭
  useEffect(() => {
    function handler(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  const filtered = members.filter((m) => {
    if (!search) return true
    return (
      m.accountName?.includes(search) ||
      m.groupNickname?.includes(search) ||
      m.platformId?.includes(search)
    )
  })

  const toggle = (id) => {
    if (selected.includes(id)) {
      onChange(selected.filter((s) => s !== id))
    } else {
      onChange([...selected, id])
    }
  }

  const getMember = (id) => members.find((m) => m.platformId === id)

  return (
    <div className="member-selector" ref={ref}>
      <div
        className={`member-selector-trigger ${open ? 'open' : ''}`}
        onClick={() => setOpen(!open)}
        id="member-selector-trigger"
      >
        <Users size={14} />
        {selected.length === 0 ? (
          <span>全部成员</span>
        ) : (
          <span style={{ color: 'var(--accent-light)' }}>已选 {selected.length} 人</span>
        )}
        <span style={{ marginLeft: 'auto', color: 'var(--text-muted)', fontSize: 10 }}>▾</span>
      </div>

      {open && (
        <div className="member-selector-dropdown">
          {/* 搜索框 */}
          <div className="member-search">
            <input
              className="member-search-input"
              placeholder="🔍 搜索成员名称..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              autoFocus
            />
          </div>

          {/* 列表 */}
          <div className="member-list-scroll">
            {filtered.length === 0 && (
              <div style={{ padding: '12px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 12 }}>
                无匹配成员
              </div>
            )}
            {filtered.map((m) => {
              const checked = selected.includes(m.platformId)
              return (
                <div
                  key={m.platformId}
                  className={`member-option ${checked ? 'checked' : ''}`}
                  onClick={() => toggle(m.platformId)}
                >
                  <div className="member-checkbox">
                    {checked && <Check size={10} />}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="member-option-name truncate">{m.accountName}</div>
                    {m.groupNickname && m.groupNickname !== m.accountName && (
                      <div className="member-option-nick truncate">{m.groupNickname}</div>
                    )}
                  </div>
                </div>
              )
            })}
          </div>

          {/* 已选 + 清空 */}
          <div className="member-footer">
            <div className="member-selected-tags">
              {selected.length === 0 && (
                <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>未选择（显示全部）</span>
              )}
              {selected.map((id) => {
                const m = getMember(id)
                return (
                  <div key={id} className="member-tag">
                    {m?.accountName || id}
                    <span className="member-tag-remove" onClick={(e) => { e.stopPropagation(); toggle(id) }}>
                      <X size={9} />
                    </span>
                  </div>
                )
              })}
            </div>
            {selected.length > 0 && (
              <button
                className="btn btn-ghost btn-sm"
                style={{ flexShrink: 0 }}
                onClick={(e) => { e.stopPropagation(); onChange([]) }}
              >
                清空
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  )
}