{% extends "_base.html" %}
{% block content %}
<div x-data="arenaApp()">
  <h1 class="page-title">Arena</h1>
  <p class="page-lead">Ask two models the same thing and compare the answers and their speed.
    Model A is the main server; model B runs beside it, so both are in memory at once.</p>

  <div class="arena-pickers">
    <template x-for="side in ['A', 'B']" :key="side">
      <div class="card arena-pick">
        <div class="arena-pick-head">
          <span class="arena-side" x-text="side"></span>
          <span class="arena-state" :class="'arena-' + stateOf(side)" x-text="statusText(side)"></span>
        </div>
        <label class="arena-label" :for="'arena-' + side">Model</label>
        <select :id="'arena-' + side" class="arena-select"
                @change="side === 'A' ? (modelA = $event.target.value) : (modelB = $event.target.value)">
          <template x-for="m in choices" :key="side + m.value">
            <option :value="m.value" x-text="m.label" :selected="m.value === (side === 'A' ? modelA : modelB)"></option>
          </template>
        </select>
        <template x-if="side === 'B' && adapterB">
          <div class="arena-adapter">
            <span>with adapter <code x-text="shortName(adapterB)" :title="adapterB"></code></span>
            <button type="button" class="link-btn" @click="adapterB = ''">remove</button>
          </div>
        </template>
        <button class="btn btn-ghost arena-load" @click="side === 'A' ? loadA($event) : loadB($event)"
                x-text="'Load ' + side"></button>
      </div>
    </template>
  </div>

  <div class="card arena-ask">
    <label class="arena-label" for="arena-prompt">Prompt</label>
    <textarea id="arena-prompt" x-model="prompt" rows="3" placeholder="Ask both models the same thing…"
              @keydown.meta.enter="run()" @keydown.ctrl.enter="run()"></textarea>
    <div class="arena-run">
      <label class="arena-max">Max tokens <input type="number" min="16" max="2048" x-model.number="maxTokens"></label>
      <button class="btn" @click="run()" :disabled="running || !prompt.trim()" x-text="running ? 'Running…' : 'Compare'"></button>
    </div>
  </div>

  <div class="arena-results">
    <template x-for="side in ['A', 'B']" :key="'r' + side">
      <div class="card arena-pane">
        <div class="arena-head">
          <span class="arena-side" x-text="side"></span>
          <span class="arena-name" x-text="paneTitle(side)"></span>
          <span class="pill pill-ok" x-show="out(side).tok_per_sec" x-text="out(side).tok_per_sec + ' tok/s'"></span>
        </div>
        <template x-if="!out(side).content && !out(side).reasoning && !out(side).error">
          <div class="arena-empty" x-text="running ? 'Waiting for the answer…' : 'The answer appears here.'"></div>
        </template>
        <div class="arena-body msg-md" x-html="renderMd(out(side).content || out(side).reasoning)"></div>
        <div class="arena-foot" x-show="out(side).elapsed_sec" x-text="out(side).tokens + ' tokens in ' + out(side).elapsed_sec + ' s'"></div>
        <div class="flash flash-err" x-show="out(side).error" x-text="out(side).error"></div>
      </div>
    </template>
  </div>
</div>

