// AXIS-11 — Global search. Full-screen overlay over the shell.
function SearchOverlay({ onClose, onOpenParameter, onNavigate }) {
  const [q, setQ] = React.useState('');
  const ql = q.trim().toLowerCase();
  const params = MData.parameters.filter((p) => p.label.toLowerCase().includes(ql));
  const systems = MData.systems.filter((s) => s.name.toLowerCase().includes(ql));
  const total = params.length + systems.length;

  const Section = ({ title, count, children }) => (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 4px', marginBottom: 8 }}>
        <MEyebrow>{title}</MEyebrow><div style={{ font: `400 11px/1 ${M.mono}`, color: M.inkFaint }}>{count}</div>
      </div>
      {children}
    </div>
  );

  const row = (label, sub, onClick, key) => (
    <div key={key} onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px', cursor: 'pointer', borderBottom: `1px solid ${M.ruleSoft}` }}>
      <div style={{ flex: 1 }}>
        <div style={{ font: `500 14px/1.2 ${M.sans}`, color: M.ink }}>{label}</div>
        {sub && <div style={{ font: `400 12px/1.3 ${M.sans}`, color: M.inkMuted, marginTop: 3 }}>{sub}</div>}
      </div>
      <window.MIcons.ChevronR size={16} />
    </div>
  );

  return (
    <div style={{ background: M.canvas, minHeight: '100%' }}>
      <div style={{ padding: '6px 12px 12px', borderBottom: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1 }}>
          <DSSearchField value={q} onChange={setQ} placeholder="Search parameters, systems, entries…" autoFocus />
        </div>
        <button onClick={onClose} style={{ background: 'transparent', border: 'none', cursor: 'pointer', font: `500 14px/1 ${M.sans}`, color: M.axis, padding: '8px 4px' }}>Cancel</button>
      </div>

      <div style={{ padding: '8px 16px 24px' }}>
        {!ql && (
          <div>
            <div style={{ marginTop: 8 }}><MEyebrow>Try</MEyebrow></div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
              {['Sleep', 'Mood', 'Hot flashes', 'Hydration', 'Weekly recap'].map((s) => (
                <span key={s} onClick={() => setQ(s)} style={{ cursor: 'pointer' }}><DSChip>{s}</DSChip></span>
              ))}
            </div>
            <div style={{ marginTop: 22 }}><MEyebrow>Recent</MEyebrow></div>
            <DSCard padding={0} style={{ overflow: 'hidden', marginTop: 8 }}>
              {['sleep duration', 'hot flash wine', 'morning energy'].map((r) => row(r, null, () => setQ(r), r))}
            </DSCard>
          </div>
        )}
        {ql && (
          <div>
            <div style={{ padding: '8px 4px 0', font: `400 11px/1 ${M.mono}`, color: M.inkMuted }}>{total} result{total === 1 ? '' : 's'} for "{q}"</div>
            {params.length > 0 && (
              <Section title="Parameters" count={params.length}>
                <DSCard padding={0} style={{ overflow: 'hidden' }}>{params.map((p) => row(p.label, `last ${p.value}`, () => { onClose(); onOpenParameter(p); }, p.id))}</DSCard>
              </Section>
            )}
            {systems.length > 0 && (
              <Section title="Systems" count={systems.length}>
                <DSCard padding={0} style={{ overflow: 'hidden' }}>{systems.map((s) => row(s.name, s.desc, () => { onClose(); onNavigate('system'); }, s.id))}</DSCard>
              </Section>
            )}
            {total === 0 && <div style={{ padding: '24px 4px', textAlign: 'center', font: `400 13px/1.5 ${M.sans}`, color: M.inkMuted }}>No matches for "{q}".</div>}
          </div>
        )}
      </div>
    </div>
  );
}
window.SearchOverlay = SearchOverlay;