// WiseTokens — Logs, Routing, Billing, Broker, White Label, Settings
function Logs() {
  const [status, setStatus] = React.useState('all');
  const [model, setModel] = React.useState('all');
  const filtered = WT.RECENT.filter(r => {
    if (status === 'errors' && r.status === 200) return false;
    if (status === 'success' && r.status !== 200) return false;
    if (model !== 'all' && r.model !== model) return false;
    return true;
  });
  return (
    <div className="page">
      <div className="page-h">
        <div><h1>Logs & Usage</h1><div className="sub">Every request, per key, with full token and cost accounting.</div></div>
        <div className="page-actions"><button className="btn"><Icon name="download" size={13}/> Export CSV</button></div>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 18 }}>
        <div className="card"><div className="card-h"><h3>Requests · 24h</h3></div><div className="stat"><div className="v">2,481</div><div className="d"><span className="delta-up"><Icon name="arrow-up" size={10}/>+8.2%</span></div></div></div>
        <div className="card"><div className="card-h"><h3>Error rate</h3></div><div className="stat"><div className="v" style={{ color: 'var(--ok)' }}>0.41%</div><div className="d"><span className="delta-up"><Icon name="arrow-dn" size={10}/>-0.12pp</span></div></div></div>
        <div className="card"><div className="card-h"><h3>p95 latency</h3></div><div className="stat"><div className="v">912ms</div><div className="d dim">p50 384ms</div></div></div>
        <div className="card"><div className="card-h"><h3>Spend · 24h</h3></div><div className="stat"><div className="v">$18.42</div><div className="d dim">≈ $552 / 30d run-rate</div></div></div>
      </div>

      <div className="card" style={{ padding: 12, marginBottom: 18, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
        <Icon name="filter" size={14}/>
        <div className="seg">
          {['all', 'success', 'errors'].map(s => (<button key={s} className={status === s ? 'active' : ''} onClick={() => setStatus(s)}>{s}</button>))}
        </div>
        <select className="select" style={{ width: 200 }} value={model} onChange={e => setModel(e.target.value)}>
          <option value="all">All models</option>
          {WT.MODELS.filter(m => m.origin === 'CN').map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
        </select>
        <div style={{ flex: 1 }}/>
        <span className="dim" style={{ fontSize: 12 }}>{filtered.length} requests</span>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <table className="table">
          <thead><tr><th>Request ID</th><th>Time</th><th>Model</th><th>Key</th><th className="right">In / Out</th><th className="right">Latency</th><th className="right">Cost</th><th>Stream</th><th>Status</th></tr></thead>
          <tbody>
            {filtered.map(r => {
              const m = WT.MODELS.find(x => x.id === r.model);
              return (
                <tr key={r.id}>
                  <td className="mono" style={{ fontSize: 11.5 }}>{r.id}</td>
                  <td className="dim">{WT.fmt.datetime(r.ts)}</td>
                  <td><span className="prov"><span className="prov-dot" style={{ background: WT.PROVIDER_COLORS[r.provider] }}/>{m.name}</span></td>
                  <td className="dim">{r.key}</td>
                  <td className="num right tabular">{WT.fmt.num(r.inTok)} / {WT.fmt.num(r.outTok)}</td>
                  <td className="num right tabular dim">{WT.fmt.ms(r.latency)}</td>
                  <td className="num right tabular">${r.cost.toFixed(4)}</td>
                  <td>{r.stream ? <span className="badge info">streaming</span> : <span className="badge">batch</span>}</td>
                  <td><span className={'badge ' + (r.status === 200 ? 'ok' : r.status === 429 ? 'warn' : 'err')}>{r.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Routing() {
  const [strategy, setStrategy] = React.useState('cost');
  const [fallback, setFallback] = React.useState(true);
  return (
    <div className="page">
      <div className="page-h">
        <div><h1>Routing</h1><div className="sub">Choose how traffic is distributed across providers. Routing happens transparently — your code always targets a single endpoint.</div></div>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 18 }}>
        {[
          { id: 'cost', name: 'Cost-first', desc: 'Route to the cheapest model that meets your quality floor.', color: WT.PROVIDER_COLORS.Qwen },
          { id: 'balanced', name: 'Balanced', desc: 'Weighted routing — 60% cheapest, 30% flagship, 10% fallback.', color: WT.PROVIDER_COLORS.DeepSeek },
          { id: 'quality', name: 'Quality-first', desc: 'Always route to the strongest available model per class.', color: WT.PROVIDER_COLORS.GLM },
        ].map(s => (
          <div key={s.id} className="card" style={{ cursor: 'pointer', borderColor: strategy === s.id ? s.color : 'var(--line)', borderWidth: 1, background: strategy === s.id ? 'var(--accent-bg)' : 'var(--bg-elev)' }} onClick={() => setStrategy(s.id)}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: s.color }}/>
              <h3 style={{ margin: 0, fontSize: 14, fontWeight: 500, textTransform: 'none', letterSpacing: 0, color: 'var(--ink)' }}>{s.name}</h3>
              {strategy === s.id && <span className="badge accent" style={{ marginLeft: 'auto' }}>active</span>}
            </div>
            <p style={{ margin: 0, fontSize: 12.5, color: 'var(--ink-2)' }}>{s.desc}</p>
          </div>
        ))}
      </div>

      <div className="card" style={{ marginBottom: 18, padding: 22 }}>
        <div className="card-h"><h3>Routing priority (for chat class)</h3><span className="dim" style={{ fontSize: 11 }}>drag to reorder</span></div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { id: 'qwen3-turbo', weight: 55 },
            { id: 'deepseek-v3.1', weight: 30 },
            { id: 'glm-4.6', weight: 12 },
            { id: 'doubao-pro', weight: 3 },
          ].map((r, i) => {
            const m = WT.MODELS.find(x => x.id === r.id);
            return (
              <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '32px 1fr 120px 100px', alignItems: 'center', gap: 14, padding: '10px 14px', background: 'var(--bg-sunken)', border: '1px solid var(--line)', borderRadius: 6 }}>
                <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 12 }}>{i + 1}</div>
                <div className="prov"><span className="prov-dot" style={{ background: WT.PROVIDER_COLORS[m.provider], width: 10, height: 10, borderRadius: 3 }}/><span style={{ fontWeight: 500 }}>{m.name}</span><span className="dim" style={{ fontSize: 11 }}>· ${m.in.toFixed(2)}/${m.out.toFixed(2)}</span></div>
                <div style={{ height: 6, background: 'var(--line)', borderRadius: 3, overflow: 'hidden' }}><div style={{ width: `${r.weight}%`, height: '100%', background: WT.PROVIDER_COLORS[m.provider] }}/></div>
                <div className="mono tabular" style={{ textAlign: 'right' }}>{r.weight}%</div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="grid grid-2">
        <div className="card" style={{ padding: 22 }}>
          <div className="card-h"><h3>Automatic failover</h3></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <div className={'switch' + (fallback ? ' on' : '')} onClick={() => setFallback(!fallback)}/>
            <span style={{ fontSize: 13 }}>{fallback ? 'Enabled' : 'Disabled'} · retries within 500ms</span>
          </div>
          <p className="dim" style={{ margin: 0, fontSize: 12.5 }}>If the primary provider returns 5xx or times out, the request is transparently retried on the next model in the priority list.</p>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <div className="card-h"><h3>Quality floor</h3></div>
          <p className="dim" style={{ marginTop: 0, fontSize: 12.5 }}>Skip models rated below this on internal benchmarks for the requested class.</p>
          <div className="seg" style={{ width: '100%' }}>{['none','basic','standard','flagship'].map(x => <button key={x} className={x === 'standard' ? 'active' : ''}>{x}</button>)}</div>
        </div>
      </div>
    </div>
  );
}

function Billing({ balance, setBalance, onToast }) {
  const [openTopup, setOpenTopup] = React.useState(false);
  const [amount, setAmount] = React.useState(100);
  const [method, setMethod] = React.useState('stripe');

  const doTopup = () => {
    setBalance(balance + amount);
    setOpenTopup(false);
    onToast(`Added ${WT.fmt.money(amount)} via ${method}`);
  };

  return (
    <div className="page">
      <div className="page-h">
        <div><h1>Billing</h1><div className="sub">Pay-as-you-go. No subscription — credits never expire.</div></div>
        <div className="page-actions"><button className="btn"><Icon name="download" size={13}/> Download invoices</button><button className="btn primary" onClick={() => setOpenTopup(true)}><Icon name="plus" size={13}/> Add credit</button></div>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 18 }}>
        <div className="card" style={{ padding: 24, background: 'var(--accent-bg)', borderColor: 'color-mix(in oklch, var(--accent) 30%, transparent)' }}>
          <div className="dim" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Available credit</div>
          <div className="mono tabular" style={{ fontSize: 40, fontWeight: 500, letterSpacing: '-0.02em' }}>{WT.fmt.money(balance)}</div>
          <div className="dim" style={{ fontSize: 12, marginTop: 6 }}>≈ 312M DeepSeek V3.1 input tokens</div>
        </div>
        <div className="card" style={{ padding: 24 }}>
          <div className="dim" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Month-to-date spend</div>
          <div className="mono tabular" style={{ fontSize: 28, fontWeight: 500 }}>$42.18</div>
          <div style={{ marginTop: 12 }}><Sparkline data={WT.USAGE_SERIES.slice(-14).map(d => d.cost)} height={36}/></div>
        </div>
        <div className="card" style={{ padding: 24 }}>
          <div className="dim" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Auto top-up</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, marginBottom: 10 }}>
            <div className="switch on"/>
            <span>When balance drops below <span className="mono">$50</span></span>
          </div>
          <div className="dim" style={{ fontSize: 12 }}>Add $200 via Visa ····4242</div>
        </div>
      </div>

      <div className="card" style={{ padding: 0, marginBottom: 18 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
          <h3 style={{ margin: 0, fontSize: 13, fontWeight: 500, textTransform: 'uppercase', color: 'var(--ink-2)', letterSpacing: '0.02em' }}>Payment history</h3>
        </div>
        <table className="table">
          <thead><tr><th>Invoice</th><th>Date</th><th>Method</th><th className="right">Amount</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {WT.INVOICES.map(inv => (
              <tr key={inv.id}>
                <td className="mono">{inv.id}</td>
                <td className="dim">{inv.date}</td>
                <td>{inv.method}</td>
                <td className="num right tabular">{WT.fmt.money(inv.amount)}</td>
                <td><span className="badge ok dot">{inv.status}</span></td>
                <td style={{ textAlign: 'right' }}><button className="btn sm">Receipt</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {openTopup && (
        <div className="backdrop" onClick={() => setOpenTopup(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-h"><h2>Add credit</h2></div>
            <div className="modal-b" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="field">
                <label>Amount (USD)</label>
                <div style={{ display: 'flex', gap: 6 }}>
                  {[25, 100, 500, 2000].map(a => (
                    <button key={a} className={'btn' + (amount === a ? ' primary' : '')} onClick={() => setAmount(a)}>{WT.fmt.money(a)}</button>
                  ))}
                  <input className="input" type="number" value={amount} onChange={e => setAmount(+e.target.value)} style={{ width: 100 }}/>
                </div>
              </div>
              <div className="field">
                <label>Payment method</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  {[
                    { id: 'stripe', name: 'Stripe', sub: 'Card · Apple/Google Pay' },
                    { id: 'paypal', name: 'PayPal', sub: 'PP balance or card' },
                    { id: 'usdt', name: 'USDT', sub: 'TRC20 / ERC20' },
                  ].map(p => (
                    <div key={p.id} onClick={() => setMethod(p.id)} style={{ padding: 12, border: '1px solid ' + (method === p.id ? 'var(--accent)' : 'var(--line)'), background: method === p.id ? 'var(--accent-bg)' : 'var(--bg-elev)', borderRadius: 6, cursor: 'pointer' }}>
                      <div style={{ fontWeight: 500, fontSize: 13 }}>{p.name}</div>
                      <div className="dim" style={{ fontSize: 11 }}>{p.sub}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="modal-f">
              <button className="btn" onClick={() => setOpenTopup(false)}>Cancel</button>
              <button className="btn primary" onClick={doTopup}>Pay {WT.fmt.money(amount)}</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function Broker() {
  const totalCommission = WT.REFERRALS.reduce((s, r) => s + r.commission, 0);
  const totalSpend = WT.REFERRALS.reduce((s, r) => s + r.spend, 0);
  return (
    <div className="page">
      <div className="page-h">
        <div><h1>Broker program</h1><div className="sub">Earn 10% commission on every paying user you refer. Lifetime.</div></div>
        <div className="page-actions"><button className="btn primary"><Icon name="download" size={13}/> Withdraw</button></div>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 18 }}>
        <div className="card"><div className="card-h"><h3>Referrals</h3></div><div className="stat"><div className="v">{WT.REFERRALS.length}</div><div className="d dim">lifetime</div></div></div>
        <div className="card"><div className="card-h"><h3>Referred spend</h3></div><div className="stat"><div className="v">{WT.fmt.money(totalSpend)}</div><div className="d dim">all-time</div></div></div>
        <div className="card"><div className="card-h"><h3>Commission earned</h3></div><div className="stat"><div className="v" style={{ color: 'var(--ok)' }}>{WT.fmt.money(totalCommission)}</div><div className="d dim">10% rate</div></div></div>
        <div className="card"><div className="card-h"><h3>Tier</h3></div><div className="stat"><div className="v">{WT.USER.tier}</div><div className="d dim">10% → 15% at $5k</div></div></div>
      </div>

      <div className="card" style={{ marginBottom: 18, padding: 24 }}>
        <div className="card-h"><h3>Your referral link</h3></div>
        <div style={{ display: 'flex', gap: 8, padding: 14, background: 'var(--bg-sunken)', border: '1px solid var(--line)', borderRadius: 6 }}>
          <code className="mono" style={{ flex: 1, fontSize: 13 }}>https://wisetokens.ai/?ref={WT.USER.referralCode}</code>
          <button className="btn sm"><Icon name="copy" size={12}/> Copy</button>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <button className="btn sm">Share via X</button>
          <button className="btn sm">Share via LinkedIn</button>
          <button className="btn sm">Download banner kit</button>
        </div>
      </div>

      <div className="card" style={{ padding: 0 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line)' }}>
          <h3 style={{ margin: 0, fontSize: 13, fontWeight: 500, textTransform: 'uppercase', color: 'var(--ink-2)', letterSpacing: '0.02em' }}>Referred users</h3>
        </div>
        <table className="table">
          <thead><tr><th>Email</th><th>Joined</th><th className="right">Spend (lifetime)</th><th className="right">Your commission</th><th>Status</th></tr></thead>
          <tbody>
            {WT.REFERRALS.map(r => (
              <tr key={r.email}>
                <td>{r.email}</td>
                <td className="dim">{r.joined}</td>
                <td className="num right tabular">{WT.fmt.money(r.spend)}</td>
                <td className="num right tabular" style={{ color: 'var(--ok)' }}>{WT.fmt.money(r.commission)}</td>
                <td><span className={'badge dot ' + (r.status === 'active' ? 'ok' : 'warn')}>{r.status}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function WhiteLabel() {
  return (
    <div className="page">
      <div className="page-h">
        <div><h1>White Label</h1><div className="sub">Spin up a branded tenant — your domain, your prices, your logo. We handle the infrastructure.</div></div>
        <div className="page-actions"><button className="btn primary"><Icon name="plus" size={13}/> New tenant</button></div>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 18 }}>
        {WT.TENANTS.map(t => (
          <div key={t.id} className="card" style={{ padding: 22 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{ width: 32, height: 32, borderRadius: 6, background: t.color.startsWith('--') ? `var(${t.color})` : t.color, color: 'white', display: 'grid', placeItems: 'center', fontWeight: 600, fontSize: 13 }}>{t.name[0]}</div>
              <div>
                <div style={{ fontWeight: 500, fontSize: 14 }}>{t.name}</div>
                <div className="mono dim" style={{ fontSize: 11 }}>{t.domain}</div>
              </div>
              <span className="badge" style={{ marginLeft: 'auto' }}>{t.plan}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 12 }}>
              <div><div className="dim" style={{ fontSize: 11 }}>Users</div><div className="mono tabular" style={{ fontSize: 16, fontWeight: 500 }}>{t.users}</div></div>
              <div><div className="dim" style={{ fontSize: 11 }}>MTD spend</div><div className="mono tabular" style={{ fontSize: 16, fontWeight: 500 }}>{WT.fmt.money(t.spend)}</div></div>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              <button className="btn sm" style={{ flex: 1 }}>Manage</button>
              <button className="btn sm" style={{ flex: 1 }}>Billing</button>
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{ padding: 24 }}>
        <div className="card-h"><h3>What tenants get</h3></div>
        <div className="grid grid-4" style={{ gap: 24 }}>
          {[
            { icon: 'globe', t: 'Custom domain', d: 'Bring your own domain via CNAME. Free wildcard SSL.' },
            { icon: 'tenant', t: 'Branded console', d: 'Your logo, your color, your landing copy.' },
            { icon: 'wallet', t: 'Price markups', d: 'Set your own per-model markup. We bill, you collect.' },
            { icon: 'shield', t: 'Isolated auth', d: 'Tenant-scoped users, keys, audit logs, SSO.' },
          ].map(f => (
            <div key={f.t}>
              <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--accent-bg)', color: 'var(--accent)', display: 'grid', placeItems: 'center', marginBottom: 10 }}>
                <Icon name={f.icon} size={16}/>
              </div>
              <div style={{ fontWeight: 500, fontSize: 13, marginBottom: 4 }}>{f.t}</div>
              <div className="dim" style={{ fontSize: 12 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function Settings() {
  return (
    <div className="page">
      <div className="page-h"><div><h1>Settings</h1><div className="sub">Account, organization, security.</div></div></div>
      <div className="grid grid-2" style={{ gap: 18 }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="card-h"><h3>Profile</h3></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="field"><label>Name</label><input className="input" defaultValue={WT.USER.name}/></div>
            <div className="field"><label>Email</label><input className="input" defaultValue={WT.USER.email}/></div>
            <div className="field"><label>Organization</label><input className="input" defaultValue={WT.USER.org}/></div>
            <div className="field"><label>Locale</label>
              <select className="select">
                <option>English (US)</option><option>Português (Brasil)</option><option>हिन्दी</option><option>Bahasa Indonesia</option><option>Deutsch</option>
              </select>
            </div>
          </div>
        </div>
        <div className="card" style={{ padding: 24 }}>
          <div className="card-h"><h3>Security</h3></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div><div style={{ fontWeight: 500, fontSize: 13 }}>Two-factor authentication</div><div className="dim" style={{ fontSize: 12 }}>TOTP via Google Authenticator</div></div><div className="switch on"/></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div><div style={{ fontWeight: 500, fontSize: 13 }}>SSO (Google / GitHub)</div><div className="dim" style={{ fontSize: 12 }}>Connected to Google</div></div><div className="switch on"/></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div><div style={{ fontWeight: 500, fontSize: 13 }}>IP allowlist</div><div className="dim" style={{ fontSize: 12 }}>Restrict key usage by IP</div></div><div className="switch"/></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Logs, Routing, Billing, Broker, WhiteLabel, Settings });