import { useEffect, useState } from 'react'
import { Popup, Toast } from 'antd-mobile'

// 人员选择 (T-AS-03/04): 只能从"当前项目成员"中选
export default function UserPicker({
  visible, members = [], value, multiple = false, title = '选择负责人',
  allowEmpty = true, onClose, onConfirm,
}) {
  const [sel, setSel] = useState(multiple ? [] : null)

  useEffect(() => {
    if (!visible) return
    setSel(multiple ? (value || []) : (value ?? null))
  }, [visible, value, multiple])

  const toggle = (uid) => {
    if (multiple) {
      setSel((prev) => {
        const arr = Array.isArray(prev) ? prev : []
        return arr.includes(uid) ? arr.filter((x) => x !== uid) : [...arr, uid]
      })
    } else {
      setSel((prev) => (prev === uid ? null : uid))
    }
  }

  const confirm = () => {
    if (!multiple && sel === null && !allowEmpty) {
      Toast.show({ content: '请选择负责人' })
      return
    }
    onConfirm?.(sel)
    onClose?.()
  }

  return (
    <Popup visible={visible} onMaskClick={onClose} bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, padding: '16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px)' }}>
      <div className="sheet-title">{title}</div>
      <div className="sheet-sub">仅可选择当前项目的成员</div>

      {members.length === 0 && <div className="extras-empty">项目暂无成员</div>}

      {members.map((m) => {
        const on = multiple ? (Array.isArray(sel) && sel.includes(m.userId)) : sel === m.userId
        return (
          <div className="pick-row" key={m.userId} onClick={() => toggle(m.userId)}>
            <div className="avatar">{(m.name || '?').slice(0, 1)}</div>
            <span className="pn">{m.name}</span>
            <span className={`ck${on ? ' on' : ''}`} />
          </div>
        )
      })}

      {allowEmpty && !multiple && (
        <div className="pick-row" onClick={() => setSel(null)}>
          <div className="avatar" style={{ background: '#f2f3f5', color: '#b6bcc4' }}>—</div>
          <span className="pn">清除负责人</span>
          <span className={`ck${sel === null ? ' on' : ''}`} />
        </div>
      )}

      <div className="btn-primary" onClick={confirm}>确定</div>
      <div className="btn-ghost" onClick={onClose}>取消</div>
    </Popup>
  )
}