'use client';

import { useEffect, useRef, useState } from 'react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { inputClass } from './ui';

export interface UserHit { id: string; name: string; email: string; role: string }

/** Debounced search box with a result list; `search` decides who is eligible. */
export function UserSearch({ search, onPick, placeholder, noResults }: {
  search: (q: string) => Promise<{ users: UserHit[] }>;
  onPick: (u: UserHit) => void;
  placeholder: string;
  noResults: string;
}) {
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<UserHit[]>([]);
  const [searched, setSearched] = useState(false);
  const seq = useRef(0);

  useEffect(() => {
    const term = q.trim();
    if (term.length < 2) { setHits([]); setSearched(false); return; }
    const mine = ++seq.current;
    const timer = setTimeout(() => {
      search(term)
        .then((res) => { if (mine === seq.current) { setHits(res.users); setSearched(true); } })
        .catch(() => { if (mine === seq.current) { setHits([]); setSearched(true); } });
    }, 250);
    return () => clearTimeout(timer);
  }, [q, search]);

  return (
    <div>
      <div className="relative">
        <MagnifyingGlassIcon className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
        <input className={`${inputClass} pl-9`} value={q} onChange={(e) => setQ(e.target.value)} placeholder={placeholder} />
      </div>
      {hits.length > 0 && (
        <ul className="mt-1 border border-gray-100 rounded-btn divide-y divide-gray-100 max-h-56 overflow-y-auto">
          {hits.map((u) => (
            <li key={u.id}>
              <button
                type="button"
                onClick={() => { onPick(u); setQ(''); setHits([]); setSearched(false); }}
                className="w-full text-left px-3 py-2 hover:bg-gray-50 min-h-[44px]"
              >
                <p className="text-sm font-medium truncate">{u.name}</p>
                <p className="text-xs text-gray-500 truncate">{u.email} · {u.role}</p>
              </button>
            </li>
          ))}
        </ul>
      )}
      {searched && hits.length === 0 && <p className="text-xs text-gray-400 mt-1">{noResults}</p>}
    </div>
  );
}