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

{% block content %}
<div class="page-header">
    <h2>History</h2>
    <p>Benchmark performance over time</p>
</div>

<!-- Filters -->
<div class="filter-bar fade-in">
    <span class="text-xs text-neutral-500 filter-label" style="margin-right: 0.5rem;">Time range:</span>
    <button class="filter-chip" data-hours="1" onclick="setTimeRange(1, this)">1h</button>
    <button class="filter-chip" data-hours="24" onclick="setTimeRange(24, this)">24h</button>
    <button class="filter-chip active" data-hours="168" onclick="setTimeRange(168, this)">7d</button>
    <button class="filter-chip" data-hours="720" onclick="setTimeRange(720, this)">30d</button>
    <button class="filter-chip" data-hours="2160" onclick="setTimeRange(2160, this)">90d</button>
    <span class="text-xs text-neutral-500 filter-label" style="margin-left: 1rem; margin-right: 0.5rem;">Custom:</span>
    <input type="datetime-local" id="range-from" class="range-input" title="From">
    <span class="text-xs text-neutral-500">—</span>
    <input type="datetime-local" id="range-to" class="range-input" title="To">
    <button class="filter-chip" id="range-apply-btn" onclick="applyCustomRange()" style="font-weight: 600;">Apply</button>
</div>

<!-- System Metrics -->
<div id="system-charts-section" class="fade-in-delay-1">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">System Metrics</h3>
    <div class="card-grid-3">
        <div class="card">
            <h3 class="card-title">CPU Load</h3>
            <div id="sys-cpu-chart" style="min-height: 200px;"></div>
            <div id="sys-cpu-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No system data</div>
        </div>
        <div class="card">
            <h3 class="card-title">Memory %</h3>
            <div id="sys-mem-chart" style="min-height: 200px;"></div>
            <div id="sys-mem-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No system data</div>
        </div>
        <div class="card" id="sys-gpu-card" style="display: none;">
            <h3 class="card-title">GPU Utilization %</h3>
            <div id="sys-gpu-chart" style="min-height: 200px;"></div>
            <div id="sys-gpu-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No GPU data</div>
        </div>
    </div>
    <div class="card-grid-2 mt-4" id="sys-power-row" style="display: none;">
        <div class="card">
            <h3 class="card-title">Total Power (W)</h3>
            <div id="sys-power-total-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">GPU vs CPU Power (W)</h3>
            <div id="sys-power-breakdown-chart" style="min-height: 200px;"></div>
        </div>
    </div>
</div>

<!-- Engine Activity -->
<div id="engine-activity-section" class="mt-6 fade-in-delay-2" style="display: none;">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">Engine Activity</h3>
    <div class="card-grid-2">
        <div class="card">
            <h3 class="card-title">Connections &amp; Requests</h3>
            <div id="engine-conn-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">KV Cache Usage %</h3>
            <div id="engine-kv-chart" style="min-height: 200px;"></div>
            <div id="engine-kv-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 2rem 0;">No KV cache data</div>
        </div>
    </div>
</div>

<!-- Charts -->
<div class="card-grid-2 mt-6 fade-in-delay-2">
    <div class="card">
        <h3 class="card-title">Throughput (tok/s)</h3>
        <div id="history-tok-chart" style="min-height: 300px;"></div>
        <div id="tok-chart-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 4rem 0;">No benchmark data — run a benchmark first</div>
    </div>
    <div class="card">
        <h3 class="card-title">Time to First Token (ms)</h3>
        <div id="history-ttft-chart" style="min-height: 300px;"></div>
        <div id="ttft-chart-empty" class="text-neutral-400 text-sm text-center" style="display: none; padding: 4rem 0;">No benchmark data — run a benchmark first</div>
    </div>
</div>

<!-- Process Metrics -->
<div id="process-metrics-section" class="mt-6 fade-in-delay-2" style="display: none;">
    <h3 style="margin-bottom: 0.75rem; color: var(--text-secondary);">Process Metrics (Benchmark Runs)</h3>
    <div class="card-grid">
        <div class="card">
            <h3 class="card-title">Engine CPU %</h3>
            <div id="proc-cpu-chart" style="min-height: 200px;"></div>
        </div>
        <div class="card">
            <h3 class="card-title">Engine RSS (Memory)</h3>
            <div id="proc-rss-chart" style="min-height: 200px;"></div>
        </div>
    </div>
