{% extends "base.html" %}
{% block title %}opencode-perf-stats — Compare{% endblock %}
{% block content %}

<h1>Comparison</h1>

<!-- Type selector tabs -->
<div class="compare-tabs">
    <button class="tab-btn {{ 'active' if picker_ctype == 'sessions' else '' }}" data-type="sessions" type="button">Sessions</button>
    <button class="tab-btn {{ 'active' if picker_ctype == 'models' else '' }}" data-type="models" type="button">Models</button>
</div>

<!-- Sessions comparison panel -->
<div class="compare-panel" id="panel-sessions" style="{{ '' if picker_ctype == 'sessions' else 'display:none;' }}">
    <div class="panel-header">
        <h3>Select 2–4 sessions to compare</h3>
        <form class="form-row panel-filters" method="get" action="{{ url_for('compare_landing') }}">
            <div class="form-field">
                <label for="ps-days">Days back</label>
                <input type="number" id="ps-days" name="days" min="0" value="{{ picker_session_filters.days if picker_session_filters.days is not none else '' }}" placeholder="all">
            </div>
            <div class="form-field">
                <label for="ps-model">Model (substring)</label>
                <input type="text" id="ps-model" name="model" list="ps-model-list"
                       value="{{ picker_session_filters.model or '' }}" placeholder="e.g. xiaomi/mimo-v2.5-pro"
                       autocomplete="off">
                <datalist id="ps-model-list">
                    {% for m in picker_filter_models %}
                    <option value="{{ m.identity }}">{{ m.identity }} ({{ m.count }})</option>
                    {% endfor %}
                </datalist>
            </div>
            <button type="submit" class="btn btn-primary">Filter</button>
            <a href="{{ url_for('compare_landing') }}" class="btn">Reset</a>
        </form>
    </div>
    {% if picker_sessions %}
    <div class="session-selector" id="session-list">
        {% for s in picker_sessions %}
        <label class="session-item{{ ' selected' if s.id in active_ids else '' }}">
            <input type="checkbox" class="cmp-check" data-basket="sessions" value="{{ s.id }}" {{ 'checked' if s.id in active_ids else '' }}>
            <div class="session-info">
                <div class="session-title"><a href="{{ url_for('session_report', session_id=s.id) }}">{{ s.title[:50] }}</a></div>
                <div class="session-meta">
                    <span class="mono">{{ s.model_identity }}</span>
                    <span>{{ "{:,}".format(s.tokens_output) }} tokens</span>
                    <span>${{ "%.2f"|format(s.cost) }}</span>
                    <span>{{ s.updated[5:22] if s.updated != '—' else '—' }}</span>
                </div>
            </div>
        </label>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty" id="session-list">No sessions match the given filters.</div>
    {% endif %}
    <div class="selection-bar" id="session-bar" style="display:none;">
        <span><strong id="session-count">0</strong> of 4 selected</span>
        <a class="btn btn-primary" id="compare-sessions-btn" href="#" data-base="{{ url_for('compare_sessions') }}">Compare Sessions</a>
    </div>
</div>

<!-- Models comparison panel -->
<div class="compare-panel" id="panel-models" style="{{ '' if picker_ctype == 'models' else 'display:none;' }}">
    <div class="panel-header">
        <h3>Select 2+ models to compare</h3>
    </div>
    {% if picker_models %}
    <div class="model-selector" id="model-list">
        {% for m in picker_models %}
        <label class="model-item{{ ' selected' if m.identity in active_names else '' }}">
            <input type="checkbox" class="cmp-check" data-basket="models" value="{{ m.identity }}" {{ 'checked' if m.identity in active_names else '' }}>
            <div class="model-info">
                <span class="mono">{{ m.identity }}</span>
                <span class="model-count">{{ m.count }} session{{ '' if m.count == 1 else 's' }}</span>
            </div>
        </label>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty" id="model-list">No models found.</div>
    {% endif %}
    <div class="selection-bar" id="model-bar" style="display:none;">
        <span><strong id="model-count">0</strong> selected</span>
        <a class="btn btn-primary" id="compare-models-btn" href="#" data-base="{{ url_for('compare_models') }}">Compare Models</a>
    </div>
