{% extends spa_base or "base.html"%}
{% block title %}Admin - Status tecnico{% endblock %}
{% block extra_head %}
<style>
    .stx-wrap { max-width: 1180px; margin: 0 auto; }
    .stx-hero {
        display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
        background: linear-gradient(135deg, rgba(229,9,20,0.06), var(--bg-card));
        border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
        padding: 22px 24px; margin-bottom: 18px;
    }
    .stx-hero-main { flex: 1 1 320px; min-width: 0; }
    .stx-hero h1 { margin: 0 0 6px; font-size: 1.45em; font-weight: 700; color: var(--text-primary); }
    .stx-hero-sub { color: var(--text-muted); font-size: 0.85em; line-height: 1.6; }

    .stx-dot {
        display: inline-block; width: 12px; height: 12px; border-radius: 50%;
        margin-right: 8px; vertical-align: middle; background: #6b7280;
    }
    .stx-dot.live { animation: stxPulse 2.4s infinite; }
    @keyframes stxPulse {
        0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
        70%  { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
        100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    }
    .stx-pill {
        display: inline-flex; align-items: center; font-weight: 700; font-size: 0.95em;
        padding: 7px 14px; border-radius: 999px; border: 1px solid transparent;
    }
    .stx-pill[data-s="ok"]         { background: rgba(34,197,94,0.14);  color: #4ade80; border-color: rgba(34,197,94,0.4); }
    .stx-pill[data-s="degraded"]   { background: rgba(245,158,11,0.14); color: #fbbf24; border-color: rgba(245,158,11,0.4); }
    .stx-pill[data-s="down"]       { background: rgba(239,68,68,0.16);  color: #f87171; border-color: rgba(239,68,68,0.45); }
    .stx-pill[data-s="maintenance"]{ background: rgba(167,139,250,0.14);color: #c4b5fd; border-color: rgba(167,139,250,0.4); }
    .stx-pill[data-s="unknown"]    { background: rgba(107,114,128,0.16);color: #9ca3af; border-color: rgba(107,114,128,0.4); }

    .stx-chip {
        display: inline-flex; align-items: center; font-size: 0.7em; font-weight: 600;
        padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em;
    }
    .stx-chip[data-s="ok"]          { background: rgba(34,197,94,0.15); color: #4ade80; }
    .stx-chip[data-s="degraded"]    { background: rgba(245,158,11,0.15); color: #fbbf24; }
    .stx-chip[data-s="down"]        { background: rgba(239,68,68,0.16); color: #f87171; }
    .stx-chip[data-s="maintenance"] { background: rgba(167,139,250,0.16); color: #c4b5fd; }
    .stx-chip[data-s="access"]      { background: rgba(59,130,246,0.16); color: #93c5fd; }
    .stx-chip[data-s="unknown"]     { background: rgba(107,114,128,0.18); color: #9ca3af; }

    .stx-counters { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
    .stx-counter b { display: block; font-size: 1.3em; color: var(--text-primary); font-weight: 700; }
    .stx-counter span { font-size: 0.72em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

    .stx-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
    .stx-ring { position: relative; width: 54px; height: 54px; }
    .stx-ring svg { transform: rotate(-90deg); }
    .stx-ring b {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font-size: 0.78em; color: var(--text-muted); font-weight: 600;
    }

    .stx-banner {
        display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
        border-radius: var(--radius-md); margin-bottom: 18px; font-size: 0.86em;
        border: 1px solid rgba(245,158,11,0.45); background: rgba(245,158,11,0.08); color: #fde68a;
    }
    .stx-banner[data-s="down"] { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.1); color: #fecaca; }
    .stx-banner[data-s="maintenance"] { border-color: rgba(167,139,250,0.45); background: rgba(167,139,250,0.1); color: #ddd6fe; }
    .stx-banner b { display: block; margin-bottom: 3px; }

    .stx-card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-md); padding: 16px 18px; transition: var(--transition);
    }
    .stx-card:hover { border-color: var(--border-hover); }
    .stx-card h3 { margin: 0 0 4px; font-size: 0.92em; color: var(--text-primary); font-weight: 600; }
    .stx-card p { margin: 0; font-size: 0.78em; color: var(--text-muted); line-height: 1.5; }
    .stx-card .stx-meta { margin-top: 10px; font-size: 0.72em; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

    .stx-title {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin: 26px 0 12px; font-size: 0.78em; letter-spacing: 0.09em; text-transform: uppercase;
        color: var(--text-muted); font-weight: 700;
    }
    .stx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
    .stx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
    .stx-stack { display: grid; gap: 12px; }

    .stx-table { width: 100%; border-collapse: collapse; font-size: 0.82em; }
    .stx-table th {
        text-align: left; color: var(--text-muted); font-weight: 600; font-size: 0.85em;
        text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 10px; border-bottom: 1px solid var(--border);
    }
    .stx-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-primary); vertical-align: middle; }
    .stx-table tr:last-child td { border-bottom: 0; }
    .stx-table td.muted { color: var(--text-muted); font-size: 0.9em; }
    .stx-table a { color: var(--text-primary); text-decoration: none; }
    .stx-table a:hover { color: var(--primary); }

    .stx-chart { width: 100%; height: 108px; display: block; overflow: visible; }
    .stx-chart-bar { fill: var(--primary); opacity: 0.75; transition: opacity .2s; }
    .stx-chart-bar:hover { opacity: 1; }
    .stx-chart-bar.warn { fill: #f59e0b; }
    .stx-chart-bar.bad { fill: #ef4444; }
    .stx-chart-ax { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
    .stx-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.7em; color: var(--text-muted); margin-top: 10px; }
    .stx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

    .stx-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.78em; color: var(--text-muted); }
    .stx-bar-track { flex: 1 1 auto; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; }
    .stx-bar-fill { height: 100%; border-radius: 999px; background: #22c55e; }
    .stx-bar-fill.warn { background: #f59e0b; }
    .stx-bar-fill.bad { background: #ef4444; }

    .stx-inc { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.8em; }
    .stx-inc:last-child { border-bottom: 0; }
    .stx-inc .t { color: var(--text-muted); white-space: nowrap; font-size: 0.9em; }
    .stx-inc .m { color: var(--text-primary); flex: 1 1 auto; min-width: 0; word-break: break-word; }
    .stx-empty { text-align: center; color: var(--text-muted); font-size: 0.85em; padding: 22px 10px; }
    .stx-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.12), rgba(255,255,255,0.05)); background-size: 300% 100%; animation: stxShine 1.4s infinite; }
    @keyframes stxShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    .stx-note { font-size: 0.74em; color: var(--text-muted); margin-top: 10px; line-height: 1.6; }
    .stx-err { display: none; }
    .stx-kv { font-size: 0.8em; }
    .stx-kv div { display: flex; gap: 8px; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .stx-kv div:last-child { border-bottom: 0; }
    .stx-kv span { color: var(--text-muted); }
    .stx-kv b { color: var(--text-primary); font-weight: 600; text-align: right; word-break: break-all; }
    .stx-log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72em; color: #d1d5db;
              background: rgba(0,0,0,0.28); border-radius: 8px; padding: 10px 12px; margin-top: 8px;
              white-space: pre-wrap; word-break: break-word; max-height: 230px; overflow: auto; }
    .stx-hosts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .stx-hosts code { font-size: 0.72em; background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 6px; color: var(--text-primary); }
    @media (max-width: 720px) {
        .stx-table thead { display: none; }
        .stx-table, .stx-table tbody, .stx-table tr, .stx-table td { display: block; width: 100%; }
        .stx-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 6px 4px; background: var(--bg-card); }
        .stx-table td { border: 0; padding: 6px 12px; }
        .stx-table td::before { content: attr(data-l); display: block; font-size: 0.68em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    }
</style>
{% endblock %}
{% block content %}
<div class="stx-wrap">
    <div class="stx-hero">
        <div class="stx-hero-main">
            <h1>Status tecnico</h1>
            <div class="stx-hero-sub" id="stxSummary"><span class="stx-skel" style="display:inline-block;width:240px;"></span></div>
            <div class="stx-counters" id="stxCounters"></div>
        </div>
        <div class="stx-actions">
            <span class="stx-pill" data-s="unknown" id="stxPill"><span class="stx-dot" id="stxDot"></span>Verificando...</span>
            <div class="stx-ring" title="Proxima verificacao automatica">
                <svg width="54" height="54" viewBox="0 0 54 54">
                    <circle cx="27" cy="27" r="23" fill="none" stroke="rgba(255,255,255,0.09)" stroke-width="4"></circle>
                    <circle id="stxRingArc" cx="27" cy="27" r="23" fill="none" stroke="var(--primary)" stroke-width="4"
                            stroke-linecap="round" stroke-dasharray="144.5" stroke-dashoffset="0"></circle>
                </svg>
                <b id="stxCount">60</b>
            </div>
            <div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;">
                <a class="btn btn-outline btn-sm" href="/admin">Voltar ao painel</a>
                <a class="btn btn-outline btn-sm" href="/status">Pagina do cliente</a>
                <button type="button" class="btn btn-outline btn-sm" id="stxRefresh" onclick="stxFetch(true)">Atualizar</button>
            </div>
        </div>
    </div>

    <div class="stx-banner stx-err" data-s="down" id="stxErrorBanner" style="display:none;">
        <div><b>Falha ao carregar o relatorio.</b>
            <span id="stxErrorMsg"></span>
            <button type="button" class="btn btn-outline btn-sm" onclick="stxFetch(true)" style="margin-left:10px;">Tentar de novo</button>
        </div>
    </div>
    <div id="stxBanner"></div>

    <div class="stx-title"><span>Servicos</span><span id="stxServicesStamp" class="stx-note" style="margin:0;"></span></div>
    <div class="stx-grid" id="stxServices">
        <div class="stx-card"><div class="stx-skel" style="width:60%;"></div><div class="stx-skel" style="width:90%;margin-top:10px;"></div></div>
        <div class="stx-card"><div class="stx-skel" style="width:50%;"></div><div class="stx-skel" style="width:80%;margin-top:10px;"></div></div>
        <div class="stx-card"><div class="stx-skel" style="width:65%;"></div><div class="stx-skel" style="width:85%;margin-top:10px;"></div></div>
        <div class="stx-card"><div class="stx-skel" style="width:55%;"></div><div class="stx-skel" style="width:75%;margin-top:10px;"></div></div>
    </div>

    <div class="stx-title"><span>Abas e conteudo</span></div>
    <div class="stx-card" style="padding:6px 12px;">
        <table class="stx-table">
            <thead><tr><th>Aba</th><th>Status</th><th>Conteudo</th><th>Visivel</th><th>Ultima atualizacao</th></tr></thead>
            <tbody id="stxSections"><tr><td colspan="5"><div class="stx-skel" style="width:70%;"></div></td></tr></tbody>
        </table>
    </div>

    <div class="stx-title"><span>Desempenho</span></div>
    <div class="stx-stack">
        <div class="stx-card">
            <h3>Tempo de resposta <span class="stx-note" style="display:inline;margin:0;">ultima hora · 1 ponto por minuto</span></h3>
            <svg class="stx-chart" id="stxChartLat" viewBox="0 0 600 108" preserveAspectRatio="none"></svg>
            <div class="stx-legend">
                <span><i style="background:#22c55e;"></i>ate 250 ms</span>
                <span><i style="background:#f59e0b;"></i>250 a 800 ms</span>
                <span><i style="background:#ef4444;"></i>acima de 800 ms</span>
            </div>
        </div>
        <div class="stx-card">
            <h3>Disponibilidade por hora <span class="stx-note" style="display:inline;margin:0;">ultimas 24 horas</span></h3>
            <svg class="stx-chart" id="stxChartHour" viewBox="0 0 600 108" preserveAspectRatio="none"></svg>
        </div>
        <div class="stx-card">
            <h3>Disponibilidade por dia <span class="stx-note" style="display:inline;margin:0;">ultimos 14 dias</span></h3>
            <svg class="stx-chart" id="stxChartDay" viewBox="0 0 600 108" preserveAspectRatio="none"></svg>
            <div class="stx-legend" id="stxDayStats"></div>
        </div>
    </div>

    <div class="stx-title"><span>Saude do catalogo</span></div>
    <div class="stx-stack" id="stxHealth"></div>

    <div class="stx-title"><span>Tarefas agendadas</span></div>
    <div class="stx-card" style="padding:6px 12px;">
        <table class="stx-table">
            <thead><tr><th>Tarefa</th><th>Intervalo</th><th>Ultima execucao</th><th>Ultimo resultado</th><th>Status</th></tr></thead>
            <tbody id="stxJobs"><tr><td colspan="5"><div class="stx-skel" style="width:60%;"></div></td></tr></tbody>
        </table>
        <div class="stx-note">Amostragem manual: <code>/cron/status-sample</code> · fila do catalogo:
            <code>/cron/update-m3u</code>. Uma tarefa aparece <b>atrasada</b> quando o ultimo registro esta muito
            alem do intervalo esperado.</div>
    </div>

    <div class="stx-title"><span>Fontes, arquivos e ambiente</span></div>
    <div class="stx-cols">
        <div class="stx-card">
            <h3>Fontes do catalogo</h3>
            <div id="stxSources" class="stx-note" style="margin-top:6px;">-</div>
        </div>
        <div class="stx-card">
            <h3>Amostragem e arquivos</h3>
            <div id="stxFiles" class="stx-kv"></div>
        </div>
        <div class="stx-card">
            <h3>Estado do cron</h3>
            <div id="stxCronState" class="stx-kv"></div>
        </div>
        <div class="stx-card">
            <h3>Catalogo e app</h3>
            <div id="stxCatalog" class="stx-kv"></div>
        </div>
    </div>

    <div class="stx-title"><span>Incidentes e eventos</span></div>
    <div class="stx-cols">
        <div class="stx-card">
            <h3>Historico de incidentes (7 dias)</h3>
            <div id="stxIncidents"><div class="stx-skel" style="width:80%;"></div></div>
        </div>
        <div class="stx-card">
            <h3>Eventos registrados</h3>
            <div id="stxEvents"><div class="stx-skel" style="width:70%;"></div></div>
        </div>
    </div>

    <div class="stx-title"><span>Detalhes do administrador</span></div>
    <div class="stx-card" id="stxAdmin"></div>

    <div class="stx-note">
        Pagina tecnica: metricas de banco, latencia, cron, hosts das fontes e cauda de logs ficam aqui e nao aparecem
        na pagina que o cliente ve (<code>/status</code>). Amostra a cada 1 minuto; retensao de 14 dias.
    </div>
</div>
{% if boot %}<script id="stxBoot" type="application/json">{{ boot|tojson }}</script>{% endif %}
<script>
    var STX_REFRESH_MS = 60000, STX_RING_LEN = 144.5;
    var stxNextAt = 0, stxTimer = null, stxTick = null, stxLoaded = false;

    function stxEsc(s) {
        return String(s === null || s === undefined ? '' : s)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }
    function stxLabel(s) {
        return ({ ok: 'Operacional', degraded: 'Atencao', down: 'Indisponivel',
                  maintenance: 'Em manutencao', access: 'Acesso necessario',
                  unknown: 'Sem dados' })[s] || s;
    }
    function stxRelative(ts) {
        if (!ts) return 'sem registro';
        var m = Math.floor((Date.now() / 1000 - ts) / 60);
        if (m < 1) return 'agora';
        if (m < 60) return m + ' min atras';
        var h = Math.floor(m / 60);
        if (h < 24) return h + 'h ' + (m % 60) + 'min atras';
        return Math.floor(h / 24) + 'd ' + (h % 24) + 'h atras';
    }
    function stxClock(iso) {
        try {
            return new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit',
                                                           hour: '2-digit', minute: '2-digit' });
        } catch (e) { return iso || ''; }
    }
    function stxChip(s) {
        return '<span class="stx-chip" data-s="' + stxEsc(s) + '">' + stxEsc(stxLabel(s)) + '</span>';
    }
    function stxK(label, value) {
        return '<div><span>' + stxEsc(label) + '</span><b>' + stxEsc(value == null || value === '' ? '-' : value) + '</b></div>';
    }

    function stxFail(msg) {
        var b = document.getElementById('stxErrorBanner');
        if (b) b.style.display = 'flex';
        var e = document.getElementById('stxErrorMsg');
        if (e) e.textContent = ' ' + msg;
    }

    function stxBoot() {
        var el = document.getElementById('stxBoot');
        if (!el) return null;
        try {
            var d = JSON.parse(el.textContent || '');
            return (d && d.overall) ? d : null;
        } catch (e) { return null; }
    }

    function stxFetch(manual) {
        var btn = document.getElementById('stxRefresh');
        if (manual && btn) { btn.disabled = true; btn.textContent = 'Verificando...'; }
        fetch('/api/admin/status', { headers: { 'Accept': 'application/json' } })
            .then(function (r) {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.text().then(function (txt) {
                    try { return JSON.parse(txt); }
                    catch (err) { throw new Error('resposta nao e JSON (pagina de login ou erro do servidor)'); }
                });
            })
            .then(function (d) {
                try {
                    stxRender(d);
                    stxSchedule();
                    document.getElementById('stxErrorBanner').style.display = 'none';
                } catch (err) {
                    stxFail('erro ao montar o painel: ' + (err && err.message ? err.message : err));
                    stxSchedule();
                }
            })
            .catch(function (e) {
                stxFail((e && e.message ? e.message : 'erro') + '. A sessao de admin expirou ou o servidor devolveu erro.');
                stxSchedule();
            })
            .then(function () {
                if (btn) { btn.disabled = false; btn.textContent = 'Atualizar'; }
            });
    }

    function stxSchedule() {
        stxNextAt = Date.now() + STX_REFRESH_MS;
        if (stxTick) clearInterval(stxTick);
        stxTick = setInterval(stxCountdown, 1000);
        stxCountdown();
        if (stxTimer) clearTimeout(stxTimer);
        stxTimer = setTimeout(function () {
            if (document.visibilityState === 'hidden') { stxSchedule(); return; }
            stxFetch(false);
        }, STX_REFRESH_MS);
    }
    function stxCountdown() {
        var left = Math.max(0, Math.round((stxNextAt - Date.now()) / 1000));
        var el = document.getElementById('stxCount'), arc = document.getElementById('stxRingArc');
        if (el) el.textContent = left;
        if (arc) arc.setAttribute('stroke-dashoffset', String(STX_RING_LEN * (1 - left / (STX_REFRESH_MS / 1000))));
    }

    function stxRender(d) {
        var overall = d.overall || 'unknown';
        var pill = document.getElementById('stxPill');
        pill.dataset.s = overall;
        pill.innerHTML = '<span class="stx-dot live" style="background:' +
            (overall === 'ok' ? '#22c55e' : overall === 'degraded' ? '#f59e0b' :
             overall === 'down' ? '#ef4444' : '#a78bfa') + '"></span>' + stxEsc(stxLabel(overall));

        document.getElementById('stxSummary').innerHTML =
            'Verificado em <b>' + stxEsc(stxClock(d.checked_at)) + '</b> (' + stxEsc(stxRelative(d.ts)) + ')<br>' +
            'uptime <b>' + stxEsc(d.uptime_label || '-') + '</b> · resposta <b>' +
            stxEsc(d.response_ms != null ? d.response_ms + ' ms' : '-') + '</b> · v<b>' +
            stxEsc((d.admin && d.admin.catalogo && d.admin.catalogo.app_version) || d.app_version || '-') + '</b>';

        var m = d.metrics || {}, dayStats = (d.history && d.history.daily) || [];
        var up = 0, samples = 0;
        dayStats.forEach(function (x) { up += (x.uptime / 100) * x.samples; samples += x.samples; });
        var counters = [['Canais', m.canais], ['Filmes', m.filmes], ['Series', m.series],
                        ['Episodios', m.episodios], ['Assistindo agora', m.assistindo_agora],
                        ['Sessoes 24h', m.sessoes_ativas], ['Usuarios', m.usuarios],
                        ['Disponibilidade', samples ? (Math.round((up / samples) * 1000) / 10).toFixed(1) + '%' : '-']];
        document.getElementById('stxCounters').innerHTML = counters.map(function (c) {
            return '<div class="stx-counter"><b>' + stxEsc(c[1] != null ? c[1] : '-') + '</b><span>' +
                stxEsc(c[0]) + '</span></div>';
        }).join('');

        var stats = document.getElementById('stxDayStats');
        if (stats) {
            stats.textContent = samples
                ? samples + ' amostras · disponibilidade ' + (Math.round((up / samples) * 1000) / 10).toFixed(1) +
                  '% · pior dia ' + (dayStats.reduce(function (a, x) { return x.uptime < a.uptime ? x : a; }).day || '-') +
                  ' · ' + dayStats.reduce(function (t, x) { return t + (x.attention || 0); }, 0) + ' amostra(s) com atencao'
                : 'Sem amostras nas ultimas 24h.';
        }

        var maint = d.maintenance || {}, b = document.getElementById('stxBanner');
        if (overall === 'down') {
            b.innerHTML = '<div class="stx-banner" data-s="down"><div><b>Interrupcao detectada</b>' +
                stxEsc((d.services || []).filter(function (s) { return s.status === 'down'; })
                    .map(function (s) { return s.label + ': ' + s.detail; }).join(' · ') ||
                 'Algum servico nao esta respondendo.') + '</div></div>';
        } else if (maint.enabled) {
            b.innerHTML = '<div class="stx-banner" data-s="maintenance"><div><b>Manutencao ativa</b>' +
                stxEsc(maint.message) + (maint.scope === 'global' ? ' (todo o sistema)' :
                 maint.scope === 'secoes' ? ' (areas: ' + stxEsc((maint.sections || []).join(', ')) + ')' :
                 ' (paginas: ' + stxEsc((maint.pages || []).join(', ')) + ')') +
                (maint.active_for_you ? '' : ' — administradores liberados') + '</div></div>';
        } else if (overall === 'degraded') {
            b.innerHTML = '<div class="stx-banner"><div><b>Servicos abaixo do ideal</b>' +
                stxEsc((d.services || []).filter(function (s) { return s.status === 'degraded'; })
                    .map(function (s) { return s.label + ': ' + s.detail; }).join(' · ')) + '</div></div>';
        } else { b.innerHTML = ''; }

        var svcs = d.services || [];
        document.getElementById('stxServices').innerHTML = svcs.length ? svcs.map(function (s) {
            return '<div class="stx-card"><h3>' + stxEsc(s.label) + '</h3>' +
                '<div style="margin:6px 0 8px;">' + stxChip(s.status) + '</div>' +
                '<p>' + stxEsc(s.detail || '') + '</p>' +
                '<div class="stx-meta">' +
                (s.latency_ms != null ? '<span>' + stxEsc(s.latency_ms) + ' ms</span>' : '') +
                (s.updated_label && s.updated_label !== 'sem registro' ? '<span>atualizado: ' + stxEsc(s.updated_label) + '</span>' : '') +
                '</div></div>';
        }).join('') : '<div class="stx-empty">Sem dados de servicos.</div>';
        document.getElementById('stxServicesStamp').textContent = svcs.length + ' verificados';

        document.getElementById('stxSections').innerHTML = (d.sections || []).map(function (s) {
            return '<tr>' +
                '<td data-l="Aba"><a href="' + stxEsc(s.path) + '">' + stxEsc(s.label) + '</a></td>' +
                '<td data-l="Status">' + stxChip(s.status) +
                (s.user_note ? '<div class="stx-note">' + stxEsc(s.user_note) + '</div>' : '') + '</td>' +
                '<td data-l="Conteudo" class="muted">' + stxEsc(s.detail || '') + '</td>' +
                '<td data-l="Visivel" class="muted">' + stxEsc((s.count || 0) + ' / ' + (s.total || 0)) + '</td>' +
                '<td data-l="Atualizacao" class="muted">' + stxEsc(s.updated_label || '-') + '</td></tr>';
        }).join('') || '<tr><td colspan="5" class="muted">Sem dados.</td></tr>';

        stxChartLat(d.history && d.history.samples);
        stxChartBucket('stxChartHour', (d.history && d.history.hourly) || [], 'hour', 24);
        stxChartBucket('stxChartDay', (d.history && d.history.daily) || [], 'day', 14);
        stxHealth(d);
        stxJobs(d.jobs || []);
        stxSources(d.admin || {});
        stxFiles(d.admin || {});
        stxCron(d.admin && d.admin.cron_state);
        stxCatalog(d.admin && d.admin.catalogo, d.admin || {});
        stxIncidents(d.incidents || []);
        stxEvents(d.events || []);
        stxAdmin(d.admin || {});
        stxLoaded = true;
    }

    function stxBarClass(ms) {
        if (ms == null) return '';
        if (ms > 800) return ' bad';
        if (ms > 250) return ' warn';
        return '';
    }
    function stxChartLat(samples) {
        var svg = document.getElementById('stxChartLat');
        samples = samples || [];
        if (!samples.length) { svg.innerHTML = '<text x="300" y="60" fill="#888" font-size="13" text-anchor="middle">Aguardando amostras (1 por minuto)</text>'; return; }
        var W = 600, H = 108, n = samples.length, bw = Math.max(2, (W - 8) / n - 2), max = 0;
        samples.forEach(function (s) { if ((s.lat || 0) > max) max = s.lat || 0; });
        max = Math.max(max, 200);
        var out = '<line class="stx-chart-ax" x1="0" y1="' + (H - 14) + '" x2="' + W + '" y2="' + (H - 14) + '"></line>';
        samples.forEach(function (s, i) {
            var h = Math.max(2, ((s.lat || 0) / max) * (H - 26));
            var x = 4 + i * ((W - 8) / n), y = H - 14 - h;
            out += '<rect class="stx-chart-bar' + stxBarClass(s.lat) + '" x="' + x.toFixed(1) + '" y="' + y.toFixed(1) +
                '" width="' + bw.toFixed(1) + '" height="' + h.toFixed(1) + '" rx="2"><title>' +
                stxEsc(stxClock(new Date(s.ts * 1000).toISOString()) + ' · ' + (s.lat || 0) + ' ms · ' +
                      stxLabel(s.s) + (s.svc && s.svc.length ? ' · ' + s.svc.join(',') : '')) + '</title></rect>';
        });
        out += '<text x="4" y="12" fill="#888" font-size="10">pico ' + Math.round(max) + ' ms</text>';
        svg.innerHTML = out;
    }
    function stxChartBucket(id, rows, keyField, want) {
        var svg = document.getElementById(id);
        rows = rows.slice(-want);
        if (!rows.length) { svg.innerHTML = '<text x="300" y="60" fill="#888" font-size="13" text-anchor="middle">Sem historico</text>'; return; }
        var W = 600, H = 108, n = rows.length, gap = 4, bw = Math.max(4, (W - gap * (n + 1)) / n);
        var out = '<line class="stx-chart-ax" x1="0" y1="' + (H - 18) + '" x2="' + W + '" y2="' + (H - 18) + '"></line>';
        rows.forEach(function (r, i) {
            var up = Math.max(0, Math.min(100, r.uptime));
            var h = Math.max(3, (up / 100) * (H - 30));
            var x = gap + i * (bw + gap), y = H - 18 - h;
            var cls = up >= 99.5 ? '' : up >= 90 ? ' warn' : ' bad';
            var label = String(r[keyField] || '');
            out += '<rect class="stx-chart-bar' + cls + '" x="' + x.toFixed(1) + '" y="' + y.toFixed(1) +
                '" width="' + bw.toFixed(1) + '" height="' + h.toFixed(1) + '" rx="3"><title>' +
                stxEsc(label + ' · ' + up.toFixed(1) + '% · medio ' + (r.avg_ms || 0) + ' ms · ' +
                      (r.down || 0) + ' down / ' + (r.attention || 0) + ' atencao de ' + (r.samples || 0) + ' amostras') +
                '</title></rect>';
            if (id === 'stxChartDay' && label.length >= 10) {
                out += '<text x="' + (x + bw / 2).toFixed(1) + '" y="' + (H - 5) +
                    '" fill="#888" font-size="9" text-anchor="middle">' + stxEsc(label.slice(8, 10)) + '</text>';
            }
        });
        svg.innerHTML = out;
    }

    function stxBar(label, pct, detail) {
        var cls = pct >= 95 ? '' : pct >= 80 ? ' warn' : ' bad';
        return '<div class="stx-bar-row"><span style="flex:0 0 220px;">' + stxEsc(label) + '</span>' +
            '<span class="stx-bar-track"><span class="stx-bar-fill' + cls + '" style="width:' +
            Math.max(2, Math.min(100, pct)).toFixed(1) + '%"></span></span>' +
            '<span style="flex:0 0 46px;text-align:right;">' + Math.round(pct) + '%</span></div>' +
            '<div class="stx-note" style="margin:2px 0 8px;">' + stxEsc(detail || '') + '</div>';
    }
    function stxHealth(d) {
        var m = d.metrics || {};
        var ver = (m.canais_online || 0) + (m.canais_offline || 0);
        var catalogo = (d.sections || []).filter(function (s) {
            return s.key === 'canais' || s.key === 'filmes' || s.key === 'series';
        });
        var tot = 0, vis = 0;
        catalogo.forEach(function (s) { tot += s.total || 0; vis += s.count || 0; });
        document.getElementById('stxHealth').innerHTML =
            stxBar('Canais no ar (health check)', ver ? (m.canais_online / ver) * 100 : 0,
                  ver ? (m.canais_online + ' online · ' + m.canais_offline + ' offline de ' + ver + ' verificados')
                      : 'nenhuma verificacao de saude registrada') +
            stxBar('Conteudo liberado ao usuario', tot ? (vis / tot) * 100 : 0,
                  vis + ' de ' + tot + ' itens visiveis (' + (tot - vis) + ' escondidos por filtro/perfil)') +
            stxBar('Canais com guia (EPG)', m.canais ? Math.min(100, ((m.mappings || 0) / m.canais) * 100) : 0,
                  (m.epg_programas || 0) + ' programas · ' + (m.mappings || 0) + ' de ' + (m.canais || 0) + ' canais mapeados') +
            '<div class="stx-note">Saude: ' + stxEsc(m.canais_online || 0) + ' canais verificados como ativos; ' +
            'guida cobre ' + (m.canais ? Math.round(((m.mappings || 0) / m.canais) * 100) : 0) + '% da lista.' +
            (m.assistindo_agora != null ? ' · assistindo agora ' + m.assistindo_agora : '') + '</div>';
    }
    function stxJobs(jobs) {
        document.getElementById('stxJobs').innerHTML = (jobs || []).map(function (j) {
            return '<tr><td data-l="Tarefa">' + stxEsc(j.label) + '<div class="stx-note" style="margin:0;">' +
                stxEsc(j.key) + '</div></td>' +
                '<td data-l="Intervalo" class="muted">' + stxEsc(stxInterval(j.interval_min)) + '</td>' +
                '<td data-l="Ultima execucao" class="muted">' + stxEsc(stxClock(j.last_run) || 'sem registro') + '</td>' +
                '<td data-l="Atraso" class="muted">' + stxEsc(j.last_run_label || 'sem registro') + '</td>' +
                '<td data-l="Status">' + stxChip(j.status) + '</td></tr>';
        }).join('') || '<tr><td colspan="5" class="muted">Sem tarefas.</td></tr>';
    }
    function stxInterval(min) {
        if (!min) return '-';
        if (min < 60) return min + ' min';
        if (min < 1440) return (min / 60) + ' h';
        return (min / 1440) + ' dia(s)';
    }

    function stxSources(a) {
        var hosts = function (label, list) {
            return '<div class="stx-note" style="margin:8px 0 2px;">' + stxEsc(label) + '</div>' +
                '<div class="stx-hosts">' + ((list || []).map(function (h) { return '<code>' + stxEsc(h) + '</code>'; }).join('') || '<code>-</code>') + '</div>';
        };
        document.getElementById('stxSources').innerHTML =
            '<div class="stx-note" style="margin:0;">Hosts das fontes (credenciais da URL nunca sao exibidas).</div>' +
            hosts('M3U', a.m3u_hosts) + hosts('EPG', a.epg_hosts);
    }
    function stxFiles(a) {
        var f = a.arquivos || {};
        document.getElementById('stxFiles').innerHTML =
            stxK('amostras no arquivo', f.amostras) +
            stxK('retensao', f.retencao_dias ? f.retencao_dias + ' dias' : '-') +
            stxK('janela de amostragem', f.amostragem_segundos ? f.amostragem_segundos + 's' : '-') +
            stxK('historico', f.historico) +
            stxK('estado do cron', f.cron_state) +
            stxK('progresso da fila', f.progresso_m3u) +
            stxK('log da fila', f.log);
    }
    function stxCron(state) {
        var el = document.getElementById('stxCronState');
        var keys = Object.keys(state || {});
        if (!keys.length) { el.innerHTML = '<div><span>nenhum registro de cron</span><b>-</b></div>'; return; }
        el.innerHTML = keys.sort().map(function (k) {
            var iso = typeof state[k] === 'string' ? state[k] : '';
            if (!iso) return stxK(k, '-');
            var ts = Math.floor(new Date(iso).getTime() / 1000);
            return stxK(k, iso.slice(0, 10) + ' ' + iso.slice(11, 16) + ' UTC (' + stxRelative(ts) + ')');
        }).join('');
    }
    function stxCatalog(c, a) {
        c = c || {};
        document.getElementById('stxCatalog').innerHTML =
            stxK('versao do app', c.app_version) +
            stxK('tamanho do APK', c.apk_size) +
            stxK('release', c.release) +
            stxK('horas gratis/dia', c.free_daily_hours) +
            stxK('banco', a.db_size_mb ? a.db_size_mb + ' MB (' + (a.db_file || '') + ')' : a.db_file) +
            stxK('Python', a.python) +
            stxK('chaves de settings', a.settings_keys) +
            stxK('CPANEL_MODE', a.environment || 'vazio');
    }
    function stxIncidents(list) {
        var el = document.getElementById('stxIncidents');
        if (!list.length) { el.innerHTML = '<div class="stx-empty">Nenhum incidente nos ultimos 7 dias.</div>'; return; }
        el.innerHTML = list.slice(0, 40).map(function (i) {
            return '<div class="stx-inc"><span class="t">' + stxEsc(stxClock(i.at)) + '</span>' +
                stxChip(i.level === 'error' ? 'down' : i.level === 'warn' ? 'degraded' : 'unknown') +
                '<span class="m"><b>' + stxEsc(i.service || 'sistema') + '</b> · ' + stxEsc(i.message || '') +
                (i.samples > 1 ? ' (desde ' + stxEsc(stxClock(i.since)) + ', ' + i.samples + ' amostras)' : '') +
                ' <span class="stx-note" style="display:inline;">(' + stxEsc(stxRelative(i.ts)) + ')</span></span></div>';
        }).join('');
    }
    function stxEvents(list) {
        var el = document.getElementById('stxEvents');
        if (!list.length) { el.innerHTML = '<div class="stx-empty">Sem eventos recentes.</div>'; return; }
        el.innerHTML = list.slice(0, 40).map(function (e) {
            return '<div class="stx-inc"><span class="t">' + stxEsc(stxClock(e.at)) + '</span>' +
                stxChip(e.level === 'error' ? 'down' : e.level === 'warn' ? 'degraded' : 'ok') +
                '<span class="m"><b>' + stxEsc(e.service || 'sistema') + '</b> · ' + stxEsc(e.message || '') + '</span></div>';
        }).join('');
    }
    function stxAdmin(a) {
        var box = document.getElementById('stxAdmin');
        var html = '<div class="stx-meta" style="display:flex;gap:22px;flex-wrap:wrap;font-size:0.8em;color:var(--text-muted);">' +
            '<span>usuarios: <b>' + stxEsc(a.usuarios || 0) + '</b></span>' +
            '<span>assinaturas ativas: <b>' + stxEsc(a.ativos || 0) + '</b></span>' +
            '<span>tickets abertos: <b>' + stxEsc(a.tickets_abertos || 0) + '</b></span></div>';
        if (a.last_error_log && a.last_error_log.length) {
            html += '<div class="stx-note" style="margin-top:12px;"><b>erro.log (ultimas linhas)</b>' +
                '<div class="stx-log">' + stxEsc(a.last_error_log.join('\n')) + '</div></div>';
        }
        if (a.last_bg_log && a.last_bg_log.length) {
            html += '<div class="stx-note" style="margin-top:12px;"><b>bg_m3u.log (fila do catalogo)</b>' +
                '<div class="stx-log">' + stxEsc(a.last_bg_log.join('\n')) + '</div></div>';
        }
        box.innerHTML = html;
    }

    document.addEventListener('DOMContentLoaded', function () {
        var inicial = stxBoot();
        if (inicial) {
            try { stxRender(inicial); } catch (err) { /* o fetch abaixo tenta de novo */ }
        }
        stxFetch(false);
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState === 'visible') stxFetch(false);
        });
        setTimeout(function () {
            if (!stxLoaded) {
                stxFail('ainda sem dados do servidor. Confirme a sessao de administrador e entao atualize; ' +
                       'se continuar vazio, o processo Python nao foi reiniciado depois do deploy.');
            }
        }, 12000);
    });
    window.addEventListener('error', function (ev) {
        stxFail('erro de script: ' + (ev && ev.message ? ev.message : 'desconhecido'));
    });
</script>
{% endblock %}