{% extends "admin/layout.html" %}
{% block title %}System Health – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-system-health">System Health</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Live server stats &amp; process management. Auto-refreshes every 10 seconds.</p>
    </div>
    <div class="flex flex-wrap gap-3 items-center">
        <span id="last-updated" class="text-xs text-gray-400 dark:text-gray-500"></span>
        <button id="btn-refresh" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
            <i class="fa fa-arrows-rotate mr-1"></i>Refresh
        </button>
        <button id="btn-clear-ram" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all">
            <i class="fa fa-memory mr-1"></i>Clear RAM &amp; Kill Stuck
        </button>
    </div>
</div>

<!-- Toast notification -->
<div id="toast" class="fixed top-6 right-6 z-50 hidden max-w-sm w-full">
    <div id="toast-inner" class="rounded-xl shadow-lg border px-4 py-3 text-sm font-medium flex items-start gap-3"></div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

<!-- Stat Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- RAM -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
        <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-memory text-blue-600 dark:text-blue-400 text-sm"></i>
            </div>
            <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">RAM</span>
        </div>
        <div class="text-xl font-bold text-gray-900 dark:text-white mb-1" id="ram-label">–</div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-1">
            <div id="ram-bar" class="h-2 rounded-full bg-blue-500 transition-all duration-500" style="width:0%"></div>
        </div>
        <div class="text-xs text-gray-400 dark:text-gray-500" id="ram-detail">Loading…</div>
    </div>
    <!-- CPU -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
        <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-microchip text-green-600 dark:text-green-400 text-sm"></i>
            </div>
            <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CPU</span>
        </div>
        <div class="text-xl font-bold text-gray-900 dark:text-white mb-1" id="cpu-label">–</div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-1">
            <div id="cpu-bar" class="h-2 rounded-full bg-green-500 transition-all duration-500" style="width:0%"></div>
        </div>
        <div class="text-xs text-gray-400 dark:text-gray-500" id="cpu-detail">Loading…</div>
    </div>
    <!-- Disk -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
        <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-hard-drive text-purple-600 dark:text-purple-400 text-sm"></i>
            </div>
            <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Disk (storage/)</span>
        </div>
        <div class="text-xl font-bold text-gray-900 dark:text-white mb-1" id="disk-label">–</div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-1">
            <div id="disk-bar" class="h-2 rounded-full bg-purple-500 transition-all duration-500" style="width:0%"></div>
        </div>
        <div class="text-xs text-gray-400 dark:text-gray-500" id="disk-detail">Loading…</div>
    </div>
    <!-- Heavy Processes -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4">
        <div class="flex items-center gap-2 mb-2">
            <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-gears text-orange-600 dark:text-orange-400 text-sm"></i>
            </div>
            <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Heavy Procs</span>
        </div>
        <div class="text-xl font-bold text-gray-900 dark:text-white mb-1" id="heavy-count">–</div>
        <div class="text-xs text-gray-400 dark:text-gray-500">ffmpeg, soffice, gs…</div>
    </div>
</div>

<!-- Child Processes Table -->
<div class="mb-6 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300"><i class="fa fa-list-ul mr-2 text-orange-500"></i>Child Processes</h2>
        <span id="procs-count" class="text-xs text-gray-400 dark:text-gray-500">Loading…</span>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm" id="procs-table">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-left">
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">PID</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Name</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Status</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">CPU%</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">RAM (MB)</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Elapsed</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Job ID</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase text-right">Kill</th>
                </tr>
            </thead>
            <tbody id="procs-body" class="divide-y divide-gray-100 dark:divide-gray-800">
                <tr><td colspan="8" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">Loading…</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Active Jobs Table -->
<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300"><i class="fa fa-clock-rotate-left mr-2 text-yellow-500"></i>Active Conversion Jobs</h2>
        <a href="{{ full_url('/admin/conversions') }}?status=started" class="text-xs text-primary dark:text-primary-light hover:underline">View all conversions</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm" id="jobs-table">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-left">
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Job ID</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Status</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Format</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Elapsed</th>
                    <th class="px-4 py-2 font-semibold text-gray-600 dark:text-gray-400 text-xs uppercase">Started At</th>
                </tr>
            </thead>
            <tbody id="jobs-body" class="divide-y divide-gray-100 dark:divide-gray-800">
                <tr><td colspan="5" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">Loading…</td></tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
var HEALTH_URL    = '{{ full_url("/admin/system/health") }}';
var KILL_PID_URL  = '{{ full_url("/admin/system/kill-pid") }}';
var CLEAR_RAM_URL = '{{ full_url("/admin/system/clear-ram") }}';

