const GlobalSearch = ({ onClose, onSelectAccount }) => {
    const [q, setQ]           = React.useState('');
    const [results, setResults] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const inputRef = React.useRef(null);

    React.useEffect(() => { inputRef.current?.focus(); }, []);

    React.useEffect(() => {
        // This component is only mounted while the search is open, so the
        // handler is always live — the old `if (!isOpen) return` referenced an
        // undefined variable and threw, killing Escape-to-close.
        const handler = (e) => { if (e.key === 'Escape') onClose(); };
        document.addEventListener('keydown', handler);
        return () => document.removeEventListener('keydown', handler);
    }, []);

    React.useEffect(() => {
        if (q.trim().length < 2) { setResults(null); return; }
        const t = setTimeout(async () => {
            setLoading(true);
            try { setResults(await api.search(q)); }
            catch(e) { console.error(e); }
            finally { setLoading(false); }
        }, 280);
        return () => clearTimeout(t);
    }, [q]);

    const total = results ? Object.values(results).reduce((s, a) => s + a.length, 0) : 0;

    const Section = ({ icon, label, items, cls, renderSub, onPick }) => {
        if (!items?.length) return null;
        return (
            <div className="search-section">
                <div className="search-section-title"><i className={icon} style={{ marginRight: '0.375rem' }}></i>{label}</div>
                {items.map(item => (
                    <div key={item.id} className="search-result-item" onClick={() => { onPick(item); onClose(); }}>
                        <div className={`search-result-icon ${cls}`}><i className={icon}></i></div>
                        <div className="search-result-main">
                            <div className="search-result-name">{item.name || `${item.first_name} ${item.last_name}` || item.title || item.subject}</div>
                            <div className="search-result-sub">{renderSub(item)}</div>
                        </div>
                    </div>
                ))}
            </div>
        );
    };

    return (
        <div className="search-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
            <div className="search-overlay-box">
                <div className="search-overlay-input-row">
                    <i className="fas fa-search"></i>
                    <input ref={inputRef} className="search-overlay-input" placeholder="Search accounts, contacts, tasks, communications…" value={q} onChange={e => setQ(e.target.value)} />
                    {loading && <i className="fas fa-spinner fa-spin" style={{ color: '#6b7280' }}></i>}
                    <button style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#6b7280', fontSize: '1.1rem' }} onClick={onClose}><i className="fas fa-times"></i></button>
                </div>
                <div className="search-results">
                    {results && total === 0 && <div className="search-empty">No results for "{q}"</div>}
                    {results && (
                        <>
                            <Section icon="fas fa-building" label="Accounts" cls="account" items={results.accounts}
                                renderSub={i => [i.type, i.main_email, i.main_phone].filter(Boolean).join(' · ')}
                                onPick={i => onSelectAccount(i)} />
                            <Section icon="fas fa-user" label="Contacts" cls="contact" items={results.contacts}
                                renderSub={i => [i.title, i.account_name].filter(Boolean).join(' · ')}
                                onPick={i => onSelectAccount({ id: i.account_id })} />
                            <Section icon="fas fa-tasks" label="Tasks" cls="task" items={results.tasks}
                                renderSub={i => [i.account_name, i.due_date ? formatDate(i.due_date) : null].filter(Boolean).join(' · ')}
                                onPick={i => onSelectAccount({ id: i.account_id })} />
                            <Section icon="fas fa-comment" label="Communications" cls="comm" items={results.communications}
                                renderSub={i => [i.account_name, i.type, formatDate(i.timestamp)].filter(Boolean).join(' · ')}
                                onPick={i => onSelectAccount({ id: i.account_id })} />
                        </>
                    )}
                    {!results && q.length < 2 && (
                        <div className="search-empty" style={{ color: '#94a3b8' }}>Type at least 2 characters to search</div>
                    )}
                </div>
            </div>
        </div>
    );
};