{% extends "admin/django_celeryx/change_list.html" %}
{% load i18n %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<style>
    .celeryx-stats {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 16px;
    }
    .celeryx-stat {
        flex: 1;
        min-width: 100px;
        background: var(--darkened-bg);
        border: 1px solid var(--hairline-color);
        border-radius: 6px;
        padding: 16px 12px;
        text-align: center;
    }
    .celeryx-stat-value {
        font-size: 28px;
        font-weight: 700;
        color: var(--body-fg);
        line-height: 1.2;
    }
    .celeryx-stat-label {
        font-size: 10px;
        color: var(--body-quiet-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 6px;
    }
    .celeryx-row {
        margin-bottom: 16px;
    }
    .celeryx-chart {
        background: var(--body-bg);
        border: 1px solid var(--hairline-color);
        border-radius: 6px;
        padding: 16px;
        position: relative;
        height: 300px;
        overflow: hidden;
    }
    .celeryx-chart canvas {
        width: 100% !important;
    }
    .celeryx-chart-wide {
        height: 320px;
    }
    .celeryx-pair {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }
    .celeryx-pair > * {
        flex: 1;
        min-width: 0;
    }
    /* Light mode colors */
    .celeryx-color-ok { color: #417690; }
    .celeryx-color-err { color: #ba2121; }
    .celeryx-color-active { color: #e09c3f; }
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] .celeryx-color-ok { color: #5dade2; }
        [data-theme="auto"] .celeryx-color-err { color: #e74c3c; }
        [data-theme="auto"] .celeryx-color-active { color: #f0ad4e; }
    }
    [data-theme="dark"] .celeryx-color-ok { color: #5dade2; }
    [data-theme="dark"] .celeryx-color-err { color: #e74c3c; }
    [data-theme="dark"] .celeryx-color-active { color: #f0ad4e; }
</style>
<script>
/* Chart.js dashboard renderer — creates on first load, updates in-place on htmx morph */
window._cxCharts = window._cxCharts || {};

window._cxRenderDashboard = function() {
    const dataEl = document.getElementById('cx-data');
    if (!dataEl) return;
    const D = JSON.parse(dataEl.textContent);

    const isDark = document.documentElement.dataset.theme === 'dark' ||
        (document.documentElement.dataset.theme === 'auto' &&
         window.matchMedia('(prefers-color-scheme: dark)').matches);

    const C = {
        ok:      isDark ? '#5dade2' : '#417690',
        okFill:  isDark ? 'rgba(93,173,226,0.15)' : 'rgba(65,118,144,0.2)',
        err:     isDark ? '#e74c3c' : '#ba2121',
        errFill: isDark ? 'rgba(231,76,60,0.15)' : 'rgba(186,33,33,0.2)',
        warn:    isDark ? '#f0ad4e' : '#e09c3f',
        text:    isDark ? '#ccc' : '#666',
        grid:    isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
        title:   isDark ? '#ddd' : '#417690',
        bar:     isDark ? '#5dade2' : '#417690',
    };
    const tip = {
        backgroundColor: isDark ? '#333' : '#fff',
        titleColor: isDark ? '#eee' : '#333',
        bodyColor: isDark ? '#ccc' : '#666',
        borderColor: isDark ? '#555' : '#ddd',
        borderWidth: 1, cornerRadius: 6, padding: 10,
    };
    const mkTitle = (t) => ({ display: true, text: t, color: C.title, font: { size: 14, weight: '500' }, padding: { bottom: 12 } });

    /* Colors are applied via CSS classes — no JS needed */
    Chart.defaults.font = { ...Chart.defaults.font, family: "'Segoe UI', system-ui, Roboto, sans-serif" };

    /* Helper: update chart data in-place or create new */
    function upsert(id, config) {
        const canvas = document.getElementById(id);
        if (!canvas) return;
        const existing = window._cxCharts[id];
        if (existing && !existing.ctx.canvas.isConnected) {
            /* Canvas was replaced by morph — destroy stale reference */
            existing.destroy();
            delete window._cxCharts[id];
        }
        if (window._cxCharts[id]) {
            const ch = window._cxCharts[id];
            ch.data.labels = config.data.labels;
            config.data.datasets.forEach((ds, i) => {
                if (ch.data.datasets[i]) {
                    ch.data.datasets[i].data = ds.data;
                } else {
                    ch.data.datasets.push(ds);
                }
            });
            ch.update('none');  /* 'none' = no animation on update */
        } else {
            window._cxCharts[id] = new Chart(canvas, config);
        }
    }

    if (D.tp) {
        upsert('cx-throughput', {
            type: 'line',
            data: {
                labels: D.tp.labels,
                datasets: [
                    { label: 'Succeeded', data: D.tp.succeeded, borderColor: C.ok, backgroundColor: C.okFill, fill: true, tension: 0.35, pointRadius: 0, pointHitRadius: 10, borderWidth: 2 },
                    { label: 'Failed', data: D.tp.failed, borderColor: C.err, backgroundColor: C.errFill, fill: true, tension: 0.35, pointRadius: 0, pointHitRadius: 10, borderWidth: 2 }
                ]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                animation: { duration: 600 },
                interaction: { mode: 'index', intersect: false },
                plugins: { title: mkTitle('Throughput'), legend: { position: 'bottom', labels: { usePointStyle: true, pointStyle: 'circle', padding: 20, color: C.text, font: { size: 12 } } }, tooltip: tip },
                scales: { x: { ticks: { maxTicksLimit: 8, color: C.text, font: { size: 11 } }, grid: { display: false }, border: { display: false } }, y: { beginAtZero: true, ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, border: { display: false } } }
            }
        });
    }
    if (D.tk) {
        upsert('cx-tasks', {
            type: 'bar',
            data: { labels: D.tk.labels, datasets: [{ data: D.tk.values, backgroundColor: C.bar, borderRadius: 3, borderSkipped: false, barPercentage: 0.7 }] },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false, animation: { duration: 600 },
                plugins: { title: mkTitle('Top Tasks (by count)'), legend: { display: false }, tooltip: tip },
                scales: { x: { beginAtZero: true, ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, border: { display: false } }, y: { ticks: { color: C.bar, font: { size: 12 } }, grid: { display: false }, border: { display: false } } }
            }
        });
    }
    if (D.wl) {
        upsert('cx-workers', {
            type: 'bar',
            data: { labels: D.wl.labels, datasets: [{ data: D.wl.values, backgroundColor: C.ok, borderRadius: 3, borderSkipped: false, barPercentage: 0.7 }] },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false, animation: { duration: 600 },
                plugins: { title: mkTitle('Worker Load (tasks processed)'), legend: { display: false }, tooltip: tip },
                scales: { x: { beginAtZero: true, ticks: { color: C.text, font: { size: 11 } }, grid: { color: C.grid }, border: { display: false } }, y: { ticks: { color: C.bar, font: { size: 12 } }, grid: { display: false }, border: { display: false } } }
            }
        });
    }
    if (D.sl) {
        const maxAvg = D.sl.avg.length ? Math.max(...D.sl.avg) : 0;
        const minSpan = maxAvg * 0.03;
        const ranges = D.sl.avg.map((a, i) => { const h = Math.max(D.sl.std[i], minSpan); return [Math.max(0, a - h), a + h]; });
        upsert('cx-slowest', {
            type: 'bar',
            data: { labels: D.sl.labels, datasets: [{ data: ranges, backgroundColor: C.warn, borderRadius: 3, borderSkipped: false, barPercentage: 0.6 }] },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false, animation: { duration: 600 },
                plugins: { title: mkTitle('Slowest Tasks (runtime range: avg ± stddev)'), legend: { display: false }, tooltip: { ...tip, callbacks: { label: ctx => { const i = ctx.dataIndex; return ' Avg: ' + D.sl.avg[i].toFixed(3) + 's  (±' + D.sl.std[i].toFixed(3) + 's)'; } } } },
                scales: { x: { beginAtZero: true, ticks: { color: C.text, font: { size: 11 }, callback: v => v + 's' }, grid: { color: C.grid }, border: { display: false } }, y: { ticks: { color: C.bar, font: { size: 12 } }, grid: { display: false }, border: { display: false } } }
            }
        });
    }
    if (D.fr) {
        upsert('cx-failures', {
            type: 'bar',
            data: { labels: D.fr.labels, datasets: [{ data: D.fr.rates, backgroundColor: C.err, borderRadius: 3, borderSkipped: false, barPercentage: 0.7 }] },
            options: {
                indexAxis: 'y', responsive: true, maintainAspectRatio: false, animation: { duration: 600 },
                plugins: { title: mkTitle('Failure Rate by Task'), legend: { display: false }, tooltip: { ...tip, callbacks: { label: ctx => ' ' + ctx.raw + '% (' + D.fr.counts[ctx.dataIndex] + ')' } } },
                scales: { x: { beginAtZero: true, max: 100, ticks: { color: C.text, font: { size: 11 }, callback: v => v + '%' }, grid: { color: C.grid }, border: { display: false } }, y: { ticks: { color: C.bar, font: { size: 12 } }, grid: { display: false }, border: { display: false } } }
            }
        });
    }
};
document.addEventListener('DOMContentLoaded', window._cxRenderDashboard);
document.addEventListener('htmx:afterSettle', window._cxRenderDashboard);
</script>
{% endblock %}

{% block content_title %}<h1>{% translate "Dashboard" %}</h1>{% endblock %}
{% block search %}{% endblock %}
{% block pagination %}{% endblock %}

{% block result_list %}
    {# Stats area: morphed by htmx for smooth live updates #}
    {% if live %}
    <div hx-get="{{ live_url }}"
         hx-trigger="every {{ refresh_interval }}s"
         hx-select="#cx-stats"
         hx-target="#cx-stats"
         hx-swap="morph"
         hx-ext="morph">
    {% endif %}
    <div id="cx-stats">
    <script type="application/json" id="cx-data">
    {
        {% if chartjs_throughput %}"tp": {{ chartjs_throughput|safe }},{% endif %}
        {% if chartjs_top_tasks %}"tk": {{ chartjs_top_tasks|safe }},{% endif %}
        {% if chartjs_worker_load %}"wl": {{ chartjs_worker_load|safe }},{% endif %}
        {% if chartjs_slowest %}"sl": {{ chartjs_slowest|safe }},{% endif %}
        {% if chartjs_failure_rate %}"fr": {{ chartjs_failure_rate|safe }},{% endif %}
        "_": 0
    }
    </script>

    <div class="celeryx-stats">
        <div class="celeryx-stat">
            <div class="celeryx-stat-value">{{ total_tasks }}</div>
            <div class="celeryx-stat-label">{% translate 'Total' %}</div>
        </div>
        <div class="celeryx-stat">
            <div class="celeryx-stat-value celeryx-color-ok">{{ total_succeeded }}</div>
            <div class="celeryx-stat-label">{% translate 'Succeeded' %}</div>
        </div>
        <div class="celeryx-stat">
            <div class="celeryx-stat-value celeryx-color-err">{{ total_failed }}</div>
            <div class="celeryx-stat-label">{% translate 'Failed' %}</div>
        </div>
        <div class="celeryx-stat">
            <div class="celeryx-stat-value celeryx-color-active">{{ total_active }}</div>
            <div class="celeryx-stat-label">{% translate 'Active' %}</div>
        </div>
        <div class="celeryx-stat">
            <div class="celeryx-stat-value">{{ success_rate }}</div>
            <div class="celeryx-stat-label">{% translate 'Success Rate' %}</div>
        </div>
        {% if avg_runtime %}
        <div class="celeryx-stat">
            <div class="celeryx-stat-value">{{ avg_runtime }}</div>
            <div class="celeryx-stat-label">{% translate 'Avg Runtime' %}</div>
        </div>
        {% endif %}
    </div>
    </div>
    {% if live %}
    </div>
    {% endif %}

    {# Charts area: never morphed, JS updates Chart.js in-place #}
    <div class="celeryx-row">
        <div class="celeryx-chart celeryx-chart-wide"><canvas id="cx-throughput" data-cx-chart></canvas></div>
    </div>
    <div class="celeryx-pair">
        <div class="celeryx-chart"><canvas id="cx-tasks" data-cx-chart></canvas></div>
        <div class="celeryx-chart"><canvas id="cx-workers" data-cx-chart></canvas></div>
    </div>
    <div class="celeryx-pair">
        <div class="celeryx-chart"><canvas id="cx-slowest" data-cx-chart></canvas></div>
        <div class="celeryx-chart"><canvas id="cx-failures" data-cx-chart></canvas></div>
    </div>
{% endblock %}