// WiseTokens — Models catalog
function Models({ onNav }) {
  const [q, setQ] = React.useState('');
  const [provider, setProvider] = React.useState('all');
  const [cls, setCls] = React.useState('all');
  const [sort, setSort] = React.useState('popularity');

  const providers = ['all', ...Array.from(new Set(WT.MODELS.map(m => m.provider)))];
  const classes = ['all', 'chat', 'reasoning', 'code', 'vision', 'video'];

  const filtered = WT.MODELS.filter(m => {
    if (provider !== 'all' && m.provider !== provider) return false;
    if (cls !== 'all' && m.class !== cls) return false;
    if (q && !(m.name.toLowerCase().includes(q.toLowerCase()) || m.id.includes(q.toLowerCase()))) return false;
    return true;
  }).sort((a, b) => {
    if (sort === 'popularity') return b.popularity - a.popularity;
    if (sort === 'cheapest') return (a.in + a.out) - (b.in + b.out);
    if (sort === 'fastest') return a.latency - b.latency;
    return 0;
  });

  return (
    <div className="page">
      <div className="page-h">
        <div>
          <h1>Models</h1>
          <div className="sub">One OpenAI-compatible endpoint across every model. Pricing is per 1M tokens, in USD.</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="route" size={13}/> Configure routing</button>
        </div>
      </div>

      {/* Filter bar */}
      <div className="card" style={{ padding: 12, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: 'var(--bg-sunken)', border: '1px solid var(--line)', borderRadius: 5, flex: '1 1 240px', minWidth: 200 }}>
          <Icon name="search" size={14}/>
          <input className="input" style={{ border: 'none', padding: 0, background: 'transparent' }}
                 placeholder="Search 12 models…" value={q} onChange={e => setQ(e.target.value)}/>
        </div>
        <div className="seg">
          {providers.map(p => (
            <button key={p} className={provider === p ? 'active' : ''} onClick={() => setProvider(p)}>
              {p === 'all' ? 'All providers' : p}
            </button>
          ))}
        </div>
        <div className="seg">
          {classes.map(c => (
            <button key={c} className={cls === c ? 'active' : ''} onClick={() => setCls(c)}>{c}</button>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <div className="seg">
          {[['popularity','Popular'],['cheapest','Cheapest'],['fastest','Fastest']].map(([v, l]) => (
            <button key={v} className={sort === v ? 'active' : ''} onClick={() => setSort(v)}>{l}</button>
          ))}
        </div>
      </div>

      {/* Table */}
      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ overflowX: 'auto' }}>
          <table className="table">
            <thead>
              <tr>
                <th>Model</th>
                <th>Class</th>
                <th>Context</th>
                <th className="right">Input / 1M</th>
                <th className="right">Output / 1M</th>
                <th className="right">Latency p50</th>
                <th className="right">Uptime</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(m => (
                <tr key={m.id}>
                  <td style={{ minWidth: 280, padding: '12px' }}>
                    <div className="prov" style={{ fontSize: 13, color: 'var(--ink)' }}>
                      <span className="prov-dot" style={{ background: WT.PROVIDER_COLORS[m.provider], width: 10, height: 10, borderRadius: 3 }}/>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span style={{ fontWeight: 500, fontFamily: 'var(--font-sans)' }}>{m.name}</span>
                          {m.tags.includes('cheap') && <span className="badge accent">best price</span>}
                          {m.tags.includes('upstream') && <span className="badge">reference</span>}
                        </div>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{m.id}</span>
                      </div>
                    </div>
                  </td>
                  <td><span className="badge">{m.class}</span></td>
                  <td className="num tabular dim">{WT.fmt.compact(m.ctx)}</td>
                  <td className="num right tabular">${m.in.toFixed(2)}</td>
                  <td className="num right tabular">${m.out.toFixed(2)}</td>
                  <td className="num right tabular dim">{WT.fmt.ms(m.latency)}</td>
                  <td className="num right tabular">
                    <span className={m.sla >= 99.9 ? 'delta-up' : ''}>{m.sla.toFixed(2)}%</span>
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn sm" onClick={() => onNav('playground')}>Try <Icon name="arrow-right" size={11}/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Pricing comparison */}
      <div className="card" style={{ marginTop: 18, padding: 22 }}>
        <div className="card-h">
          <h3>Price vs. upstream — per 1M tokens (input+output)</h3>
          <span className="badge accent">up to 11× cheaper</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
          {[
            { name: 'GPT-4o', total: 12.50, color: 'var(--ink-3)' },
            { name: 'Claude Sonnet 4', total: 18.00, color: 'var(--ink-3)' },
            { name: 'Qwen 3 Max', total: 1.90, color: WT.PROVIDER_COLORS.Qwen },
            { name: 'DeepSeek V3.1', total: 1.37, color: WT.PROVIDER_COLORS.DeepSeek },
            { name: 'GLM 4.6', total: 2.00, color: WT.PROVIDER_COLORS.GLM },
            { name: 'Qwen 3 Turbo', total: 0.28, color: WT.PROVIDER_COLORS.Qwen },
            { name: 'GLM 4 Flash', total: 0.20, color: WT.PROVIDER_COLORS.GLM },
          ].map(r => {
            const max = 18.00;
            return (
              <div key={r.name} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 80px', alignItems: 'center', gap: 14, fontSize: 12.5 }}>
                <div>{r.name}</div>
                <div style={{ height: 14, background: 'var(--bg-sunken)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ width: `${(r.total/max)*100}%`, height: '100%', background: r.color }}/>
                </div>
                <div className="mono tabular right" style={{ textAlign: 'right', fontWeight: 500 }}>${r.total.toFixed(2)}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Models });