/* page-models.jsx — Model Hub: compare picker + spec sheets + benchmark bars */
const { useState: useStateM, useMemo: useMemoM } = React;
const { MODELS, MODEL_DETAILS, BENCH_KEYS } = window.RADAR;

const M_COLORS = ['#2563eb', '#7c3aed', '#10b981'];

function modelColor(m) {
  return m.sat === 0 ? '#1a1d29' : `linear-gradient(135deg, hsl(${m.hue} 75% 52%), hsl(${m.hue + 36} 70% 58%))`;
}

function ModelsPage() {
  useRevealAll();
  const [picked, setPicked] = useStateM(['GPT-5.2', 'Claude 4.5 Opus']);
  const [sort, setSort] = useStateM('score');

  const toggle = (name) => setPicked((prev) => {
    if (prev.includes(name)) return prev.length > 1 ? prev.filter((n) => n !== name) : prev;
    return prev.length >= 3 ? [...prev.slice(1), name] : [...prev, name];
  });

  const sel = picked.map((n) => MODELS.find((m) => m.name === n));

  const table = useMemoM(() => {
    const arr = [...MODELS];
    arr.sort((a, b) => {
      if (sort === 'in$') return a.in$ - b.in$;
      if (sort === 'speed') return b.speed - a.speed;
      if (sort === 'swe') return MODEL_DETAILS[b.name].bench['SWE-bench'] - MODEL_DETAILS[a.name].bench['SWE-bench'];
      return b.score - a.score;
    });
    return arr;
  }, [sort]);

  return (
    <>
      <Nav active="models" />
      <PageHero eyebrow="Model hub" title={<>Every frontier model, <span className="grad-text">side by side.</span></>}
        sub="Pick up to three models to compare specs, pricing and benchmarks — updated with every release." />

      <main className="wrap page-body">
        {/* picker */}
        <div className="pick-row reveal">
          {MODELS.map((m) => (
            <button key={m.name} className={'pick' + (picked.includes(m.name) ? ' on' : '')} onClick={() => toggle(m.name)}>
              <span className="m-dot" style={{ background: modelColor(m) }}>{m.name[0]}</span>
              {m.name}
            </button>
          ))}
        </div>

        {/* spec cards */}
        <div className="compare-grid reveal" style={{ gridTemplateColumns: `repeat(${sel.length}, 1fr)` }}>
          {sel.map((m, i) => {
            const d = MODEL_DETAILS[m.name];
            return (
              <div className="spec-card" key={m.name} style={{ '--mc': M_COLORS[i] }}>
                <div className="m-id">
                  <div className="m-dot" style={{ background: modelColor(m), width: 42, height: 42, borderRadius: 13, fontSize: 17 }}>{m.name[0]}</div>
                  <div>
                    <div className="m-name" style={{ fontSize: 17 }}>{m.name}</div>
                    <div className="m-org">{m.org}</div>
                  </div>
                </div>
                <div className="spec-rows">
                  <div className="spec-row"><span className="k">Released</span><span className="v">{d.released}</span></div>
                  <div className="spec-row"><span className="k">Context</span><span className="v mono-v">{m.ctx} tokens</span></div>
                  <div className="spec-row"><span className="k">Input / Output</span><span className="v mono-v">${m.in$.toFixed(2)} / ${m.out$.toFixed(2)} per M</span></div>
                  <div className="spec-row"><span className="k">Speed</span><span className="v mono-v">{m.speed} tok/s</span></div>
                  <div className="spec-row"><span className="k">Knowledge cutoff</span><span className="v">{d.cutoff}</span></div>
                  <div className="spec-row"><span className="k">Modality</span><span className="v" style={{ fontWeight: 500, fontSize: 12.5, maxWidth: '60%' }}>{d.modality}</span></div>
                </div>
              </div>
            );
          })}
        </div>

        {/* benchmarks */}
        <div className="bench-panel reveal" style={{ marginTop: 14, marginBottom: 56 }}>
          <div className="bench-legend">
            {sel.map((m, i) => (
              <span className="li" key={m.name}><span className="sw" style={{ background: M_COLORS[i] }}></span>{m.name}</span>
            ))}
          </div>
          {BENCH_KEYS.map((bk) => (
            <div className="bench-row" key={bk}>
              <div className="bl"><span className="bn">{bk}</span><span style={{ color: 'var(--ink-3)', fontWeight: 500 }}>higher is better</span></div>
              <div className="bench-bars">
                {sel.map((m, i) => {
                  const v = MODEL_DETAILS[m.name].bench[bk];
                  return (
                    <div className="bench-bar" key={m.name}>
                      <div className="bench-track"><div className="bench-fill" style={{ width: v + '%', background: M_COLORS[i] }}></div></div>
                      <span className="bench-val">{v.toFixed(1)}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        {/* full ranking table */}
        <div className="sec-head reveal" style={{ marginBottom: 22 }}>
          <span className="sec-eyebrow grad-text"><span className="dot"></span>Full ranking</span>
          <h2 style={{ fontSize: 'clamp(24px, 3vw, 34px)' }}>All tracked frontier models.</h2>
        </div>
        <div className="model-table reveal">
          <div className="mt-row head" style={{ gridTemplateColumns: '2.1fr 1fr 1.1fr 1.5fr 1fr' }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>Model</span>
            <button className="mt-c-ctx" style={{ cursor: 'default' }}>Context</button>
            <button className={sort === 'in$' ? 'on' : ''} onClick={() => setSort('in$')}>Input $/M {sort === 'in$' ? '↑' : ''}</button>
            <button className={sort === 'score' ? 'on' : ''} onClick={() => setSort('score')}>Intelligence {sort === 'score' ? '↓' : ''}</button>
            <button className={'mt-c-speed ' + (sort === 'swe' ? 'on' : '')} onClick={() => setSort('swe')}>SWE-bench {sort === 'swe' ? '↓' : ''}</button>
          </div>
          {table.map((m) => (
            <div className="mt-row" key={m.name} style={{ gridTemplateColumns: '2.1fr 1fr 1.1fr 1.5fr 1fr' }}>
              <div className="m-id">
                <div className="m-dot" style={{ background: modelColor(m) }}>{m.name[0]}</div>
                <div>
                  <div className="m-name">{m.name}</div>
                  <div className="m-org">{m.org}</div>
                </div>
              </div>
              <div className="m-num mt-c-ctx">{m.ctx} <small>tokens</small></div>
              <div className="m-num">${m.in$.toFixed(2)}</div>
              <div className="score-bar">
                <div className="score-track"><div className="score-fill" style={{ width: m.score + '%' }}></div></div>
                <span className="score-val">{m.score.toFixed(1)}</span>
              </div>
              <div className="m-num mt-c-speed">{MODEL_DETAILS[m.name].bench['SWE-bench'].toFixed(1)}</div>
            </div>
          ))}
        </div>
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ModelsPage />);