{% extends "base.html" %}
{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Status Serviços SEFAZ - CapeServer{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">
                <i class="bi bi-broadcast text-primary"></i> Status Serviços SEFAZ
            </h2>
            <small class="text-muted">Monitoramento de disponibilidade NF-e e NFC-e</small>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" onclick="atualizarTodos()">
                <i class="bi bi-arrow-clockwise"></i> Atualizar Todos
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-secondary active" id="btnProducao" onclick="mudarAmbiente('producao')">
                    <i class="bi bi-building"></i> Produção
                </button>
                <button type="button" class="btn btn-outline-secondary" id="btnHomologacao" onclick="mudarAmbiente('homologacao')">
                    <i class="bi bi-tools"></i> Homologação
                </button>
            </div>
        </div>
    </div>

    <!-- Legenda -->
    <div class="alert alert-light mb-3 py-2">
        <div class="d-flex gap-4 align-items-center flex-wrap">
            <span><i class="bi bi-circle-fill text-success"></i> Online (Código 107)</span>
            <span><i class="bi bi-circle-fill text-danger"></i> Offline/Erro</span>
            <span><i class="bi bi-circle-fill text-warning"></i> Degradado/Lento</span>
            <span><i class="bi bi-shield-exclamation text-warning"></i> Requer Certificado</span>
            <span><i class="bi bi-circle-fill text-secondary"></i> Não verificado</span>
            <span class="ms-auto text-muted"><i class="bi bi-clock"></i> Atualização automática a cada 60s</span>
        </div>
    </div>

    <!-- Cards de Status por UF -->
    <div class="row g-3" id="containerStatus">
        {% if not ufs_empresas %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                <i class="bi bi-info-circle"></i>
                <strong>Nenhuma empresa cadastrada.</strong><br>
                Cadastre uma empresa com UF definida para monitorar os serviços SEFAZ.
                <br><a href="{{ url_for('empresas') }}" class="btn btn-primary btn-sm mt-2">Ir para Empresas</a>
            </div>
        </div>
        {% endif %}
        
        <!-- Cards apenas para UFs das empresas cadastradas -->
        {% for uf, empresas_uf in ufs_empresas.items() %}
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 card-status shadow-sm" data-uf="{{ uf }}">
                <div class="card-header d-flex justify-content-between align-items-center py-2 bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-geo-alt-fill"></i> {{ uf }}
                    </h5>
                    <button class="btn btn-sm btn-light" onclick="atualizarUF('{{ uf }}')" title="Atualizar">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
                <div class="card-body py-2">
                    <!-- Empresas nesta UF -->
                    <div class="mb-2">
                        {% for emp in empresas_uf %}
                        <div class="d-flex align-items-center small mb-1">
                            {% if emp.tem_certificado %}
                            <i class="bi bi-shield-check text-success me-1" title="Certificado Configurado"></i>
                            {% else %}
                            <i class="bi bi-shield-x text-warning me-1" title="Sem Certificado"></i>
                            {% endif %}
                            {% set nome_empresa_reduzido = empresa_ui.nome(emp) %}
                            <span class="text-truncate" title="{{ empresa_ui.titulo(emp) }}">{{ nome_empresa_reduzido }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    
                    <hr class="my-2">
                    
                    <!-- Status dos Serviços -->
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border rounded p-2 status-nfe" id="status-nfe-{{ uf }}">
                                <i class="bi bi-circle-fill text-secondary"></i>
                                <div class="fw-bold">NF-e</div>
                                <small class="text-muted">Aguardando...</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2 status-nfce" id="status-nfce-{{ uf }}">
                                <i class="bi bi-circle-fill text-secondary"></i>
                                <div class="fw-bold">NFC-e</div>
                                <small class="text-muted">Aguardando...</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer py-1 text-center">
                    <small class="text-muted ultima-atualizacao" id="ultima-{{ uf }}">-</small>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Histórico de Status -->
    <div class="card mt-4">
        <div class="card-header">
            <h6 class="mb-0"><i class="bi bi-clock-history"></i> Histórico de Verificações</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive" style="max-height: 300px;">
                <table class="table table-sm table-hover mb-0">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th>Hora</th>
                            <th>UF</th>
                            <th>Modelo</th>
                            <th>Status</th>
                            <th>Código</th>
                            <th>Mensagem</th>
                            <th>Tempo Médio</th>
                        </tr>
                    </thead>
                    <tbody id="historicoBody">
                        <tr>
                            <td colspan="7" class="text-center text-muted">Nenhuma verificação realizada ainda</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
.card-status {
    transition: all 0.3s ease;
}
.card-status:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.status-nfe, .status-nfce {
    transition: all 0.3s ease;
}
.status-online {
    background-color: #d4edda;
    border-color: #28a745 !important;
}
.status-offline {
    background-color: #f8d7da;
    border-color: #dc3545 !important;
}
.status-warning {
    background-color: #fff3cd;
    border-color: #ffc107 !important;
}
.status-checking {
    opacity: 0.7;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.checking {
    animation: pulse 1s infinite;
}
</style>

<script>
let ambienteAtual = 'producao';
let historicoVerificacoes = [];
let intervaloAtualizacao = null;

// Apenas UFs das empresas cadastradas
const todasUFs = [{% for uf in ufs_empresas.keys() %}'{{ uf }}'{% if not loop.last %}, {% endif %}{% endfor %}];

function mudarAmbiente(ambiente) {
    ambienteAtual = ambiente;
    document.getElementById('btnProducao').classList.toggle('active', ambiente === 'producao');
    document.getElementById('btnHomologacao').classList.toggle('active', ambiente === 'homologacao');
    atualizarTodos();
}

function atualizarUF(uf) {
    const nfeDiv = document.getElementById(`status-nfe-${uf}`);
    const nfceDiv = document.getElementById(`status-nfce-${uf}`);
    const ultimaDiv = document.getElementById(`ultima-${uf}`);
    
    // Marcar como verificando
    nfeDiv.classList.add('checking');
    nfceDiv.classList.add('checking');
    
    fetch(`/api/fiscal/status-sefaz/${uf}?ambiente=${ambienteAtual}`)
        .then(response => response.json())
        .then(data => {
            // Atualizar NF-e
            if (data.nfe) {
                atualizarStatusDiv(nfeDiv, data.nfe, 'NF-e');
                adicionarHistorico(data.nfe);
            }
            
            // Atualizar NFC-e
            if (data.nfce) {
                atualizarStatusDiv(nfceDiv, data.nfce, 'NFC-e');
                adicionarHistorico(data.nfce);
            }
            
            // Atualizar timestamp
            if (ultimaDiv) {
                const agora = new Date();
                ultimaDiv.textContent = `Atualizado: ${agora.toLocaleTimeString('pt-BR')}`;
            }
        })
        .catch(error => {
            console.error(`Erro ao consultar ${uf}:`, error);
            nfeDiv.classList.remove('checking');
            nfceDiv.classList.remove('checking');
        });
}

function atualizarStatusDiv(div, status, modelo) {
    div.classList.remove('checking', 'status-online', 'status-offline', 'status-warning');
    
    const icon = div.querySelector('i');
    const small = div.querySelector('small');
    
    if (status.online === true) {
        div.classList.add('status-online');
        icon.className = 'bi bi-circle-fill text-success';
        small.textContent = 'Operando';
        small.className = 'text-success';
    } else if (status.codigo === 'TIMEOUT') {
        div.classList.add('status-warning');
        icon.className = 'bi bi-circle-fill text-warning';
        small.textContent = 'Timeout';
        small.className = 'text-warning';
    } else if (status.codigo === 'CERT_REQ') {
        div.classList.add('status-warning');
        icon.className = 'bi bi-shield-exclamation text-warning';
        small.textContent = 'Certificado';
        small.className = 'text-warning';
        small.title = 'Configure um certificado digital para verificar';
    } else if (status.online === null) {
        // Status desconhecido
        div.classList.remove('status-online', 'status-offline', 'status-warning');
        icon.className = 'bi bi-question-circle-fill text-secondary';
        small.textContent = status.codigo || 'Desconhecido';
        small.className = 'text-secondary';
    } else {
        div.classList.add('status-offline');
        icon.className = 'bi bi-circle-fill text-danger';
        small.textContent = status.codigo || 'Offline';
        small.className = 'text-danger';
    }
}

function atualizarTodos() {
    todasUFs.forEach((uf, index) => {
        // Escalonar requisições para não sobrecarregar
        setTimeout(() => atualizarUF(uf), index * 500);
    });
}

function adicionarHistorico(status) {
    historicoVerificacoes.unshift(status);
    if (historicoVerificacoes.length > 50) {
        historicoVerificacoes.pop();
    }
    renderizarHistorico();
}

function renderizarHistorico() {
    const tbody = document.getElementById('historicoBody');
    
    if (historicoVerificacoes.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">Nenhuma verificação realizada ainda</td></tr>';
        return;
    }
    
    tbody.innerHTML = historicoVerificacoes.map(h => {
        const hora = h.timestamp ? new Date(h.timestamp).toLocaleTimeString('pt-BR') : '-';
        const statusClass = h.online ? 'text-success' : 'text-danger';
        const statusIcon = h.online ? 'check-circle-fill' : 'x-circle-fill';
        const statusText = h.online ? 'Online' : 'Offline';
        
        return `
            <tr>
                <td><small>${hora}</small></td>
                <td><strong>${h.uf || '-'}</strong></td>
                <td>${h.modelo || '-'}</td>
                <td class="${statusClass}"><i class="bi bi-${statusIcon}"></i> ${statusText}</td>
                <td><code>${h.codigo || '-'}</code></td>
                <td><small>${(h.motivo || '-').substring(0, 50)}</small></td>
                <td>${h.tempo_medio ? h.tempo_medio + 's' : '-'}</td>
            </tr>
        `;
    }).join('');
}

// Inicializar
document.addEventListener('DOMContentLoaded', function() {
    // Primeira atualização
    setTimeout(atualizarTodos, 500);
    
    // Atualização automática a cada 60 segundos
    intervaloAtualizacao = setInterval(atualizarTodos, 60000);
});

// Limpar intervalo ao sair da página
window.addEventListener('beforeunload', function() {
    if (intervaloAtualizacao) {
        clearInterval(intervaloAtualizacao);
    }
});
</script>
{% endblock %}