{% extends "base.html" %}

{% block title %}Gnomenall Forte | Runtime{% endblock %}

{% block content %}
<section class="section">
    <h2>System / Runtime</h2>
    <p class="stat-label">Агрегирана диагностика за attachment, torrent и проблемни КК.</p>
    <div class="grid two" id="runtime-summary">
        <div class="stat-card"><div class="stat-label">Total items</div><div class="stat-value" id="rt-total">0</div></div>
        <div class="stat-card"><div class="stat-label">Problem items</div><div class="stat-value" id="rt-problems">0</div></div>
        <div class="stat-card"><div class="stat-label">Healthy items</div><div class="stat-value" id="rt-healthy">0</div></div>
        <div class="stat-card"><div class="stat-label">Attachments tracked</div><div class="stat-value" id="rt-attachments">0</div></div>
    </div>
</section>

<section class="section">
    <div class="actions" style="margin-bottom: 12px;">
        <button class="btn secondary" type="button" id="runtime-toggle-problems">Покажи само проблемни</button>
        <button class="btn secondary" type="button" id="runtime-refresh">Опресни</button>
    </div>
    <div id="runtime-list" class="card-list"></div>
</section>
{% endblock %}

{% block scripts %}
<script>
    const runtimeList = document.getElementById('runtime-list');
    const runtimeToggle = document.getElementById('runtime-toggle-problems');
    const runtimeRefresh = document.getElementById('runtime-refresh');
    let runtimeProblemsOnly = false;

    const renderRuntimeEntry = (item) => {
        const attachmentLines = (item.attachments || []).map((entry) => {
            const state = entry.state || '—';
            const role = entry.artifact_role || 'artifact';
            const path = entry.local_path || entry.expected_path || '—';
            const error = entry.last_error ? `<div class="mono">error: ${entry.last_error}</div>` : '';
            return `<div><strong>${role}</strong> - ${state}<div class="mono">${path}</div>${error}</div>`;
        }).join('');
        const torrent = item.torrent
            ? `<div><strong>Torrent</strong> - ${(item.torrent.qb_state || '—')} / ${Math.round(Number(item.torrent.progress || 0) * 100)}%<div class="mono">${item.torrent.content_path || item.torrent.save_path || '—'}</div></div>`
            : '<div><strong>Torrent</strong> - няма runtime запис</div>';
        const badge = item.has_problem
            ? `<span class="badge warn">Problem ${item.problem_count || 1}</span>`
            : `<span class="badge success">Healthy</span>`;
        return `
            <div class="catalog-card">
                <div class="catalog-meta">
                    <div>
                        <h3>${item.title}</h3>
                        <div class="mono">${item.publisher || 'Unknown'} / ${item.id}</div>
                    </div>
                    <div class="actions">${badge}<a class="btn secondary" href="/">Dashboard</a></div>
                    <div class="grid two">
                        <div>${torrent}</div>
                        <div>${attachmentLines || '<div>Няма attachment записи.</div>'}</div>
                    </div>
                </div>
            </div>
        `;
    };

    const renderRuntime = (items) => {
        if (!items.length) {
            runtimeList.innerHTML = '<div class="stat-label">Няма runtime записи за показване.</div>';
            return;
        }
        runtimeList.innerHTML = items.map(renderRuntimeEntry).join('');
    };

    const loadRuntime = async () => {
        const url = runtimeProblemsOnly ? '/api/runtime/problems' : '/api/runtime/overview';
        try {
            const response = await fetch(url);
            const data = await response.json();
            const summary = data.summary || {};
            document.getElementById('rt-total').textContent = String(summary.total_items || 0);
            document.getElementById('rt-problems').textContent = String(summary.problem_items || 0);
            document.getElementById('rt-healthy').textContent = String(summary.healthy_items || 0);
            document.getElementById('rt-attachments').textContent = String(summary.attachments_total || 0);
            renderRuntime(data.items || []);
            runtimeToggle.textContent = runtimeProblemsOnly ? 'Покажи всички' : 'Покажи само проблемни';
        } catch (err) {
            window.GNOMENALL_UI.pushLocalNotice('error', 'Runtime overview load failed');
        }
    };

    runtimeToggle.addEventListener('click', async () => {
        runtimeProblemsOnly = !runtimeProblemsOnly;
        await loadRuntime();
    });
    runtimeRefresh.addEventListener('click', loadRuntime);
    loadRuntime();
    setInterval(loadRuntime, 8000);
</script>
{% endblock %}