// screen-clients.jsx — поиск клиента (по ФИО/телефону) и список результатов карточками.
// GET /api/clients/search?q= (min 2 символа). Тап по карточке → карточка клиента.
(() => {
  const { useState, useEffect, useRef } = React;
  const { clientName, firstPhone, initials } = window.M;

  function fio(c) {
    return [c.last_name, c.first_name, c.middle_name].filter(Boolean).join(' ').trim();
  }

  window.ClientsScreen = function ClientsScreen({ onOpenClient }) {
    const [q, setQ] = useState('');
    const [results, setResults] = useState([]);
    const [loading, setLoading] = useState(false);
    const [touched, setTouched] = useState(false);
    const timer = useRef(null);
    const seq = useRef(0);
    const inputRef = useRef(null);

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

    useEffect(() => {
      clearTimeout(timer.current);
      const query = q.trim();
      if (query.length < 2) { setResults([]); setLoading(false); return; }
      setLoading(true);
      timer.current = setTimeout(async () => {
        const my = ++seq.current;
        try {
          const rows = await window.api.clients.search(query);
          if (my === seq.current) { setResults(rows || []); setTouched(true); }
        } catch (e) {
          if (my === seq.current) { setResults([]); window.toast(e.message || 'Ошибка поиска', 'err'); }
        } finally {
          if (my === seq.current) setLoading(false);
        }
      }, 320);
      return () => clearTimeout(timer.current);
    }, [q]);

    return (
      <div className="screen">
        <div className="search-bar">
          <span className="search-ico"><Icon name="search" size={20} /></span>
          <input ref={inputRef} className="input" inputMode="search" placeholder="Имя, фамилия или телефон"
            autoCapitalize="words" value={q}
            onChange={(e) => setQ(e.target.value)} />
        </div>

        {loading && <Spinner />}

        {!loading && q.trim().length >= 2 && results.length === 0 && touched && (
          <div className="empty"><span className="empty-emoji">🔍</span>Никого не нашлось</div>
        )}

        {!loading && q.trim().length < 2 && (
          <div className="empty"><span className="empty-emoji">🔍</span>Введите минимум 2 символа<br/>для поиска клиента</div>
        )}

        {results.map((c) => {
          const phone = firstPhone(c);
          return (
            <div key={c.id} className="card tap" onClick={() => onOpenClient(c.id)}>
              <div className="card-row">
                <div className="avatar">{initials(fio(c))}</div>
                <div className="grow">
                  <div style={{ fontWeight: 600 }} className="ellipsis">{fio(c) || '—'}</div>
                  {phone && <div className="subtle mono">{phone}</div>}
                </div>
                <Icon name="chevronRight" size={20} className="muted" />
              </div>
            </div>
          );
        })}
      </div>
    );
  };
})();