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

export default function ApproverMultiSelect({ users = [], selected = [], onChange }) {
  const [open, setOpen] = useState(false)
  const [dropUp, setDropUp] = useState(false)
  const wrapperRef = useRef(null)

  // Close dropdown when clicking outside
  useEffect(() => {
    if (!open) return
    const handleClick = (e) => {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [open])

  // Detect if dropdown should open upward
  useEffect(() => {
    if (!open || !wrapperRef.current) return
    const rect = wrapperRef.current.getBoundingClientRect()
    const spaceBelow = window.innerHeight - rect.bottom
    setDropUp(spaceBelow < 220)
  }, [open])

  const toggle = (userId) => {
    const id = String(userId)
    const next = selected.includes(id) ? selected.filter(s => s !== id) : [...selected, id]
    onChange(next)
  }

  const remove = (id) => {
    onChange(selected.filter(s => s !== String(id)))
  }

  const selectedUsers = selected.map(id => users.find(u => String(u._id || u.id || u.Id) === String(id))).filter(Boolean)

  return (
    <div className="relative" ref={wrapperRef}>
      <div
        onClick={() => setOpen(!open)}
        className={`w-full min-h-[38px] px-3 py-1.5 text-sm border rounded-lg bg-surface cursor-pointer flex items-center flex-wrap gap-1.5 transition-colors ${
          open ? 'border-brand-primary ring-2 ring-brand-primary/20' : 'border-border'
        }`}
      >
        {selectedUsers.length === 0 && (
          <span className="text-text-tertiary">Select approvers...</span>
        )}
        {selectedUsers.map(u => (
          <span
            key={u._id || u.id || u.Id}
            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-100 text-amber-800 text-xs font-medium"
          >
            {u.name}
            <button
              type="button"
              onClick={e => { e.stopPropagation(); remove(u._id || u.id || u.Id) }}
              className="hover:text-amber-950"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        ))}
        <ChevronDown className={`w-4 h-4 text-text-tertiary ml-auto shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
      </div>
      {open && (
        <div className={`absolute z-50 w-full bg-surface border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto ${dropUp ? 'bottom-full mb-1' : 'top-full mt-1'}`}>
          {users.map(u => {
            const uid = String(u._id || u.id || u.Id)
            const isSelected = selected.includes(uid)
            return (
              <button
                key={uid}
                type="button"
                onClick={() => toggle(uid)}
                className={`w-full text-left px-3 py-2 text-sm hover:bg-surface-secondary flex items-center justify-between ${
                  isSelected ? 'text-brand-primary font-medium' : 'text-text-primary'
                }`}
              >
                <span>{u.name}</span>
                {isSelected && <Check className="w-3.5 h-3.5" />}
              </button>
            )
          })}
          {users.length === 0 && (
            <div className="px-3 py-4 text-sm text-text-tertiary text-center">No users available</div>
          )}
        </div>
      )}
    </div>
  )
}