function fmtSecs(s) {
    s = Math.max(0, Math.round(s));
    if (s < 60) return s + 's';
    if (s < 3600) return Math.floor(s/60) + 'm ' + (s%60) + 's';
    return Math.floor(s/3600) + 'h ' + Math.floor((s%3600)/60) + 'm';
}

function barColor(pct) {
    if (pct >= 90) return 'bg-red-500';
    if (pct >= 70) return 'bg-orange-500';
    if (pct >= 50) return 'bg-yellow-500';
    return 'bg-green-500';
}

function setBar(barId, labelId, pct, labelText) {
    var bar = document.getElementById(barId);
    var lbl = document.getElementById(labelId);
    bar.style.width = Math.min(100, pct) + '%';
    bar.className = 'h-2 rounded-full transition-all duration-500 ' + barColor(pct);
    if (lbl) lbl.textContent = labelText;
}

function showToast(ok, lines) {
    var msg = Array.isArray(lines) ? lines.join('<br>') : String(lines);
    var t = document.getElementById('toast');
    var ti = document.getElementById('toast-inner');
    if (ok) {
        ti.className = 'rounded-xl shadow-lg border px-4 py-3 text-sm font-medium flex items-start gap-3 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300';
        ti.innerHTML = '<i class="fa fa-circle-check mt-0.5 flex-shrink-0"></i><span>' + msg + '</span>';
    } else {
        ti.className = 'rounded-xl shadow-lg border px-4 py-3 text-sm font-medium flex items-start gap-3 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300';
        ti.innerHTML = '<i class="fa fa-circle-xmark mt-0.5 flex-shrink-0"></i><span>' + msg + '</span>';
    }
    t.classList.remove('hidden');
    clearTimeout(window._toastTimer);
    window._toastTimer = setTimeout(function() { t.classList.add('hidden'); }, 5000);
}

function renderData(d) {
    // RAM
    setBar('ram-bar', 'ram-label', d.ram.percent, d.ram.percent + '%');
    document.getElementById('ram-detail').textContent =
        d.ram.used_mb.toFixed(0) + ' MB used / ' + d.ram.total_mb.toFixed(0) + ' MB total';

    // CPU
    setBar('cpu-bar', 'cpu-label', d.cpu_percent, d.cpu_percent + '%');
    document.getElementById('cpu-detail').textContent = d.cpu_count + ' logical core(s)';

    // Disk
    setBar('disk-bar', 'disk-label', d.disk.percent, d.disk.percent + '%');
    document.getElementById('disk-detail').textContent =
        d.disk.used_gb.toFixed(2) + ' GB used / ' + d.disk.total_gb.toFixed(2) + ' GB total';

    // Heavy process count card
    document.getElementById('heavy-count').textContent = d.heavy_proc_count !== undefined ? d.heavy_proc_count : (d.heavy_procs || []).length;

    // Heavy Processes table (primary list) + non-heavy child procs appended after
    var pb = document.getElementById('procs-body');
    var heavyProcs = d.heavy_procs || [];
    var otherProcs = d.child_procs || [];
    var procs = heavyProcs.concat(otherProcs);
    document.getElementById('procs-count').textContent = heavyProcs.length + ' heavy, ' + otherProcs.length + ' other child process(es)';
    if (!procs.length) {
        pb.innerHTML = '<tr><td colspan="8" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">No child processes running.</td></tr>';
    } else {
        pb.innerHTML = procs.map(function(p) {
            var heavyBadge = p.is_heavy
                ? '<span class="ml-1 inline-block px-1.5 py-0.5 rounded text-[10px] font-bold bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400">heavy</span>'
                : '';
            var statusCls = p.status === 'running' ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500';
            var jobCell = p.job_id
                ? '<span class="font-mono text-[11px] text-primary dark:text-primary-light" title="' + p.job_id + '">' + p.job_id.substring(0,8) + '…</span>'
                : '<span class="text-gray-300 dark:text-gray-600">–</span>';
            return '<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">' +
                '<td class="px-4 py-2 font-mono text-gray-600 dark:text-gray-400">' + p.pid + '</td>' +
                '<td class="px-4 py-2 font-medium text-gray-800 dark:text-gray-200">' + p.name + heavyBadge + '</td>' +
                '<td class="px-4 py-2 text-xs ' + statusCls + '">' + (p.status || '–') + '</td>' +
                '<td class="px-4 py-2 text-gray-600 dark:text-gray-400">' + p.cpu_percent + '%</td>' +
                '<td class="px-4 py-2 text-gray-600 dark:text-gray-400">' + p.memory_mb + '</td>' +
                '<td class="px-4 py-2 text-gray-500 dark:text-gray-400">' + fmtSecs(p.elapsed_seconds) + '</td>' +
                '<td class="px-4 py-2">' + jobCell + '</td>' +
                '<td class="px-4 py-2 text-right">' +
                    '<button class="btn-kill-pid px-3 py-1 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 text-xs font-medium transition-all" data-pid="' + p.pid + '" title="Kill PID ' + p.pid + '">' +
                        '<i class="fa fa-xmark mr-1"></i>Kill' +
                    '</button>' +
                '</td>' +
            '</tr>';
        }).join('');
    }

    // Active Jobs
    var jb = document.getElementById('jobs-body');
    var jobs = d.active_jobs || [];
    if (!jobs.length) {
        jb.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-400 dark:text-gray-500">No active jobs.</td></tr>';
    } else {
        jb.innerHTML = jobs.map(function(j) {
            var statusCls = j.status === 'started'
                ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400';
            var fmt = (j.input_format || '–') + ' → ' + (j.output_format || '–');
            return '<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">' +
                '<td class="px-4 py-2 font-mono text-xs text-gray-500 dark:text-gray-400 max-w-[160px] truncate" title="' + (j.id || '') + '">' + (j.id || '').substring(0, 16) + '…</td>' +
                '<td class="px-4 py-2"><span class="inline-block px-2 py-0.5 rounded text-xs font-medium ' + statusCls + '">' + (j.status || '–') + '</span></td>' +
                '<td class="px-4 py-2 text-gray-600 dark:text-gray-400 uppercase text-xs">' + fmt + '</td>' +
                '<td class="px-4 py-2 text-gray-500 dark:text-gray-400 font-mono">' + fmtSecs(j.elapsed_seconds) + '</td>' +
                '<td class="px-4 py-2 text-gray-500 dark:text-gray-400 text-xs">' + (j.created_at || '–') + '</td>' +
            '</tr>';
        }).join('');
    }

    document.getElementById('last-updated').textContent = 'Updated ' + new Date().toLocaleTimeString();
}

