{% extends spa_base or "base.html"%}
{% block title %}Status{% endblock %}
{% block extra_head %}
<style>
    .st-wrap { max-width: 620px; margin: 0 auto; }
    .st-hero {
        display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        background: linear-gradient(135deg, rgba(229,9,20,0.06), var(--bg-card));
        border: 1px solid var(--border); border-radius: 18px; padding: 24px; margin-bottom: 16px;
    }
    .st-face {
        width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px;
        display: flex; align-items: center; justify-content: center; font-size: 1.6em;
        background: rgba(107,114,128,0.18); border: 1px solid var(--border); color: #9ca3af;
    }
    .st-face[data-s="ok"] { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.4); color: #4ade80; }
    .st-face[data-s="attention"] { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.4); color: #fbbf24; }
    .st-face[data-s="down"] { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.45); color: #f87171; }
    .st-face[data-s="maintenance"] { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.4); color: #c4b5fd; }
    .st-hero-main { flex: 1 1 260px; min-width: 0; }
    .st-hero h1 { margin: 0 0 6px; font-size: 1.3em; font-weight: 700; color: var(--text-primary); }
    .st-detail { color: var(--text-muted); font-size: 0.86em; line-height: 1.6; }
    .st-when { font-size: 0.76em; color: var(--text-muted); margin-top: 8px; }

    .st-item {
        display: flex; align-items: center; gap: 12px; padding: 15px 16px;
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-md); text-decoration: none; transition: var(--transition);
    }
    .st-item:hover { border-color: var(--border-hover); }
    .st-item .dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; background: #6b7280; }
    .st-item b { flex: 1 1 auto; color: var(--text-primary); font-size: 0.92em; font-weight: 600; }
    .st-item .side { color: var(--text-muted); font-size: 0.78em; white-space: nowrap; }
    .st-item[data-s="ok"] .dot { background: #22c55e; }
    .st-item[data-s="ok"] .side { color: #4ade80; }
    .st-item[data-s="attention"] .dot { background: #f59e0b; }
    .st-item[data-s="attention"] .side { color: #fbbf24; }
    .st-item[data-s="down"] .dot { background: #ef4444; }
    .st-item[data-s="down"] .side { color: #f87171; }
    .st-item[data-s="maintenance"] .side { color: #c4b5fd; }
    .st-stack { display: grid; gap: 10px; }
    .st-title {
        margin: 22px 0 12px; font-size: 0.78em; letter-spacing: 0.09em; text-transform: uppercase;
        color: var(--text-muted); font-weight: 700;
    }
    .st-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
    .st-row small { color: var(--text-muted); font-size: 0.74em; }
    .st-note { font-size: 0.76em; color: var(--text-muted); text-align: center; margin-top: 14px; line-height: 1.6; }
    .st-skel { height: 52px; border-radius: var(--radius-md); 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: stShine 1.4s infinite; }
    @keyframes stShine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
</style>
{% endblock %}
{% block content %}
<div class="st-wrap">
    <div class="st-hero">
        <div class="st-face" data-s="unknown" id="stFace">?</div>
        <div class="st-hero-main">
            <h1 id="stHeadline">Verificando o status...</h1>
            <div class="st-detail" id="stDetail">Isso leva poucos segundos.</div>
            <div class="st-when" id="stWhen"></div>
        </div>
    </div>

    <div class="st-title">Abas</div>
    <div class="st-stack" id="stItems">
        <div class="st-skel"></div>
        <div class="st-skel"></div>
        <div class="st-skel"></div>
    </div>

    <div class="st-row">
        <button type="button" class="btn btn-outline btn-sm" id="stRefresh" onclick="stFetch(true)">Atualizar agora</button>
        <small id="stNext"></small>
    </div>
</div>
<script>
    var stEvery = 60000, stNextAt = 0, stTimer = null, stTick = null;

    function stEsc(s) {
        return String(s === null || s === undefined ? '' : s)
            .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }
    function stClock(iso) {
        try { return new Date(iso).toLocaleString('pt-BR', { hour: '2-digit', minute: '2-digit' }); }
        catch (e) { return ''; }
    }
    function stAgo(ts) {
        if (!ts) return '';
        var m = Math.floor((Date.now() / 1000 - ts) / 60);
        if (m < 1) return 'agora';
        if (m < 60) return 'ha ' + m + ' min';
        if (m < 1440) return 'ha ' + Math.floor(m / 60) + 'h';
        return 'ha ' + Math.floor(m / 1440) + ' dia(s)';
    }
    function stSide(s) {
        return ({ ok: 'No ar', attention: 'Instavel', down: 'Fora do ar',
                  maintenance: 'Manutencao', access: 'Precisa assinar',
                  unknown: 'Verificando' })[s] || '';
    }
    function stFaceText(s) {
        return ({ ok: ':)', attention: ':|', down: 'x(', maintenance: 'i', unknown: '?' })[s] || '?';
    }

    function stFetch(manual) {
        var btn = document.getElementById('stRefresh');
        if (manual && btn) { btn.disabled = true; btn.textContent = 'Verificando...'; }
        fetch('/api/status', { headers: { 'Accept': 'application/json' } })
            .then(function (r) {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then(stRender)
            .catch(function () {
                stApply({ state: 'unknown', headline: 'Nao conseguimos conferir agora',
                          detail: 'Tente atualizar em instantes. Se algo nao abrir, recarregue a pagina.',
                          items: [] });
            })
            .then(function () {
                if (btn) { btn.disabled = false; btn.textContent = 'Atualizar agora'; }
                stSchedule();
            });
    }

    function stRender(d) {
        stEvery = Math.max(30, (d.refresh_seconds || 60) * 1000);
        stApply(d);
        var when = document.getElementById('stWhen');
        if (!when) return;
        var ago = stAgo(d.ts);
        when.textContent = 'Verificado as ' + stClock(d.checked_at) +
            (ago && ago !== 'agora' ? ' (' + ago + ')' : '');
    }

    function stApply(d) {
        var face = document.getElementById('stFace');
        if (!face) return;          // a pagina saiu do ar (navegacao interna): nada a pintar
        var state = d.state || 'unknown';
        face.dataset.s = state;
        face.textContent = stFaceText(state);
        document.getElementById('stHeadline').textContent = d.headline || 'Verificando...';
        document.getElementById('stDetail').textContent = d.detail || '';
        document.getElementById('stItems').innerHTML = (d.items || []).map(function (i) {
            return '<a class="st-item" data-s="' + stEsc(i.state) + '" href="' + stEsc(i.href || '#') + '">' +
                '<span class="dot"></span><b>' + stEsc(i.label) + '</b>' +
                '<span class="side">' + stEsc(stSide(i.state)) + '</span></a>';
        }).join('') || '<div class="st-note">Sem informacoes no momento.</div>';
    }

    function stSchedule() {
        if (!document.getElementById('stFace')) return;   // fora da pagina: para a corrente
        stNextAt = Date.now() + stEvery;
        if (stTick) clearInterval(stTick);
        stTick = setInterval(stCountdown, 1000);
        stCountdown();
        if (stTimer) clearTimeout(stTimer);
        stTimer = setTimeout(function () {
            if (document.visibilityState === 'hidden') { stSchedule(); return; }
            stFetch(false);
        }, stEvery);
    }
    function stCountdown() {
        var alvo = document.getElementById('stNext');
        if (!alvo) return;
        var left = Math.max(0, Math.round((stNextAt - Date.now()) / 1000));
        alvo.textContent = 'Proxima verificacao em ' + left + 's';
    }

    document.addEventListener('DOMContentLoaded', function () {
        stFetch(false);
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState === 'visible') stFetch(false);
        });
    });
</script>
{% endblock %}