'use client'

import { useState, useRef, useEffect } from 'react'
import axios from 'axios'

interface MemberSelectProps {
  value: string
  onChange: (memberId: string, member: any) => void
  label?: string
  required?: boolean
  placeholder?: string
}

export default function MemberSelect({ value, onChange, label, required, placeholder }: MemberSelectProps) {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<any[]>([])
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [selectedLabel, setSelectedLabel] = useState('')
  const ref = useRef<HTMLDivElement>(null)
  const timer = useRef<NodeJS.Timeout>()

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [])

  function doSearch(q: string) {
    setQuery(q)
    if (timer.current) clearTimeout(timer.current)
    if (q.length < 2) { setResults([]); setOpen(false); return }
    timer.current = setTimeout(async () => {
      setLoading(true)
      try {
        const res = await axios.get(`/api/members?search=${encodeURIComponent(q)}&pageSize=10`)
        setResults(res.data.data ?? [])
        setOpen(true)
      } catch { setResults([]) }
      setLoading(false)
    }, 300)
  }

  function select(m: any) {
    setSelectedLabel(`${m.memberNo} — ${m.fullName}`)
    setQuery('')
    setResults([])
    setOpen(false)
    onChange(m.id, m)
  }

  function clear() {
    setSelectedLabel('')
    onChange('', null)
  }

  return (
    <div ref={ref} className="relative">
      {label && <label className="block text-xs font-medium text-muted-foreground mb-1.5">{label}{required && <span className="text-red-500 ml-0.5">*</span>}</label>}
      {selectedLabel ? (
        <div className="flex items-center justify-between border rounded-lg px-3 py-2 text-sm bg-card">
          <span className="truncate">{selectedLabel}</span>
          <button onClick={clear} className="text-muted-foreground hover:text-foreground ml-2 text-xs">&times;</button>
        </div>
      ) : (
        <input value={query} onChange={e => doSearch(e.target.value)}
          onFocus={() => { if (results.length) setOpen(true) }}
          placeholder={placeholder ?? 'Search member by name, ID or phone…'}
          className="w-full px-3 py-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 bg-card"/>
      )}
      {loading && <div className="absolute right-3 top-8"><div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"/></div>}
      {open && results.length > 0 && (
        <div className="absolute z-50 mt-1 w-full bg-card border rounded-lg shadow-lg max-h-60 overflow-y-auto">
          {results.map(m => (
            <button key={m.id} type="button" onClick={() => select(m)}
              className="w-full text-left px-3 py-2.5 text-sm hover:bg-muted/60 flex items-center justify-between border-b last:border-0">
              <div>
                <p className="font-medium">{m.fullName}</p>
                <p className="text-xs text-muted-foreground">{m.memberNo} · {m.phone}</p>
              </div>
              {m.savingsAccounts?.some((a: any) => a.isActive) && (
                <span className="text-xs text-green-600 font-medium">Has savings</span>
              )}
            </button>
          ))}
        </div>
      )}
      {open && query.length >= 2 && results.length === 0 && !loading && (
        <div className="absolute z-50 mt-1 w-full bg-card border rounded-lg shadow-lg p-3 text-sm text-muted-foreground text-center">
          No members found
        </div>
      )}
    </div>
  )
}