</div>

{% if data %}

{% set items = data['items'] %}
<div class="compare-results">
<p class="subtitle">{{ data.count }} item(s) compared</p>

<div class="chart-container">
    <h2>TPS Mean</h2>
    <canvas id="tpsChart"></canvas>
</div>

<div class="chart-container">
    <h2>TTFT Mean (ms)</h2>
    <canvas id="ttftChart"></canvas>
</div>

<div style="display:grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
    <div class="chart-container">
        <h2>Total Tokens</h2>
        <canvas id="tokensChart"></canvas>
    </div>
    <div class="chart-container">
        <h2>Cost</h2>
        <canvas id="costChart"></canvas>
    </div>
</div>

<div class="chart-container">
    <h2>Side-by-side Comparison</h2>
    <table>
        <thead>
            <tr>
                <th>Metric</th>
                {% for it in items %}<th>{{ it.label }}</th>{% endfor %}
            </tr>
        </thead>
        <tbody>
        {% set keys = [('tps_mean','TPS Mean'),('tps_median','TPS Median'),('ttft_mean','TTFT Mean'),('ttft_median','TTFT Median'),('tokens_input','Input Tokens'),('tokens_output','Output Tokens'),('tokens_reasoning','Reasoning Tokens'),('tokens_total','Total Tokens'),('cost','Cost'),('message_count','Messages'),('duration_seconds','Duration'),('finish_stop','Final (stop)'),('finish_tool_calls','Tool calls')] %}
        {% for mkey, mlabel in keys %}
            <tr>
                <td>{{ mlabel }}</td>
                {% for it in items %}
                    <td class="mono">{{ _fmt(it.metrics, mkey) }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
        {% if data.type == 'sessions' %}
            <tr><td>Model</td>{% for it in items %}<td class="mono">{{ it.model }}</td>{% endfor %}</tr>
        {% elif data.type == 'models' %}
            <tr><td>Sessions</td>{% for it in items %}<td class="mono">{{ it.session_count }}</td>{% endfor %}</tr>
        {% endif %}
        </tbody>
    </table>
</div>
</div>

{% endif %}

{% endblock %}

{% block scripts %}
{% if data %}
<script>
const CMP = {{ data | tojson }};
(function () {
    const COLORS=["#4dc9f6","#f67019","#f53794","#537bc4","#acc236"];
    Chart.defaults.color='#8892a0'; Chart.defaults.borderColor='#2a3a5c';
    const labels = CMP.items.map(i=>i.label);
    const colors = CMP.items.map((_,i)=>COLORS[i%COLORS.length]);
    function bar(id,label,data,ylabel){ new Chart(document.getElementById(id),{type:'bar',data:{labels,datasets:[{label,data,backgroundColor:colors,borderRadius:4}]},options:{responsive:true,plugins:{legend:{display:false}},scales:{y:{beginAtZero:true,title:{display:true,text:ylabel}}}}}); }
    bar('tpsChart','TPS',CMP.items.map(i=>i.metrics.tps_mean||0),'Tokens/sec');
    bar('ttftChart','TTFT',CMP.items.map(i=>i.metrics.ttft_mean||0),'Milliseconds');
    bar('tokensChart','Tokens',CMP.items.map(i=>i.metrics.tokens_total),'Tokens');
    new Chart(document.getElementById('costChart'),{
        type:'bar',
        data:{
            labels,
            datasets:[
                {label:'Total Cost',data:CMP.items.map(i=>i.metrics.cost||0),backgroundColor:'#4dc9f6',borderRadius:4},
                {label:'Cost per 1M Tokens',data:CMP.items.map(i=>{const c=i.metrics.cost||0,t=i.metrics.tokens_total||0;return t?c/t*1e6:0;}),backgroundColor:'#f67019',borderRadius:4},
            ]
        },
        options:{responsive:true,plugins:{legend:{position:'top'}},scales:{y:{beginAtZero:true,title:{display:true,text:'USD'}}}}
    });
})();
</script>
{% endif %}
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}