</div>

<!-- Data table -->
<div class="mt-6 fade-in-delay-3">
    <div class="card">
        <h3 class="card-title">Benchmark Data</h3>
        <div class="overflow-x-auto">
            <table class="results-table" id="history-table">
                <thead>
                    <tr>
                        <th class="text-left">Date</th>
                        <th class="text-left">Engine</th>
                        <th class="text-left">Model</th>
                        <th class="text-left">Prompt</th>
                        <th class="text-right">tok/s</th>
                        <th class="text-right">TTFT</th>
                        <th class="text-right">Duration</th>
                    </tr>
                </thead>
                <tbody id="history-tbody">
                </tbody>
            </table>
        </div>
        <div id="history-empty" class="text-neutral-400 text-sm" style="display: none; padding: 1rem 0;">
            No benchmark data in this time range
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    var currentHours = 168;
    var customSince = 0;
    var customUntil = 0;
    var tokChart = null;
    var ttftChart = null;
    var sysCpuChart = null;
    var sysMemChart = null;
    var sysGpuChart = null;
    var sysPowerTotalChart = null;
    var sysPowerBreakdownChart = null;
    var engineConnChart = null;
    var engineKvChart = null;
    var procCpuChart = null;
    var procRssChart = null;

    function setTimeRange(hours, btn) {
        currentHours = hours;
        customSince = 0;
        customUntil = 0;
        document.getElementById('range-from').value = '';
        document.getElementById('range-to').value = '';
        document.querySelectorAll('.filter-chip').forEach(function(c) {
            c.classList.remove('active');
        });
        btn.classList.add('active');
        loadData();
    }

    function applyCustomRange() {
        var fromEl = document.getElementById('range-from');
        var toEl = document.getElementById('range-to');
        if (!fromEl.value) return;
        customSince = Math.floor(new Date(fromEl.value).getTime() / 1000);
        customUntil = toEl.value ? Math.floor(new Date(toEl.value).getTime() / 1000) : 0;
        document.querySelectorAll('.filter-chip[data-hours]').forEach(function(c) {
            c.classList.remove('active');
        });
        document.getElementById('range-apply-btn').classList.add('active');
        loadData();
    }

    function buildQuery() {
        if (customSince > 0) {
            var q = 'since=' + customSince;
            if (customUntil > 0) q += '&until=' + customUntil;
            return q;
        }
        return 'hours=' + currentHours;
    }

    function loadData() {
        var qs = buildQuery();
        fetch('/api/benchmarks?' + qs)
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                renderCharts(rows);
                renderTable(rows);
            })
            .catch(function(err) {
                console.error('Failed to load benchmarks:', err);
            });

        fetch('/api/history?' + qs)
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                renderSystemCharts(rows);
            })
            .catch(function(err) {
                console.error('Failed to load system history:', err);
            });

        fetch('/api/engine-history?' + qs)
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                renderEngineActivity(rows);
            })
            .catch(function(err) {
                console.error('Failed to load engine history:', err);
            });

        fetch('/api/benchmark-process?' + qs)
            .then(function(res) { return res.json(); })
            .then(function(rows) {
                renderProcessMetrics(rows);
            })
            .catch(function(err) {
                console.error('Failed to load process metrics:', err);
            });
    }

    function renderSystemCharts(rows) {
        // Destroy existing charts
        if (sysCpuChart) { sysCpuChart.destroy(); sysCpuChart = null; }
        if (sysMemChart) { sysMemChart.destroy(); sysMemChart = null; }
        if (sysGpuChart) { sysGpuChart.destroy(); sysGpuChart = null; }

        var cpuData = [];
        var memData = [];
        var gpuData = [];
        var gpuRendererData = [];
        var gpuTilerData = [];

        rows.forEach(function(r) {
            var tsMs = r.ts * 1000;
            cpuData.push([tsMs, r.cpu_load_1]);
            if (r.mem_total > 0) {
                memData.push([tsMs, Math.round((r.mem_used / r.mem_total) * 100)]);
            }
            if (r.gpu_utilization_pct >= 0) {
                gpuData.push([tsMs, r.gpu_utilization_pct]);
            }
            if (r.gpu_renderer_pct >= 0) {
                gpuRendererData.push([tsMs, r.gpu_renderer_pct]);
            }
            if (r.gpu_tiler_pct >= 0) {
                gpuTilerData.push([tsMs, r.gpu_tiler_pct]);
            }
        });

        var cpuEl = document.getElementById('sys-cpu-chart');
        var cpuEmpty = document.getElementById('sys-cpu-empty');
        if (cpuData.length > 0) {
            cpuEl.style.display = '';
            cpuEmpty.style.display = 'none';
            sysCpuChart = createTimeChart('sys-cpu-chart',
                [{ name: 'CPU Load', data: cpuData }],
                { height: 200, yTitle: 'Load', yFormatter: function(v) { return v.toFixed(1); } });
        } else {
            cpuEl.style.display = 'none';
            cpuEmpty.style.display = 'block';
        }

        var memEl = document.getElementById('sys-mem-chart');
        var memEmpty = document.getElementById('sys-mem-empty');
        if (memData.length > 0) {
            memEl.style.display = '';
            memEmpty.style.display = 'none';
            sysMemChart = createTimeChart('sys-mem-chart',
                [{ name: 'Memory %', data: memData }],
                { height: 200, yTitle: '%', yFormatter: function(v) { return v.toFixed(0) + '%'; } });
        } else {
            memEl.style.display = 'none';
            memEmpty.style.display = 'block';
        }

        var gpuCard = document.getElementById('sys-gpu-card');
        var gpuEl = document.getElementById('sys-gpu-chart');
        var gpuEmpty = document.getElementById('sys-gpu-empty');
        if (gpuData.length > 0) {
            gpuCard.style.display = '';
            gpuEl.style.display = '';
            gpuEmpty.style.display = 'none';
            var gpuSeries = [{ name: 'GPU %', data: gpuData }];
            if (gpuRendererData.length > 0) {
                gpuSeries.push({ name: 'Renderer', data: gpuRendererData });
            }
            if (gpuTilerData.length > 0) {
                gpuSeries.push({ name: 'Tiler', data: gpuTilerData });
            }
            sysGpuChart = createTimeChart('sys-gpu-chart',
                gpuSeries,
                { height: 200, yTitle: '%', yFormatter: function(v) { return v.toFixed(0) + '%'; } });
        } else {
            gpuCard.style.display = 'none';
        }

        // Power charts
        if (sysPowerTotalChart) { sysPowerTotalChart.destroy(); sysPowerTotalChart = null; }
        if (sysPowerBreakdownChart) { sysPowerBreakdownChart.destroy(); sysPowerBreakdownChart = null; }

        var powerTotalData = [];
        var powerGpuData = [];
        var powerCpuData = [];

        rows.forEach(function(r) {
            var tsMs = r.ts * 1000;
            if (r.power_total_watts >= 0) {
                powerTotalData.push([tsMs, r.power_total_watts]);
            }
            if (r.power_gpu_watts >= 0) {
                powerGpuData.push([tsMs, r.power_gpu_watts]);
            }
            if (r.power_cpu_watts >= 0) {
                powerCpuData.push([tsMs, r.power_cpu_watts]);
            }
        });

        var powerRow = document.getElementById('sys-power-row');
        if (powerTotalData.length > 0) {
            powerRow.style.display = '';
            sysPowerTotalChart = createTimeChart('sys-power-total-chart',
                [{ name: 'Total Power', data: powerTotalData }],
                { height: 200, yTitle: 'W', colors: ['#f59e0b'],
                  yFormatter: function(v) { return v.toFixed(1) + ' W'; } });
            if (powerGpuData.length > 0 || powerCpuData.length > 0) {
                var breakdownSeries = [];
                if (powerGpuData.length > 0) breakdownSeries.push({ name: 'GPU', data: powerGpuData });
                if (powerCpuData.length > 0) breakdownSeries.push({ name: 'CPU', data: powerCpuData });
                sysPowerBreakdownChart = createTimeChart('sys-power-breakdown-chart',
                    breakdownSeries,
                    { height: 200, yTitle: 'W', colors: ['#8b5cf6', '#06b6d4'],
                      yFormatter: function(v) { return v.toFixed(1) + ' W'; } });
            }
        } else {
            powerRow.style.display = 'none';
        }
    }

    function renderCharts(rows) {
        // Group by engine for time series
        var engineData = {};
        rows.forEach(function(r) {
            if (!engineData[r.engine]) {
                engineData[r.engine] = { tok_s: [], ttft: [] };
            }
            engineData[r.engine].tok_s.push([r.ts * 1000, r.tok_per_sec]);
            engineData[r.engine].ttft.push([r.ts * 1000, r.ttft_ms]);
        });

        var tokSeries = Object.keys(engineData).map(function(name) {
            return { name: name, data: engineData[name].tok_s };
        });
        var ttftSeries = Object.keys(engineData).map(function(name) {
            return { name: name, data: engineData[name].ttft };
        });

        // Destroy existing charts
        if (tokChart) { tokChart.destroy(); tokChart = null; }
        if (ttftChart) { ttftChart.destroy(); ttftChart = null; }

        var tokEmpty = document.getElementById('tok-chart-empty');
        var ttftEmpty = document.getElementById('ttft-chart-empty');
        var tokEl = document.getElementById('history-tok-chart');
        var ttftEl = document.getElementById('history-ttft-chart');

        if (tokSeries.length > 0) {
            tokEl.style.display = '';
            ttftEl.style.display = '';
            tokEmpty.style.display = 'none';
            ttftEmpty.style.display = 'none';
            tokChart = createTimeChart('history-tok-chart', tokSeries, {
                yTitle: 'tok/s',
                yFormatter: function(v) { return v.toFixed(1); },
            });
            ttftChart = createTimeChart('history-ttft-chart', ttftSeries, {
                yTitle: 'ms',
                yFormatter: function(v) { return v.toFixed(0) + ' ms'; },
            });
        } else {
            tokEl.style.display = 'none';
            ttftEl.style.display = 'none';
            tokEmpty.style.display = 'block';
            ttftEmpty.style.display = 'block';
        }
    }

    function renderTable(rows) {
        var tbody = document.getElementById('history-tbody');
        var emptyMsg = document.getElementById('history-empty');
        tbody.textContent = '';

        if (!rows || rows.length === 0) {
            emptyMsg.style.display = 'block';
            return;
        }
        emptyMsg.style.display = 'none';

        // Show most recent first, limit to 100
        var sorted = rows.slice().sort(function(a, b) { return b.ts - a.ts; }).slice(0, 100);

        sorted.forEach(function(r) {
            var tr = document.createElement('tr');

            var tdDate = document.createElement('td');
            tdDate.style.fontFamily = 'var(--font-sans)';
            tdDate.textContent = new Date(r.ts * 1000).toLocaleString();
            tr.appendChild(tdDate);

            var tdEngine = document.createElement('td');
            tdEngine.style.fontFamily = 'var(--font-sans)';
            tdEngine.textContent = r.engine;
            tr.appendChild(tdEngine);

            var tdModel = document.createElement('td');
            tdModel.style.fontFamily = 'var(--font-sans)';
            tdModel.textContent = r.model;
            tr.appendChild(tdModel);

            var tdPrompt = document.createElement('td');
            tdPrompt.style.fontFamily = 'var(--font-sans)';
            var promptText = r.prompt_type;
            if (r.context_size > 0) {
                var ctxLabel = r.context_size >= 1024
                    ? Math.floor(r.context_size / 1024) + 'K'
                    : r.context_size.toString();
                promptText += ' (' + ctxLabel + ' ctx)';
            }
            tdPrompt.textContent = promptText;
            tr.appendChild(tdPrompt);

            var tdTok = document.createElement('td');
            tdTok.className = 'text-right';
            tdTok.textContent = r.tok_per_sec.toFixed(1);
            tr.appendChild(tdTok);

            var tdTtft = document.createElement('td');
            tdTtft.className = 'text-right';
            tdTtft.textContent = r.ttft_ms.toFixed(0) + ' ms';
            tr.appendChild(tdTtft);

            var tdDur = document.createElement('td');
            tdDur.className = 'text-right';
            tdDur.textContent = (r.total_duration_ms / 1000).toFixed(1) + ' s';
            tr.appendChild(tdDur);

            tbody.appendChild(tr);
        });
    }

    function renderEngineActivity(rows) {
        if (engineConnChart) { engineConnChart.destroy(); engineConnChart = null; }
        if (engineKvChart) { engineKvChart.destroy(); engineKvChart = null; }

        var section = document.getElementById('engine-activity-section');
        if (!rows || rows.length === 0) {
            section.style.display = 'none';
            return;
        }
        section.style.display = '';

        // Group by engine
        var byEngine = {};
        rows.forEach(function(r) {
            if (!byEngine[r.engine]) {
                byEngine[r.engine] = { conn: [], req: [], kv: [] };
            }
            var tsMs = r.ts * 1000;
            var totalConn = (r.tcp_connections || 0) + (r.requests_processing || 0);
            byEngine[r.engine].conn.push([tsMs, r.tcp_connections || 0]);
            byEngine[r.engine].req.push([tsMs, r.requests_processing || 0]);
            if (r.kv_cache_usage_ratio >= 0) {
                byEngine[r.engine].kv.push([tsMs, Math.round(r.kv_cache_usage_ratio * 100)]);
            }
        });

        var connSeries = [];
        var kvSeries = [];
        Object.keys(byEngine).forEach(function(eng) {
            connSeries.push({ name: eng + ' TCP', data: byEngine[eng].conn });
            if (byEngine[eng].req.some(function(p) { return p[1] > 0; })) {
                connSeries.push({ name: eng + ' processing', data: byEngine[eng].req });
            }
            if (byEngine[eng].kv.length > 0) {
                kvSeries.push({ name: eng, data: byEngine[eng].kv });
            }
        });

        if (connSeries.length > 0) {
            engineConnChart = createTimeChart('engine-conn-chart', connSeries, {
                height: 200, yTitle: 'Count',
                yFormatter: function(v) { return v.toFixed(0); },
            });
        }
        if (kvSeries.length > 0) {
            engineKvChart = createTimeChart('engine-kv-chart', kvSeries, {
                height: 200, yTitle: '%',
                yFormatter: function(v) { return v.toFixed(0) + '%'; },
            });
        }
    }

    function renderProcessMetrics(rows) {
        if (procCpuChart) { procCpuChart.destroy(); procCpuChart = null; }
        if (procRssChart) { procRssChart.destroy(); procRssChart = null; }

        var section = document.getElementById('process-metrics-section');
        if (!rows || rows.length === 0) {
            section.style.display = 'none';
            return;
        }
        section.style.display = '';

        var byEngine = {};
        rows.forEach(function(r) {
            if (!byEngine[r.engine]) {
                byEngine[r.engine] = { cpu: [], rss: [] };
            }
            var tsMs = r.ts * 1000;
            if (r.proc_cpu_pct > 0) {
                byEngine[r.engine].cpu.push([tsMs, r.proc_cpu_pct]);
            }
            if (r.proc_rss_bytes > 0) {
                byEngine[r.engine].rss.push([tsMs, Math.round(r.proc_rss_bytes / (1024 * 1024))]);
            }
        });

        var cpuSeries = [];
        var rssSeries = [];
        Object.keys(byEngine).forEach(function(eng) {
            if (byEngine[eng].cpu.length > 0) {
                cpuSeries.push({ name: eng, data: byEngine[eng].cpu });
            }
            if (byEngine[eng].rss.length > 0) {
                rssSeries.push({ name: eng, data: byEngine[eng].rss });
            }
        });

        if (cpuSeries.length > 0) {
            procCpuChart = createTimeChart('proc-cpu-chart', cpuSeries, {
                height: 200, yTitle: '%',
                yFormatter: function(v) { return v.toFixed(0) + '%'; },
            });
        }
        if (rssSeries.length > 0) {
            procRssChart = createTimeChart('proc-rss-chart', rssSeries, {
                height: 200, yTitle: 'MB',
                yFormatter: function(v) { return v.toFixed(0) + ' MB'; },
            });
        }
    }

    // Cleanup: destroy all charts when leaving page
    function cleanupHistory() {
        [tokChart, ttftChart, sysCpuChart, sysMemChart, sysGpuChart,
         engineConnChart, engineKvChart, procCpuChart, procRssChart].forEach(function(c) {
            if (c) { c.destroy(); }
        });
        tokChart = ttftChart = sysCpuChart = sysMemChart = sysGpuChart = null;
        engineConnChart = engineKvChart = procCpuChart = procRssChart = null;
    }
    window.addEventListener('pagehide', cleanupHistory);
    window.addEventListener('beforeunload', cleanupHistory);

    // Initial load
    loadData();
</script>
{% endblock %}