{% extends "base.html" %}
{% block title %}asiai — Leaderboard{% endblock %}
{% block vendors %}{% endblock %}

{% block head %}
<style>
/* "This machine vs community" panel (lbc-*) — page-local component. */
#lb-compare { padding: 0; overflow: hidden; }
.lbc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.lbc-title { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.lbc-sub {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--fl-text-dim); margin-top: 3px;
}
.lbc-badge {
    margin-left: auto; flex: none;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-secondary); background: var(--bg-elevated);
    border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px;
}
.lbc-cols, .lbc-row {
    display: grid; grid-template-columns: 1fr 130px 130px 110px;
    gap: 10px; padding: 9px 20px; align-items: baseline;
}
.lbc-cols {
    font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--fl-text-faint); font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.lbc-cols > span:not(:first-child), .lbc-row > span:not(:first-child) { text-align: right; }
.lbc-row { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.lbc-row:last-of-type { border-bottom: none; }
.lbc-row:hover { background: rgba(255, 255, 255, 0.015); }
[data-theme="light"] .lbc-row:hover { background: rgba(0, 0, 0, 0.015); }
.lbc-engine {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
    color: var(--fl-text-strong);
}
.lbc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.lbc-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.lbc-num.is-dim { color: var(--text-secondary); font-weight: 400; }
.lbc-n { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--fl-text-faint); }
.lbc-delta { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.lbc-delta.is-up { color: var(--green); }
/* Design red is one shade lighter than the theme's --red on dark surfaces. */
.lbc-delta.is-down { color: #f87171; }
[data-theme="light"] .lbc-delta.is-down { color: var(--red); }
.lbc-delta.is-approx { color: var(--text-secondary); }
.lbc-first {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    color: var(--accent-text);
}
.lbc-foot {
    padding: 11px 20px; font-size: 10px; color: var(--fl-text-faint);
    line-height: 1.5; border-top: 1px solid var(--border);
}
/* Growth-loop band (compact, ~172px): body of the panel when local groups
   exist but none has a community counterpart yet. */
.lbc-share {
    display: grid; grid-template-columns: 1fr 400px; gap: 28px;
    padding: 16px 20px 18px; align-items: center;
}
.lbc-share-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.lbc-share-text {
    margin: 6px 0 0; font-size: 11.5px; line-height: 1.65;
    color: var(--fl-text-dim); max-width: 56ch; text-wrap: pretty;
}
.lbc-share-cmd {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 9px; padding: 10px 14px;
    font-family: var(--font-mono); font-size: 12.5px;
}
.lbc-share-prompt { color: var(--fl-text-faint); user-select: none; }
.lbc-share-cmdtext { color: var(--fl-text-strong); font-weight: 500; }
.lbc-share-flag { color: #22d3ee; }
[data-theme="light"] .lbc-share-flag { color: var(--accent-text); }
.lbc-copy {
    margin-left: auto; width: 26px; height: 26px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--border-hover); border-radius: 6px;
    padding: 0; cursor: pointer; color: var(--fl-text-dim);
}
.lbc-copy:hover { border-color: var(--border-active); background: var(--bg-surface); }
.lbc-copy:active { transform: scale(0.94); }
.lbc-copy.copied { color: var(--accent-text); border-color: var(--accent-text); }
.lbc-share-note {
    margin-top: 8px; font-size: 10px; line-height: 1.55;
    color: var(--fl-text-faint);
}
.lbc-empty {
    padding: 26px 24px; display: flex; flex-direction: column;
    align-items: center; gap: 8px; text-align: center;
}
.lbc-empty-mark {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px dashed var(--border-active);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 15px; color: var(--fl-text-faint);
}
.lbc-empty-title { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.lbc-empty-text { font-size: 11px; color: var(--fl-text-dim); line-height: 1.6; max-width: 380px; }
@media (max-width: 700px) {
    .lbc-cols, .lbc-row { grid-template-columns: 1fr 84px 84px 90px; padding-left: 14px; padding-right: 14px; }
    .lbc-share { grid-template-columns: 1fr; gap: 14px; }
}
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h2>Community Leaderboard</h2>
    <p>Median throughput per engine × model, from community submissions on api.asiai.dev</p>
</div>

<div class="filter-bar fade-in" style="margin-bottom: var(--space-3);">
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;">Chip:</span>
    <button class="filter-chip active" id="lb-chip-all" data-chip="">All chips</button>
    {% if local_chip %}
    {# data-chip + listener: chip names contain spaces/quotes, so they must
       stay out of inline JS — autoescape handles the attribute safely. #}
    <button class="filter-chip" id="lb-chip-local" data-chip="{{ local_chip }}">This machine ({{ local_chip }})</button>
    {% endif %}
    <span class="text-xs text-neutral-500 filter-label" style="margin-left: 1rem; margin-right: 0.5rem;">Model:</span>
    <input type="text" id="lb-model" class="range-input" placeholder="filter by model…" style="min-width: 200px;">
    <span class="text-xs text-neutral-500 filter-label" style="margin-left: 1rem; margin-right: 0.5rem;">Window:</span>
    <span id="lb-days-chips" style="display: inline-flex; gap: var(--space-2);">
        <button class="filter-chip" data-days="30">30d</button>
        <button class="filter-chip active" data-days="90">90d</button>
        <button class="filter-chip" data-days="365">365d</button>
    </span>
</div>

<div class="filter-bar fade-in">
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;">Engine:</span>
    {# Chips are injected from the fetched entries (DOM API + textContent only). #}
    <span id="lb-engine-chips" style="display: inline-flex; gap: var(--space-2); flex-wrap: wrap;"></span>
    <span id="lb-count" class="text-xs text-neutral-500" style="margin-left: auto;"></span>
</div>

{# "This machine vs community" — shown only while the local-chip filter
   is active; data from /api/v1/leaderboard/compare (ADR 0002). #}
<div class="card fade-in" id="lb-compare" style="display: none; margin-top: var(--space-3);">
    <div class="lbc-head">
        <div>
            <div class="lbc-title">This machine vs community</div>
            <div class="lbc-sub" id="lbc-sub">&nbsp;</div>
        </div>
        <span class="lbc-badge" id="lbc-badge" style="display: none;"></span>
    </div>
    {# Growth-loop band: static markup (no API data), toggled + filled via
       textContent by renderCompare when no group has a community match. #}
    <div class="lbc-share" id="lbc-share" style="display: none;">
        <div>
            <div class="lbc-share-title">No community counterpart &mdash; you'd be the first.</div>
            <p class="lbc-share-text" id="lbc-share-text"></p>
        </div>
        <div>
            <div class="lbc-share-cmd">
                <span class="lbc-share-prompt">$</span>
                <span class="lbc-share-cmdtext">asiai bench <span class="lbc-share-flag">--share</span></span>
                <button class="lbc-copy" id="lbc-copy" type="button" aria-label="Copy command"
                        title="Copy: asiai bench --share">
                    <svg width="12" height="12" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="4.5" y="4.5" width="9" height="9" rx="2" stroke="currentColor" stroke-width="1.3"></rect><path d="M11.5 4.5v-1a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1" stroke="currentColor" stroke-width="1.3"></path></svg>
                </button>
            </div>
            <div class="lbc-share-note">Anonymous &mdash; submits chip, RAM, engine version and medians only.
                No prompts, no paths, no hostname.</div>
        </div>
    </div>
    <div id="lbc-body"></div>
    <div class="lbc-foot" id="lbc-foot" style="display: none;">Community medians: anonymized submissions,
        same model + quant + engine on this chip &mdash; all submitted conditions pooled.
        tok/s = generation only.</div>
</div>

<div class="mt-6 fade-in-delay-1">
    <div class="card">
        <div class="overflow-x-auto">
            <table class="results-table" id="lb-table">
                <thead>
                    <tr>
                        <th class="text-left sortable" data-key="engine">Engine</th>
                        <th class="text-left sortable" data-key="model">Model</th>
                        <th class="text-left sortable" data-key="chip">Chip</th>
                        <th class="text-left sortable" data-key="quantizations">Quant</th>
                        <th class="text-right sortable sort-desc" data-key="median_tok_s">tok/s (median)</th>
                        <th class="text-right sortable" data-key="median_ttft_ms">TTFT (median)</th>
                        <th class="text-right sortable" data-key="median_power_watts">W</th>
                        <th class="text-right sortable" data-key="median_tok_s_per_watt">tok/s/W</th>
                        <th class="text-right sortable" data-key="samples">Samples</th>
                        <th class="text-left sortable" data-key="last_submitted_at">Last seen</th>
                    </tr>
                </thead>
                <tbody id="lb-tbody"></tbody>
            </table>
        </div>
        <div id="lb-empty" class="text-neutral-400 text-sm" style="display: none; padding: 1.5rem 0;">
            No community data — the leaderboard API may be unreachable, or no submissions match this filter.
            Submit yours with <code>asiai bench --submit</code>.
        </div>
        <div id="lb-loading" class="text-neutral-400 text-sm" style="padding: 1.5rem 0;">Loading…</div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var chipFilter = '';
    var engineFilter = '';
    var daysFilter = 90;
    var modelTimer = null;
    var allEntries = [];
    var sortKey = 'median_tok_s';
    var sortDir = 'desc';
    var NUMERIC_KEYS = {
        median_tok_s: true,
        median_ttft_ms: true,
        median_power_watts: true,
        median_tok_s_per_watt: true,
        samples: true,
        last_submitted_at: true
    };
    var COLUMN_COUNT = document.querySelectorAll('#lb-table thead th').length;
    var DAY_MS = 86400000;
    // Detail expand state: one open row at a time, stale fetches dropped.
    var openDetail = null;
    var detailSeq = 0;

    // Scope to [data-chip] so the dynamically-injected engine chips keep
    // their own active state, independent of the chip-filter row.
    document.querySelectorAll('.filter-bar .filter-chip[data-chip]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            chipFilter = btn.getAttribute('data-chip') || '';
            document.querySelectorAll('.filter-bar .filter-chip[data-chip]').forEach(function (c) {
                c.classList.remove('active');
            });
            btn.classList.add('active');
            loadLeaderboard();
        });
    });

    document.getElementById('lb-model').addEventListener('input', function () {
        clearTimeout(modelTimer);
        modelTimer = setTimeout(loadLeaderboard, 350);
    });

    document.querySelectorAll('#lb-days-chips .filter-chip').forEach(function (btn) {
        btn.addEventListener('click', function () {
            daysFilter = parseInt(btn.getAttribute('data-days'), 10) || 90;
            document.querySelectorAll('#lb-days-chips .filter-chip').forEach(function (c) {
                c.classList.remove('active');
            });
            btn.classList.add('active');
            loadLeaderboard();
        });
    });

    document.querySelectorAll('#lb-table th.sortable').forEach(function (th) {
        th.addEventListener('click', function () {
            var key = th.getAttribute('data-key');
            if (sortKey === key) {
                sortDir = sortDir === 'asc' ? 'desc' : 'asc';
            } else {
                sortKey = key;
                // Numeric columns start with the best value on top.
                sortDir = NUMERIC_KEYS[key] ? 'desc' : 'asc';
            }
            document.querySelectorAll('#lb-table th.sortable').forEach(function (t) {
                t.classList.remove('sort-asc', 'sort-desc');
            });
            th.classList.add(sortDir === 'asc' ? 'sort-asc' : 'sort-desc');
            applyView();
        });
    });

    /* ══ "This machine vs community" panel (ADR 0002) ══ */
    var localChipBtn = document.getElementById('lb-chip-local');
    var localChip = localChipBtn ? (localChipBtn.getAttribute('data-chip') || '') : '';
    var compareSeq = 0;

    var lbcCopy = document.getElementById('lbc-copy');
    if (lbcCopy) {
        lbcCopy.addEventListener('click', function () {
            function copied() {
                lbcCopy.classList.add('copied');
                setTimeout(function () { lbcCopy.classList.remove('copied'); }, 1200);
            }
            /* Clipboard API requires a secure context; the dashboard is
               served over plain HTTP on the mesh/LAN — same fallback as
               bench.js. */
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText('asiai bench --share').then(copied)
                    .catch(function () { /* permissions policy / lost user gesture */ });
            } else {
                var ta = document.createElement('textarea');
                ta.value = 'asiai bench --share';
                ta.setAttribute('readonly', '');
                ta.style.position = 'fixed';
                ta.style.opacity = '0';
                document.body.appendChild(ta);
                ta.select();
                try { if (document.execCommand('copy')) copied(); } catch (e) { /* no-op */ }
                document.body.removeChild(ta);
            }
        });
    }

    function compareCell(text, cls) {
        var s = document.createElement('span');
        if (cls) s.className = cls;
        s.textContent = text;
        return s;
    }

    function renderCompare(data) {
        var body = document.getElementById('lbc-body');
        var sub = document.getElementById('lbc-sub');
        var badge = document.getElementById('lbc-badge');
        var share = document.getElementById('lbc-share');
        var foot = document.getElementById('lbc-foot');
        body.textContent = '';
        badge.style.display = 'none';
        share.style.display = 'none';
        foot.style.display = 'none';
        var meta = (data && data.meta) || {};
        var rows = (data && Array.isArray(data.rows)) ? data.rows : [];
        var chip = meta.chip || localChip;
        var windowDays = meta.window_days || daysFilter;
        /* The compared model is server-picked when the filter is empty —
           without naming it here the panel is unreadable. */
        sub.textContent = (meta.model ? meta.model + ' · ' : '') + chip +
            ' · median tok/s · ' + windowDays + 'd window';

        if (!data) {
            /* Fetch failed (network, rate limit) — not the same thing as
               "no local benchmarks": say so instead of lying. */
            var fail = document.createElement('div');
            fail.className = 'lbc-empty';
            fail.appendChild(compareCell('!', 'lbc-empty-mark'));
            fail.appendChild(compareCell('Comparison unavailable', 'lbc-empty-title'));
            fail.appendChild(compareCell(
                'The compare request failed (server busy or unreachable). The table below is unaffected — retry in a moment.',
                'lbc-empty-text'));
            body.appendChild(fail);
            return;
        }

        if (!rows.length) {
            var filtered = meta.reason === 'no_local_match';
            var empty = document.createElement('div');
            empty.className = 'lbc-empty';
            empty.appendChild(compareCell('∅', 'lbc-empty-mark'));
            empty.appendChild(compareCell(
                filtered ? 'No local benchmarks match this filter'
                         : 'No local benchmarks in this window',
                'lbc-empty-title'));
            empty.appendChild(compareCell(
                filtered ? 'This machine has local runs in the window, but none whose model name contains the filter text.'
                         : 'Run a bench on this machine (Benchmark page or `asiai bench`) to seed the comparison.',
                'lbc-empty-text'));
            body.appendChild(empty);
            return;
        }

        var n = rows.length;
        if (!meta.community_matched) {
            /* Growth loop: local groups exist, zero community counterpart.
               Static band (template markup), only the numbers are injected. */
            badge.textContent = n + (n === 1 ? ' local group' : ' local groups');
            badge.style.display = '';
            document.getElementById('lbc-share-text').textContent =
                "None of this machine's " + n + ' local run group' + (n === 1 ? '' : 's') +
                ' matches a shared submission — chip, model, quant and engine are compared strictly, over the ' +
                windowDays + '-day window. Sharing seeds ' + n + ' new group' + (n === 1 ? '' : 's') +
                ' other ' + chip + ' owners can compare against.';
            share.style.display = '';
            return;
        }

        var matched = rows.filter(function (r) {
            return typeof r.community_median_tok_s === 'number';
        }).length;
        badge.textContent = matched + ' of ' + n + (n === 1 ? ' group' : ' groups') + ' matched';
        badge.style.display = '';
        foot.style.display = '';

        var cols = document.createElement('div');
        cols.className = 'lbc-cols';
        cols.appendChild(compareCell('Engine'));
        cols.appendChild(compareCell('Local'));
        cols.appendChild(compareCell('Community'));
        cols.appendChild(compareCell('Δ'));
        body.appendChild(cols);

        rows.forEach(function (r) {
            var row = document.createElement('div');
            row.className = 'lbc-row';

            var eng = document.createElement('span');
            eng.className = 'lbc-engine';
            var dot = document.createElement('span');
            dot.className = 'lbc-dot';
            eng.appendChild(dot);
            eng.appendChild(compareCell(String(r.engine || '?')));
            row.appendChild(eng);

            var local = document.createElement('span');
            local.appendChild(compareCell(
                typeof r.local_median_tok_s === 'number' ? r.local_median_tok_s.toFixed(1) : '—',
                'lbc-num'));
            local.appendChild(compareCell('n=' + (r.local_n || 0), 'lbc-n'));
            row.appendChild(local);

            var comm = document.createElement('span');
            var hasCommunity = typeof r.community_median_tok_s === 'number';
            if (hasCommunity) {
                comm.appendChild(compareCell(r.community_median_tok_s.toFixed(1), 'lbc-num is-dim'));
                comm.appendChild(compareCell('n=' + (r.community_n || 0), 'lbc-n'));
            } else {
                comm.appendChild(compareCell('—', 'lbc-num is-dim'));
                comm.appendChild(compareCell('n=0', 'lbc-n'));
            }
            row.appendChild(comm);

            if (hasCommunity && typeof r.delta_pct === 'number') {
                var d = r.delta_pct;
                var mag = Math.abs(d).toFixed(1) + '%';
                if (Math.abs(d) < 2) {
                    /* |Δ| < 2% is measurement noise — neutral "≈", never a
                       win/loss (±0.0 exactly included). */
                    row.appendChild(compareCell(
                        '≈ ' + (d > 0 ? '+' : d < 0 ? '−' : '±') + mag,
                        'lbc-delta is-approx'));
                } else if (d > 0) {
                    row.appendChild(compareCell('↑ +' + mag, 'lbc-delta is-up'));
                } else {
                    row.appendChild(compareCell('↓ −' + mag, 'lbc-delta is-down'));
                }
            } else {
                /* No community group for this engine yet: keep the loop
                   visible in place of the delta. Not a link — no page to
                   navigate to; the tooltip carries the command. */
                var first = compareCell('be the first ↗', 'lbc-first');
                first.title = 'asiai bench --share';
                row.appendChild(first);
            }
            body.appendChild(row);
        });
    }

    function loadCompare() {
        var panel = document.getElementById('lb-compare');
        if (!panel) return;
        if (!localChip || chipFilter !== localChip) {
            panel.style.display = 'none';
            compareSeq++; /* invalidate any in-flight fetch */
            return;
        }
        panel.style.display = '';
        var seq = ++compareSeq;
        var params = ['days=' + daysFilter];
        var model = document.getElementById('lb-model').value.trim();
        if (model) params.push('model=' + encodeURIComponent(model.slice(0, 128)));
        fetch('/api/v1/leaderboard/compare?' + params.join('&'))
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (seq !== compareSeq) return; /* a newer fetch superseded this one */
                renderCompare(data);
            })
            .catch(function () {
                if (seq !== compareSeq) return;
                renderCompare(null);
            });
    }

    function loadLeaderboard() {
        loadCompare();
        var params = [];
        if (chipFilter) params.push('chip=' + encodeURIComponent(chipFilter));
        var model = document.getElementById('lb-model').value.trim();
        if (model) params.push('model=' + encodeURIComponent(model.slice(0, 128)));
        params.push('days=' + daysFilter);
        var url = '/api/v1/leaderboard' + (params.length ? '?' + params.join('&') : '');

        document.getElementById('lb-loading').style.display = '';
        document.getElementById('lb-empty').style.display = 'none';
        fetch(url)
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                allEntries = data && Array.isArray(data.entries) ? data.entries : [];
                rebuildEngineChips();
                applyView();
            })
            .catch(function () {
                allEntries = [];
                rebuildEngineChips();
                applyView();
            });
    }

    function rebuildEngineChips() {
        var wrap = document.getElementById('lb-engine-chips');
        wrap.textContent = '';
        var engines = [];
        allEntries.forEach(function (e) {
            var name = typeof e.engine === 'string' ? e.engine : '';
            if (name && engines.indexOf(name) === -1) engines.push(name);
        });
        engines.sort();
        // A previously selected engine may vanish after a server-side
        // chip/model refetch — fall back to "all" rather than a dead filter.
        if (engineFilter && engines.indexOf(engineFilter) === -1) engineFilter = '';
        [''].concat(engines).forEach(function (name) {
            var btn = document.createElement('button');
            btn.className = 'filter-chip' + (name === engineFilter ? ' active' : '');
            // Engine names are community data: textContent only, no markup.
            btn.textContent = name || 'All engines';
            btn.addEventListener('click', function () {
                engineFilter = name;
                wrap.querySelectorAll('.filter-chip').forEach(function (c) {
                    c.classList.remove('active');
                });
                btn.classList.add('active');
                applyView();
            });
            wrap.appendChild(btn);
        });
    }

    function sortValue(e, key) {
        if (key === 'chip') {
            var chip = e.hw_chip || e.chip;
            return chip ? String(chip).toLowerCase() : null;
        }
        if (key === 'samples') {
            var s = typeof e.samples === 'number' ? e.samples : e.submissions;
            return typeof s === 'number' ? s : null;
        }
        if (key === 'quantizations') {
            var q = quantLabel(e);
            return q === '—' ? null : q.toLowerCase();
        }
        if (key === 'last_submitted_at') {
            var t = parseIsoMs(e.last_submitted_at);
            return t === null ? null : t;
        }
        var v = e[key];
        if (NUMERIC_KEYS[key]) return typeof v === 'number' ? v : null;
        return v ? String(v).toLowerCase() : null;
    }

    // v2 aggregates are additive and OMITTED when no data contributed —
    // every formatter below tolerates the absent field and renders "—".
    function quantLabel(e) {
        // split=quant responses carry a scalar `quantization`; the default
        // grouping carries the distinct `quantizations` list.
        if (typeof e.quantization === 'string' && e.quantization) return e.quantization;
        if (Array.isArray(e.quantizations)) {
            var vals = e.quantizations.filter(function (q) {
                return typeof q === 'string' && q;
            });
            if (vals.length) return vals.join(', ');
        }
        return '—';
    }

    function parseIsoMs(iso) {
        if (typeof iso !== 'string' || !iso) return null;
        var t = Date.parse(iso);
        return isNaN(t) ? null : t;
    }

    function fmtNum(v, digits, suffix) {
        if (typeof v !== 'number' || !isFinite(v) || v <= 0) return '—';
        return v.toFixed(digits) + (suffix || '');
    }

    function sortEntries(entries) {
        var dir = sortDir === 'asc' ? 1 : -1;
        return entries.slice().sort(function (a, b) {
            var va = sortValue(a, sortKey);
            var vb = sortValue(b, sortKey);
            // Missing values sink to the bottom in both directions.
            if (va === null && vb === null) return 0;
            if (va === null) return 1;
            if (vb === null) return -1;
            if (va < vb) return -dir;
            if (va > vb) return dir;
            return 0;
        });
    }

    function applyView() {
        var entries = allEntries.filter(function (e) {
            return !engineFilter || e.engine === engineFilter;
        });
        entries = sortEntries(entries);
        document.getElementById('lb-count').textContent =
            entries.length + (entries.length === 1 ? ' result' : ' results');
        renderRows(entries);
    }

    function lastSeenCell(e) {
        var cell = document.createElement('td');
        var t = parseIsoMs(e.last_submitted_at);
        if (t === null) {
            cell.textContent = '—';
            return cell;
        }
        var ageDays = (Date.now() - t) / DAY_MS;
        var dot = document.createElement('span');
        // Freshness: green < 30 days, neutral 30-90, degraded beyond.
        dot.className = 'lb-seen-dot ' +
            (ageDays < 30 ? 'st-running' : ageDays <= 90 ? 'st-stopped' : 'st-degraded');
        cell.appendChild(dot);
        var date = document.createElement('span');
        date.textContent = new Date(t).toLocaleDateString();
        cell.appendChild(date);
        return cell;
    }

    function renderRows(entries) {
        var tbody = document.getElementById('lb-tbody');
        tbody.textContent = '';
        // Any open drill-down row was just cleared with the tbody.
        openDetail = null;
        detailSeq++;
        document.getElementById('lb-loading').style.display = 'none';
        document.getElementById('lb-empty').style.display = entries.length ? 'none' : '';
        var maxTok = 0;
        entries.forEach(function (e) {
            if (typeof e.median_tok_s === 'number' && e.median_tok_s > maxTok) {
                maxTok = e.median_tok_s;
            }
        });
        // All community-sourced strings land via textContent — remote data
        // is data, never markup.
        entries.forEach(function (e) {
            var tr = document.createElement('tr');
            tr.className = 'lb-row';
            function td(text, right) {
                var cell = document.createElement('td');
                cell.textContent = text;
                if (right) cell.className = 'text-right';
                tr.appendChild(cell);
                return cell;
            }
            td(e.engine || '?');
            td(e.model || '?');
            // The community API names the field hw_chip (hw_ram_gb beside it).
            var chip = e.hw_chip || e.chip || '—';
            td(e.hw_ram_gb ? chip + ' · ' + e.hw_ram_gb + ' GB' : chip);
            td(quantLabel(e));
            var tok = typeof e.median_tok_s === 'number' ? e.median_tok_s : 0;
            var ttft = typeof e.median_ttft_ms === 'number' ? e.median_ttft_ms : 0;
            var tokCell = td(tok ? tok.toFixed(1) : '—', true);
            if (tok && maxTok > 0) {
                // Bar sits left of the number so right-aligned digits stay
                // aligned; width scales against the best displayed value.
                var bar = document.createElement('span');
                bar.className = 'lb-bar';
                bar.style.width = Math.max(2, Math.round((tok / maxTok) * 64)) + 'px';
                tokCell.insertBefore(bar, tokCell.firstChild);
            }
            td(ttft ? Math.round(ttft) + ' ms' : '—', true);
            td(fmtNum(e.median_power_watts, 1), true);
            td(fmtNum(e.median_tok_s_per_watt, 2), true);
            td(String(e.samples || e.submissions || 0), true);
            tr.appendChild(lastSeenCell(e));
            tr.addEventListener('click', function () { toggleDetail(tr, e); });
            tbody.appendChild(tr);
        });
    }

    // --- Per-row drill-down (community /benchmarks via local proxy) ------

    function detailMessage(cellHost, text) {
        cellHost.textContent = '';
        var msg = document.createElement('div');
        msg.className = 'lb-detail-msg';
        msg.textContent = text;
        cellHost.appendChild(msg);
    }

    function closeDetail() {
        if (openDetail) {
            openDetail.detailTr.remove();
            openDetail.anchorTr.classList.remove('lb-row-open');
            openDetail = null;
        }
        detailSeq++;
    }

    function toggleDetail(tr, e) {
        var wasOpenHere = openDetail && openDetail.anchorTr === tr;
        closeDetail();
        if (wasOpenHere) return;

        var detailTr = document.createElement('tr');
        detailTr.className = 'lb-detail';
        var cell = document.createElement('td');
        cell.colSpan = COLUMN_COUNT;
        detailTr.appendChild(cell);
        detailMessage(cell, 'Loading detail…');
        tr.insertAdjacentElement('afterend', detailTr);
        tr.classList.add('lb-row-open');
        openDetail = { anchorTr: tr, detailTr: detailTr };

        var seq = detailSeq;
        var params = [
            'chip=' + encodeURIComponent(e.hw_chip || e.chip || ''),
            'model=' + encodeURIComponent(e.model || ''),
            'days=' + daysFilter
        ];
        if (e.engine) params.push('engine=' + encodeURIComponent(e.engine));
        fetch('/api/v1/leaderboard/submissions?' + params.join('&'))
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                if (seq !== detailSeq) return; // row closed/replaced meanwhile
                if (!data || !Array.isArray(data.results)) {
                    // Endpoint not deployed yet, upstream down, or bad params:
                    // degrade to a quiet note, never an error page.
                    detailMessage(cell, 'Per-submission detail unavailable.');
                    return;
                }
                if (!data.results.length) {
                    detailMessage(cell, 'No individual submissions in this window.');
                    return;
                }
                renderDetailTable(cell, data.results);
            })
            .catch(function () {
                if (seq !== detailSeq) return;
                detailMessage(cell, 'Per-submission detail unavailable.');
            });
    }

    function renderDetailTable(cellHost, results) {
        cellHost.textContent = '';
        var table = document.createElement('table');
        table.className = 'results-table lb-detail-table';
        var thead = document.createElement('thead');
        var htr = document.createElement('tr');
        ['Date', 'Engine', 'Quant', 'tok/s', 'TTFT', 'VRAM', 'W', 'Card'].forEach(
            function (label, i) {
                var th = document.createElement('th');
                th.textContent = label;
                th.className = i >= 3 && i <= 6 ? 'text-right' : 'text-left';
                htr.appendChild(th);
            }
        );
        thead.appendChild(htr);
        table.appendChild(thead);
        var tbody = document.createElement('tbody');
        results.forEach(function (s) {
            var tr = document.createElement('tr');
            function td(text, right) {
                var cell = document.createElement('td');
                cell.textContent = text;
                if (right) cell.className = 'text-right';
                tr.appendChild(cell);
                return cell;
            }
            var t = parseIsoMs(s.submitted_at);
            td(t === null ? '—' : new Date(t).toLocaleDateString());
            var engine = s.engine || '?';
            if (typeof s.engine_version === 'string' && s.engine_version) {
                engine += ' ' + s.engine_version;
            }
            td(engine);
            td(typeof s.quantization === 'string' && s.quantization ? s.quantization : '—');
            td(fmtNum(s.median_tok_s, 1), true);
            td(typeof s.median_ttft_ms === 'number' && s.median_ttft_ms > 0
                ? Math.round(s.median_ttft_ms) + ' ms' : '—', true);
            td(fmtNum(s.vram_gb, 1, ' GB'), true);
            td(fmtNum(s.avg_power_watts, 1), true);
            var linkCell = document.createElement('td');
            // card_url comes from a non-trusted API: only accept plain
            // https URLs as href, never other schemes.
            if (typeof s.card_url === 'string' && s.card_url.indexOf('https://') === 0) {
                var a = document.createElement('a');
                a.href = s.card_url;
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
                a.textContent = 'card';
                linkCell.appendChild(a);
            } else {
                linkCell.textContent = '—';
            }
            tr.appendChild(linkCell);
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        var wrap = document.createElement('div');
        wrap.className = 'overflow-x-auto';
        wrap.appendChild(table);
        cellHost.appendChild(wrap);
    }

    loadLeaderboard();
</script>
{% endblock %}