// Type-ahead account selector — replaces <select> dropdowns fed by a
// load-everything accounts array. Searches server-side (name / email /
// phone / customer number), debounced, capped at 20 suggestions. Works the
// same at 30 accounts or 300,000.
//
// Props: value (account id or ''), initialName (label when reopening an
// existing pick), onChange(id, account) — id is '' when cleared.

const AccountPicker = ({ value, initialName, onChange, placeholder = 'Search accounts…', autoFocus = false }) => {
    const [query, setQuery]     = React.useState('');
    const [results, setResults] = React.useState([]);
    const [open, setOpen]       = React.useState(false);
    const [picked, setPicked]   = React.useState(value ? { id: value, name: initialName || '' } : null);
    const boxRef = React.useRef(null);

    // Close on outside click — standard dropdown hygiene.
    React.useEffect(() => {
        const handler = (e) => { if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false); };
        document.addEventListener('mousedown', handler);
        return () => document.removeEventListener('mousedown', handler);
    }, []);

    React.useEffect(() => {
        if (!open) return;
        const t = setTimeout(() => {
            api.getAccounts({ paged: 'true', limit: 20, ...(query.trim() ? { search: query.trim() } : {}) })
                .then(({ rows }) => setResults(rows))
                .catch(() => setResults([]));
        }, 200);
        return () => clearTimeout(t);
    }, [query, open]);

    const pick = (a) => {
        setPicked(a); setOpen(false); setQuery('');
        onChange(a.id, a);
    };
    const clear = () => {
        setPicked(null); setQuery(''); setOpen(true);
        onChange('', null);
    };

    if (picked) {
        return (
            <div className="account-picker" ref={boxRef}>
                <div className="account-picker-chip">
                    <span style={{ fontWeight: 500 }}>{picked.name || `#${picked.id}`}</span>
                    {picked.customer_number && <span className="customer-number-badge">{picked.customer_number}</span>}
                    <button type="button" className="btn-icon-sm" title="Change account" onClick={clear}><i className="fas fa-times"></i></button>
                </div>
            </div>
        );
    }

    return (
        <div className="account-picker" ref={boxRef}>
            <input
                type="text"
                className="form-input"
                value={query}
                placeholder={placeholder}
                autoFocus={autoFocus}
                onFocus={() => setOpen(true)}
                onChange={e => { setQuery(e.target.value); setOpen(true); }}
            />
            {open && (
                <div className="account-picker-menu">
                    {results.length === 0
                        ? <div className="account-picker-empty">{query ? 'No matches' : 'Type to search…'}</div>
                        : results.map(a => (
                            <div key={a.id} className="account-picker-item" onMouseDown={() => pick(a)}>
                                <span>{a.name}</span>
                                <span style={{ display: 'flex', gap: '0.4rem', alignItems: 'center' }}>
                                    {a.customer_number && <span className="customer-number-badge">{a.customer_number}</span>}
                                    <span style={{ fontSize: '0.7rem', color: 'var(--text-3)' }}>{a.type}</span>
                                </span>
                            </div>
                        ))}
                </div>
            )}
        </div>
    );
};