// Snabbsök (Ctrl+K) över kunder, offerter OCH artiklar i offertraderna.
//
// Sökningen i sidopanelen träffar bara kundnamn, ämne och offertnummer. Frågan
// "vilken offert var det där vi sålde en Dream Machine till Vikens?" gick inte
// att ställa alls — nu gör den det, eftersom offertraderna ligger i en egen
// tabell på servern (se offer_lines i db.js).
function QuickSearch({ open, onClose, onPickOffer, onPickCustomer, visaAlla }) {
  const [q, setQ] = React.useState('');
  const [traffar, setTraffar] = React.useState([]);
  const [aktiv, setAktiv] = React.useState(0);
  const [laddar, setLaddar] = React.useState(false);
  const inputRef = React.useRef(null);
  const listRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) { setQ(''); setTraffar([]); setAktiv(0); return; }
    setTimeout(() => { if (inputRef.current) inputRef.current.focus(); }, 20);
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const text = q.trim();
    if (text.length < 2) { setTraffar([]); setLaddar(false); return; }
    let avbruten = false;
    setLaddar(true);
    // Vänta tills man slutat skriva en kort stund, annars går ett anrop per
    // tangenttryck mot servern.
    const timer = setTimeout(() => {
      api(`/api/sok?q=${encodeURIComponent(text)}${visaAlla ? '&all=1' : ''}`)
        .then(rader => { if (!avbruten) { setTraffar(rader); setAktiv(0); } })
        .catch(() => { if (!avbruten) setTraffar([]); })
        .finally(() => { if (!avbruten) setLaddar(false); });
    }, 180);
    return () => { avbruten = true; clearTimeout(timer); };
  }, [q, open, visaAlla]);

  const valj = (i) => {
    const t = traffar[i];
    if (!t) return;
    if (t.typ === 'Kund') onPickCustomer(t.id);
    else onPickOffer(t.id);
    onClose();
  };

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape') { e.preventDefault(); onClose(); }
      else if (e.key === 'ArrowDown') { e.preventDefault(); setAktiv(a => (traffar.length ? (a + 1) % traffar.length : 0)); }
      else if (e.key === 'ArrowUp') { e.preventDefault(); setAktiv(a => (traffar.length ? (a - 1 + traffar.length) % traffar.length : 0)); }
      else if (e.key === 'Enter') { e.preventDefault(); valj(aktiv); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, traffar, aktiv]);

  React.useEffect(() => {
    if (!listRef.current) return;
    const el = listRef.current.querySelector(`[data-i="${aktiv}"]`);
    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
  }, [aktiv]);

  if (!open) return null;

  return (
    <div onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }} style={{
      position: 'fixed', inset: 0, background: 'rgba(0,54,95,.32)', zIndex: 300,
      display: 'flex', justifyContent: 'center', alignItems: 'flex-start', padding: '10vh 16px 16px',
    }}>
      <div role="dialog" aria-modal="true" aria-label="Snabbsök" style={{
        background: '#fff', borderRadius: 8, width: '100%', maxWidth: 640, overflow: 'hidden',
        boxShadow: '0 24px 64px rgba(0,54,95,.3)', fontFamily: 'var(--font-sans)',
      }}>
        <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} type="text"
          placeholder="Sök kund, offertnummer, rubrik eller artikel…"
          aria-label="Sök kund, offert eller artikel"
          style={{
            width: '100%', fontFamily: 'var(--font-sans)', fontSize: 16, padding: '16px 18px',
            border: 'none', borderBottom: '1px solid var(--border)', color: 'var(--ulab-navy)', outline: 'none',
          }} />
        <div ref={listRef} style={{ maxHeight: '52vh', overflow: 'auto' }}>
          {q.trim().length < 2 && (
            <div style={tomText}>Skriv minst två tecken. Sökningen hittar kunder, offerter och artiklar som ligger på en offertrad.</div>
          )}
          {q.trim().length >= 2 && !laddar && traffar.length === 0 && (
            <div style={tomText}>Ingen träff på ”{q.trim()}”.</div>
          )}
          {traffar.map((t, i) => (
            <button key={t.typ + t.id + i} data-i={i} onClick={() => valj(i)} onMouseEnter={() => setAktiv(i)} style={{
              display: 'flex', width: '100%', gap: 12, alignItems: 'baseline', textAlign: 'left',
              background: i === aktiv ? 'var(--ulab-cream)' : 'transparent', border: 'none',
              borderBottom: '1px solid var(--border)', padding: '11px 18px', cursor: 'pointer',
              fontFamily: 'var(--font-sans)',
            }}>
              <span style={{
                fontSize: 9.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase',
                color: 'var(--fg-muted)', width: 58, flex: 'none',
              }}>{t.typ}</span>
              <span>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ulab-navy)' }}>{t.titel}</span>
                <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 1 }}>{t.under}</div>
              </span>
            </button>
          ))}
        </div>
        <div style={{
          padding: '9px 18px', fontSize: 11, color: 'var(--fg-muted)',
          background: 'var(--ulab-cool-grey)', display: 'flex', gap: 14, flexWrap: 'wrap',
        }}>
          <span>↑ ↓ bläddra</span><span>Enter öppnar</span><span>Esc stänger</span>
        </div>
      </div>
    </div>
  );
}

const tomText = { padding: '22px 18px', fontSize: 13, color: 'var(--fg-muted)' };

window.QuickSearch = QuickSearch;