<style>
.arena-pickers, .arena-results { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* A grid item will not shrink below its content unless told to: `min-width`
   defaults to `auto`, so one long model name or an unbroken line of model
   output pushed the whole page sideways (measured: 364px of horizontal
   scroll). This is the fix for every 1fr-column layout, not just this one. */
.arena-pickers > *, .arena-results > * { min-width: 0; }
.arena-pick { display:flex; flex-direction:column; gap:8px; margin:0; }
.arena-pick-head, .arena-head { display:flex; align-items:center; gap:10px; min-width:0; }
.arena-side { display:inline-grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--ink); color:var(--paper-2); font-family:var(--mono); font-size:12px; }
.arena-state { margin-left:auto; font-size:12px; color:var(--mute); }
.arena-ready { color:var(--accent); font-weight:600; }
.arena-loading { color:#0e5b8a; }
.arena-error { color:var(--err); }
.arena-label { font-size:12.5px; color:var(--mute); }
/* A <select> sizes itself to its widest <option>; capped so a long name never
   sets the column width. */
.arena-select, .arena-ask textarea { width:100%; max-width:100%; font:inherit; font-size:14px; padding:8px 10px;
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper-2); color:var(--ink); }
.arena-select:focus, .arena-ask textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
.arena-load { align-self:flex-start; }
.arena-adapter { display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2); min-width:0; }
.arena-adapter code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.arena-ask { margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.arena-run { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.arena-max { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-2); }
.arena-max input { width:90px; font:inherit; padding:6px 8px; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--paper-2); }
.arena-pane { min-height:180px; display:flex; flex-direction:column; gap:10px; min-width:0; margin:0; }
.arena-name { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.arena-empty { color:var(--mute); font-size:13px; }
/* Model output is arbitrary text: a long code line scrolls inside the pane
   rather than taking the page with it. */
.arena-body { font-size:14.5px; line-height:1.55; min-width:0; overflow-x:auto; overflow-wrap:anywhere; }
.arena-body pre { overflow-x:auto; max-width:100%; }
.arena-foot { font-family:var(--mono); font-size:11.5px; color:var(--mute); margin-top:auto; }
@media (max-width: 700px) { .arena-pickers, .arena-results { grid-template-columns: 1fr; } }
</style>

<script>
function arenaApp() {
  return {
    choices: [], modelA: '', modelB: '', adapterB: '', prompt: '', maxTokens: 256,
    running: false, statusA: '', statusB: '', a: {}, b: {},
    async init() {
      const ch = [];
      try {
        const r = await fetch('/api/server/published', {credentials:'same-origin'});
        const d = await r.json();
        (d.quants || []).forEach(q => ch.push({value:q.repo_id, label:q.repo_id.split('/').pop() + ' · download'}));
      } catch(e) {}
      try {
        const r = await fetch('/api/hub/local', {credentials:'same-origin'});
        const d = await r.json();
        (d.models || []).forEach(m => ch.unshift({value:m.path, label:optiqModelName(m.path) + ' · on this Mac'}));
      } catch(e) {}
      this.choices = ch;
      if (ch.length) { this.modelA = ch[0].value; this.modelB = ch[Math.min(1,ch.length-1)].value; }
      // Start A on what the main server already serves, so the page does not
      // label its answers with a model that was never loaded.
      try {
        const s = await (await fetch('/api/status', {credentials:'same-origin'})).json();
        if (s.model) {
          if (!ch.some(c => c.value === s.model)) this.choices = [{value:s.model, label:optiqModelName(s.model) + ' · loaded'}, ...ch];
          this.modelA = s.model;
          this.statusA = s.api_status === 'ready' ? 'ready' : (s.api_status || '');
        }
      } catch(e) {}
      // Opened from a finished job: ?a=<model>&b=<model>&b_adapter=<dir>.
      const q = new URLSearchParams(location.search);
      for (const [key, field] of [['a', 'modelA'], ['b', 'modelB']]) {
        const v = q.get(key);
        if (!v) continue;
        if (!this.choices.some(c => c.value === v)) this.choices = [{value: v, label: optiqModelName(v)}, ...this.choices];
        this[field] = v;
      }
      if (q.get('b_adapter')) this.adapterB = q.get('b_adapter');
      if (q.get('a') || q.get('b')) {
        this.statusA = this.statusA || 'click Load A';
        this.statusB = 'click Load B to load it' + (this.adapterB ? ' with the adapter' : '');
      }
    },
    shortName(m){ return optiqModelName(m); },
    out(side){ return side === 'A' ? this.a : this.b; },
    paneTitle(side){
      const m = side === 'A' ? this.modelA : this.modelB;
      return (this.shortName(m) || 'Model ' + side) + (side === 'B' && this.adapterB ? ' + ' + this.shortName(this.adapterB) : '');
    },
    stateOf(side){
      const s = side === 'A' ? this.statusA : this.statusB;
      if (s === 'ready') return 'ready';
      if (/^error/.test(s)) return 'error';
      if (/loading|starting/.test(s)) return 'loading';
      return 'idle';
    },
    statusText(side){
      const s = side === 'A' ? this.statusA : this.statusB;
      return s === 'ready' ? 'loaded' : (s || 'not loaded');
    },
    // Sanitized before x-html: model output is untrusted text.
    renderMd(t){ return (typeof optiqRenderMarkdown === 'function') ? optiqRenderMarkdown(t) : String(t||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); },
    async loadA(ev){ await this._load('/api/server/apply', {model:this.modelA}, ev, s=>this.statusA=s,
      async()=>{ const s=await (await fetch('/api/status',{credentials:'same-origin'})).json();
                 return {status:s.api_status, error:s.api_last_error}; }); },
    async loadB(ev){ await this._load('/api/arena/load_b', {model:this.modelB, adapter:this.adapterB || undefined}, ev, s=>this.statusB=s,
      async()=>await (await fetch('/api/arena/b_status',{credentials:'same-origin'})).json()); },
    // The load request returns once the server process starts; the model is
    // still loading then, so poll until the server says ready or failed.
    async _load(url, body, ev, setStatus, poll){
      const btn=ev.target, orig=btn.textContent; btn.textContent='Loading…'; btn.disabled=true; setStatus('loading…');
      try { const r=await fetch(url,{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
        const d=await r.json();
        if(!d.ok){ setStatus('error: '+(d.error||'failed')); }
        else {
          for(let i=0;i<1200;i++){
            let s={}; try { s=await poll(); } catch(e) {}
            if(s.status==='ready'){ setStatus('ready'); break; }
            if(s.status==='error'||s.status==='crashed'){ setStatus('error: '+(s.error||s.status)); break; }
            if(s.status==='idle'&&i>=5){ setStatus('error: the server stopped before the model loaded'); break; }
            await new Promise(res=>setTimeout(res,1000));
          }
        } }
      catch(e){ setStatus('error: '+e); }
      btn.textContent=orig; btn.disabled=false;
    },
    async run(){
      if(!this.prompt.trim()) return;
      this.running=true; this.a={}; this.b={};
      try {
        const r=await fetch('/api/arena/run',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json'},
          body:JSON.stringify({model_a:this.modelA, model_b:this.modelB, max_tokens:this.maxTokens,
            messages:[{role:'user',content:this.prompt}]})});
        const d=await r.json();
        if(d.ok){ this.a=d.a||{}; this.b=d.b||{}; }
        else { this.a={error:d.error||'failed'}; }
      } catch(e){ this.a={error:String(e)}; }
      this.running=false;
    }
  };
}
</script>
{% endblock %}