// app/page-search.jsx — Search results.

function PageSearch() {
  const app = useApp();
  const S = window.SCHOLIA;
  const [q, setQ] = React.useState(app.route.query && app.route.query.q ? app.route.query.q : '');
  React.useEffect(() => { setQ(app.route.query && app.route.query.q ? app.route.query.q : ''); }, [app.route.query && app.route.query.q]);

  const res = S.search(q);
  const total = res.works.length + res.recordings.length + res.composers.length;
  const suggestions = ['Kleiber', 'Goldberg', 'Mahler', 'Period instruments', 'Karajan', 'Four Seasons'];

  const submit = (e) => { e.preventDefault(); navigate('/search?q=' + encodeURIComponent(q)); };

  const RecRow = ({ r }) => (
    <div className="clickable" onClick={() => navigate('/recording/' + r.id)}
      style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '14px 0', borderBottom: '1px solid var(--rule)' }}>
      <Cover composer="" work="" tone={r.tone} size={52} label="" style={{ borderRadius: 2 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="c-serif" style={{ fontSize: 18, fontWeight: 500 }}>{r.conductor || r.soloist} · {r.ensemble}</div>
        <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 2 }}>{r.composerName} — {r.work.title} · {r.year} · {r.label}</div>
      </div>
      <ScoreInline c={r.critic} f={r.fan} size={34} />
    </div>
  );

  return (
    <div className="coda" style={{ width: '100%', minHeight: '100%' }}>
      <Nav active="Browse" />
      <main className="app-wrap" style={{ paddingTop: 44, paddingBottom: 8 }}>
        <div className="c-eyebrow" style={{ marginBottom: 14 }}>Search the almanac</div>
        <form onSubmit={submit} style={{ display: 'flex', alignItems: 'center', gap: 12, border: '1px solid var(--rule-strong)', borderRadius: 999, padding: '14px 22px', background: '#fff', maxWidth: 720 }}>
          <span style={{ width: 18, height: 18, borderRadius: '50%', border: '2px solid var(--ink-3)', flex: '0 0 18px' }} />
          <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Composers, works, conductors, soloists, labels…"
            style={{ border: 0, outline: 0, background: 'none', fontFamily: 'var(--serif)', fontSize: 20, color: 'var(--ink)', width: '100%' }} />
        </form>

        {!q.trim() ? (
          <div style={{ paddingTop: 38 }}>
            <div className="c-eyebrow" style={{ marginBottom: 14 }}>Try</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {suggestions.map((s) => <span key={s} className="c-chip" style={{ fontSize: 14, padding: '8px 15px' }} onClick={() => navigate('/search?q=' + encodeURIComponent(s))}>{s}</span>)}
            </div>
          </div>
        ) : (
          <div style={{ paddingTop: 30 }}>
            <div className="c-mono" style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 30 }}>{total} result{total === 1 ? '' : 's'} for “{q}”</div>

            {res.composers.length > 0 && (
              <section style={{ marginBottom: 40 }}>
                <h2 className="c-serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 16 }}>Composers</h2>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {res.composers.map((c) => <span key={c.id} className="c-chip" style={{ fontSize: 14, padding: '8px 15px' }} onClick={() => navigate('/search?q=' + encodeURIComponent(c.name))}>{c.full} · {c.years}</span>)}
                </div>
              </section>
            )}

            {res.works.length > 0 && (
              <section style={{ marginBottom: 40 }}>
                <h2 className="c-serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 8 }}>Works</h2>
                {res.works.map((w) => (
                  <div key={w.id} className="clickable" onClick={() => navigate('/work/' + w.id)}
                    style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '15px 0', borderBottom: '1px solid var(--rule)' }}>
                    <div style={{ flex: 1 }}>
                      <div className="c-serif" style={{ fontSize: 20, fontWeight: 500 }}>{w.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{w.subtitle}</span></div>
                      <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 3 }}>{w.composer} · {w.recordingCount} recordings</div>
                    </div>
                    <span className="c-mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{w.year} →</span>
                  </div>
                ))}
              </section>
            )}

            {res.recordings.length > 0 && (
              <section style={{ marginBottom: 20 }}>
                <h2 className="c-serif" style={{ fontSize: 22, fontWeight: 500, marginBottom: 8 }}>Recordings</h2>
                {res.recordings.slice(0, 12).map((r) => <RecRow key={r.id} r={r} />)}
              </section>
            )}

            {total === 0 && (
              <div style={{ padding: '40px 0', color: 'var(--ink-3)' }}>
                <p className="c-serif" style={{ fontSize: 22, fontStyle: 'italic', marginBottom: 14 }}>Nothing in the almanac matches “{q}”.</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {suggestions.map((s) => <span key={s} className="c-chip" style={{ fontSize: 14, padding: '8px 15px' }} onClick={() => navigate('/search?q=' + encodeURIComponent(s))}>{s}</span>)}
                </div>
              </div>
            )}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, { PageSearch });