// app/page-work.jsx — Work page (ranked leaderboard), live sort + filter.

function PageWork() {
  const app = useApp();
  const S = window.SCHOLIA;
  const w = S.work(app.route.id) || S.work('beethoven-5');
  const [sort, setSort] = React.useState('critics');
  const [filters, setFilters] = React.useState({});

  const sorts = [['critics', 'Critics'], ['fans', 'Fans'], ['year', 'Year'], ['reviews', 'Most reviewed']];
  const filterDefs = [['Studio', (r) => r.type === 'Studio'], ['Live', (r) => r.type === 'Live'], ['Period', (r) => r.type === 'Period'], ['Pre-1970', (r) => r.year < 1970]];
  const toggle = (k) => setFilters((f) => ({ ...f, [k]: !f[k] }));

  let list = S.recordingsForWork(w.id, sort);
  const active = filterDefs.filter(([k]) => filters[k]);
  if (active.length) list = list.filter((r) => active.some(([, fn]) => fn(r)));

  const Row = ({ r, rank }) => {
    const top = rank === 1;
    return (
      <div className="lb-row clickable" onClick={() => navigate('/recording/' + r.id)} style={top ? { background: 'var(--paper-2)' } : {}}>
        {top && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: 'var(--critic)' }} />}
        <div className="lb-rank"><span className="c-serif" style={{ fontSize: 30, fontWeight: 400, color: top ? 'var(--critic)' : 'var(--ink-3)' }}>{rank}</span></div>
        <div className="lb-cover"><Cover composer="" work="" tone={r.tone} size={56} label="" style={{ borderRadius: 2 }} /></div>
        <div className="lb-meta">
          <div className="c-serif" style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>{r.conductor || r.soloist}</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 3, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <span>{r.ensemble} · {r.year} · {r.label}</span>
            {r.tags.map((t) => <span key={t} className="c-mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)', border: '1px solid var(--rule)', borderRadius: 3, padding: '1px 6px' }}>{t}</span>)}
          </div>
        </div>
        <div className="lb-scores">
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}><Ring value={r.critic} kind="critic" size={46} /><span className="c-mono" style={{ fontSize: 8.5, color: 'var(--critic)' }}>CRIT</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}><Ring value={r.fan} kind="fan" size={46} /><span className="c-mono" style={{ fontSize: 8.5, color: 'var(--fan-ink)' }}>FANS</span></div>
        </div>
        <div className="lb-listen"><Listen svc="Spotify" /></div>
      </div>
    );
  };

  return (
    <div className="coda" style={{ width: '100%', minHeight: '100%' }}>
      <Nav active="Works" />
      <main className="app-wrap" style={{ paddingTop: 36, paddingBottom: 8 }}>
        <div className="c-mono" style={{ fontSize: 12, letterSpacing: '0.06em', color: 'var(--ink-3)', marginBottom: 22 }}>
          <span className="clickable" onClick={() => navigate('/')}>Browse</span> / <span className="clickable" onClick={() => navigate('/search?q=' + encodeURIComponent(w.composerName))}>{w.composerName}</span> / <span style={{ color: 'var(--ink)' }}>{w.title}</span>
        </div>

        <header className="work-header">
          <div>
            <div className="c-eyebrow" style={{ marginBottom: 12 }}>{w.composer} · {w.year}{w.catalog ? ' · ' + w.catalog : ''}</div>
            <h1 className="c-serif" style={{ fontSize: 'clamp(40px,5.6vw,60px)', lineHeight: 0.96, fontWeight: 500, letterSpacing: '-0.02em' }}>
              {w.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{w.subtitle}</span>
            </h1>
            <p style={{ fontSize: 15.5, color: 'var(--ink-2)', marginTop: 16, maxWidth: 620, lineHeight: 1.5 }}>{w.blurb}</p>
          </div>
          <div style={{ display: 'flex', gap: 28, paddingBottom: 6 }}>
            <div style={{ textAlign: 'center' }}>
              <div className="c-serif" style={{ fontSize: 40, fontWeight: 500 }}>{w.recordingCount}</div>
              <div className="c-eyebrow" style={{ marginTop: 2 }}>Recordings</div>
            </div>
            <div style={{ width: 1, background: 'var(--rule)' }} />
            <div style={{ textAlign: 'center' }}>
              <div className="c-serif" style={{ fontSize: 40, fontWeight: 500 }}>{w.duration}</div>
              <div className="c-eyebrow" style={{ marginTop: 2 }}>{w.movements} movements</div>
            </div>
          </div>
        </header>

        {/* controls */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', padding: '22px 0' }}>
          <span className="c-eyebrow">Sort</span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {sorts.map(([k, l]) => <span key={k} className={'c-chip' + (sort === k ? ' c-chip--on' : '')} onClick={() => setSort(k)}>{l}</span>)}
          </div>
          <div style={{ width: 1, height: 24, background: 'var(--rule)', margin: '0 6px' }} />
          <span className="c-eyebrow">Filter</span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {filterDefs.map(([k]) => <span key={k} className={'c-chip' + (filters[k] ? ' c-chip--on' : '')} onClick={() => toggle(k)}>{k}</span>)}
          </div>
        </div>

        {/* leaderboard */}
        <div style={{ border: '1px solid var(--rule)', borderRadius: 4, overflow: 'hidden' }}>
          <div className="lb-row head">
            <span className="lb-rank c-eyebrow">Rank</span>
            <span className="lb-cover c-eyebrow"></span>
            <span className="lb-meta c-eyebrow">Recording</span>
            <span className="lb-scores c-eyebrow" style={{ display: 'block', textAlign: 'right' }}>Critics · Fans</span>
            <span className="lb-listen c-eyebrow" style={{ display: 'block', textAlign: 'right' }}>Listen</span>
          </div>
          {list.length ? list.map((r, i) => <Row key={r.id} r={r} rank={i + 1} />) : (
            <div style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--ink-3)', background: '#fff' }} className="c-mono">No recordings match those filters.</div>
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <button className="c-btn c-btn--ghost" onClick={() => app.showToast('Showing the top ' + list.length + ' of ' + w.recordingCount + ' in this prototype')}>Show all {w.recordingCount} recordings</button>
        </div>
      </main>
      <Footer />
    </div>
  );
}

Object.assign(window, { PageWork });