function loadHealth() {
    $.getJSON(HEALTH_URL, function(d) {
        if (d.ok) renderData(d);
        else showToast(false, 'Health API error: ' + d.error);
    }).fail(function() {
        showToast(false, 'Could not reach health API.');
    });
}

$(function() {
    loadHealth();
    var timer = setInterval(loadHealth, 10000);

    $('#btn-refresh').on('click', function() {
        clearInterval(timer);
        loadHealth();
        timer = setInterval(loadHealth, 10000);
    });

    $('#btn-clear-ram').on('click', function() {
        var btn = $(this);
        window.ocConfirm('Clear RAM and kill stuck jobs?\n\n\u2022 All heavy converter processes (FFmpeg, LibreOffice, etc.) will be terminated\n\u2022 Stuck jobs will be marked as failed\n\u2022 RAM caches will be freed\n\u2022 Any in-progress conversions will be lost', function() {
        btn.prop('disabled', true).text('Clearing…');
        $.post(CLEAR_RAM_URL, {}, function(res) {
            btn.prop('disabled', false).html('<i class="fa fa-memory mr-1"></i>Clear RAM &amp; Kill Stuck');
            if (res.ok) {
                showToast(true, res.steps || ['Done.']);
            } else {
                showToast(false, res.error || 'Unknown error');
            }
            loadHealth();
        }, 'json').fail(function() {
            btn.prop('disabled', false).html('<i class="fa fa-memory mr-1"></i>Clear RAM &amp; Kill Stuck');
            showToast(false, 'Request failed.');
        });
        }); /* end ocConfirm */
    });

    $(document).on('click', '.btn-kill-pid', function() {
        var pid = $(this).data('pid');
        var btn = $(this);
        window.ocConfirm('Kill process ' + pid + '?\n\n\u2022 The process will be immediately terminated\n\u2022 Any work it was doing will be lost', function() {
        btn.prop('disabled', true).text('Killing…');
        $.post(KILL_PID_URL, {pid: pid}, function(res) {
            if (res.ok) {
                btn.closest('tr').fadeOut(400, function() { $(this).remove(); });
                var msg = res.message;
                if (res.job_id) msg += '<br><span class="font-mono text-xs opacity-75">Job ' + res.job_id.substring(0,8) + '… marked failed</span>';
                showToast(true, msg);
                loadHealth();
            } else {
                showToast(false, 'Error: ' + res.error);
                btn.prop('disabled', false).html('<i class="fa fa-xmark mr-1"></i>Kill');
            }
        }, 'json').fail(function() {
            showToast(false, 'Request failed.');
            btn.prop('disabled', false).html('<i class="fa fa-xmark mr-1"></i>Kill');
        });
        }); /* end ocConfirm */
    });
});
</script>
{% endblock %}