@extends('layouts.app')
@section('title','Etapa 2 — Validando...')
@section('content')
 
<h2>Etapa 2 — Validando QSOs</h2>
 
<div class="progresso-box">
 
    <div class="prog-arquivo-atual" id="prog-arquivo">Aguardando início...</div>
 
    <div class="prog-header">
        <span id="prog-label">Inicializando...</span>
        <span id="prog-pct">0%</span>
    </div>
    <div class="prog-track">
        <div class="prog-bar ativo" id="prog-bar" style="width:0%"></div>
    </div>
    <div class="prog-sub" id="prog-sub">&nbsp;</div>
 
    <div class="prog-log" id="prog-log">
        <div class="log-info">▶ Iniciando validação...</div>
    </div>
 
    <div class="prog-resumo" id="prog-resumo" style="display:none">
        <h3>✅ Etapa 2 Concluída</h3>
 
        {{-- Resumo principal --}}
        <div class="stats-grid" style="max-width:700px;margin:.75rem 0">
            <div class="stat-card stat-card-green">
                <div class="stat-number" id="r-validos">—</div>
                <div class="stat-label">QSOs Válidos</div>
            </div>
            <div class="stat-card stat-card-red">
                <div class="stat-number" id="r-invalidos">—</div>
                <div class="stat-label">QSOs Inválidos</div>
            </div>
            <div class="stat-card">
                <div class="stat-number" id="r-total-qsos">—</div>
                <div class="stat-label">Total Processados</div>
            </div>
        </div>
 
        <table class="table" style="max-width:440px">
            <tr><th>Início</th>          <td id="r-inicio">—</td></tr>
            <tr><th>Fim</th>             <td id="r-fim">—</td></tr>
            <tr><th>Tempo total</th>     <td id="r-tempo">—</td></tr>
            <tr><th>Operadores</th>      <td id="r-logs">—</td></tr>
            <tr><th>Erros de sistema</th><td id="r-erros">—</td></tr>
        </table>
 
        {{-- Motivos de invalidação --}}
        <div id="bloco-inv" style="display:none;margin-top:1rem">
            <h4 style="color:#C62828;margin-bottom:.5rem">❌ Motivos de Invalidação</h4>
            <table class="table" style="max-width:400px">
                <thead><tr><th>Motivo</th><th>Quantidade</th></tr></thead>
                <tbody>
                    <tr><td>Contest inválido</td>   <td id="inv-contest">0</td></tr>
                    <tr><td>Fora do período</td>    <td id="inv-data">0</td></tr>
                    <tr><td>Banda/Frequência inv.</td><td id="inv-banda">0</td></tr>
                    <tr><td>Exchange inválido</td>  <td id="inv-exchange">0</td></tr>
                    <tr><td>HQ inválido</td>        <td id="inv-hq">0</td></tr>
                    <tr><td>Categoria inválida</td> <td id="inv-categoria">0</td></tr>
                </tbody>
            </table>
        </div>
 
        {{-- QSOs inválidos detalhados --}}
        <div id="bloco-inv-det" style="display:none;margin-top:1.25rem">
            <h4 style="color:#C62828;margin-bottom:.4rem">
                ❌ QSOs Inválidos — Detalhamento por LOG
            </h4>
 
            {{-- Filtro por callsign --}}
            <div style="margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem">
                <input type="text" id="filtro-inv" placeholder="Filtrar por callsign..."
                       style="padding:.35rem .6rem;border:1px solid #ddd;border-radius:4px;font-size:.85rem;width:220px"
                       oninput="filtrarInvalidos(this.value)">
                <span id="filtro-count" style="font-size:.82rem;color:#888"></span>
            </div>
 
            <div style="max-height:320px;overflow-y:auto;border:1px solid #eee;border-radius:4px">
                <table class="table" id="tbl-inv-det" style="margin-bottom:0">
                    <thead>
                        <tr>
                            <th>LOG (Callsign)</th>
                            <th>Contactou</th>
                            <th>Banda</th>
                            <th>Modo</th>
                            <th>Data/Hora</th>
                            <th>Motivo(s)</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div style="margin-top:.35rem;font-size:.8rem;color:#888" id="inv-rodape"></div>
        </div>
 
        {{-- Erros de sistema --}}
        <div id="bloco-erros" style="display:none;margin-top:.75rem" class="alert alert-danger"></div>
 
        <div style="margin-top:1.5rem;display:flex;gap:.75rem;flex-wrap:wrap">
            <a href="{{ route('dashboard') }}"                     class="btn btn-secondary">← Dashboard</a>
            <a href="{{ route('processamento.validar-tempo') }}"   class="btn btn-primary">Próxima Etapa: Validar Tempo →</a>
        </div>
    </div>
</div>
 
<style>
.progresso-box{background:#fff;border-radius:8px;padding:1.5rem 2rem;box-shadow:0 2px 12px rgba(0,0,0,.1);max-width:820px}
.prog-arquivo-atual,.prog-arquivo{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;min-height:1.4em;background:#f8f9fa;border-radius:4px;padding:.3rem .7rem;font-family:'Consolas',monospace}
.prog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
#prog-label{font-weight:600;font-size:.95rem}
#prog-pct{font-weight:700;color:var(--blue);font-size:1.05rem;min-width:3.5rem;text-align:right}
.prog-track{background:#e9ecef;border-radius:50px;height:26px;overflow:hidden;margin-bottom:.4rem}
.prog-bar{height:100%;background:linear-gradient(90deg,#1B4F8C,#2E86DE);border-radius:50px;transition:width .5s ease;min-width:0;position:relative}
.prog-bar.ativo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.prog-bar.concluido{background:linear-gradient(90deg,#2E7D32,#43A047)}
.prog-bar.concluido::after{display:none}
.prog-sub{font-size:.8rem;color:var(--muted);min-height:1.1em;margin-bottom:.75rem}
.prog-log{background:#1a2332;color:#cdd5df;font-family:'Consolas','Courier New',monospace;font-size:.8rem;border-radius:6px;padding:.75rem 1rem;height:260px;overflow-y:auto;line-height:1.7;margin-bottom:1rem;border:1px solid #2c3e50}
.prog-log div{padding:.02rem 0}
.log-ok{color:#81c784}.log-info{color:#64b5f6}.log-erro{color:#ef9a9a}.log-dup{color:#ffcc80;font-weight:bold}.log-arq{color:#e0e0e0}
.prog-resumo h3{color:var(--green);margin-bottom:.15rem}
.prog-resumo h4{font-size:.95rem}
</style>
 
<script>
(function () {
    const barEl    = document.getElementById('prog-bar');
    const labelEl  = document.getElementById('prog-label');
    const pctEl    = document.getElementById('prog-pct');
    const subEl    = document.getElementById('prog-sub');
    const logEl    = document.getElementById('prog-log');
    const resumoEl = document.getElementById('prog-resumo');
    const arquivoEl= document.getElementById('prog-arquivo');

    let polling   = null;
    const startTime = Date.now(); // marca o início para medir tempo real

    function addLog(msg, tipo) {
        const cls = {ok:'log-ok',info:'log-info',erro:'log-erro',dup:'log-dup',arq:'log-arq'}[tipo]||'';
        const d = document.createElement('div');
        if (cls) d.className = cls;
        d.textContent = msg;
        logEl.appendChild(d);
        logEl.scrollTop = logEl.scrollHeight;
    }

    function renderLog(linhas) {
        logEl.innerHTML = '';
        const cls = {ok:'log-ok',info:'log-info',erro:'log-erro',dup:'log-dup',arq:'log-arq'};
        (linhas||[]).forEach(function(l) {
            const d = document.createElement('div');
            if (cls[l.tipo]) d.className = cls[l.tipo];
            d.textContent = l.msg;
            logEl.appendChild(d);
            if (l.tipo==='arq'||l.tipo==='ok') arquivoEl.textContent = l.msg;
        });
        logEl.scrollTop = logEl.scrollHeight;
    }
 
    function setBar(atual, total) {
        const p = total > 0 ? Math.min(100, Math.round((atual/total)*100)) : 0;
        barEl.style.width = p+'%'; pctEl.textContent = p+'%';
    }
 
    function consultarStatus() {
        fetch('{{ route("processamento.validar-qsos.status") }}', {cache:'no-store'})
            .then(r => r.json())
            .then(d => {
                renderLog(d.progresso || []);
                if (d.total > 0) {
                    setBar(d.atual, d.total);
                    if (!d.concluido) {
                        labelEl.textContent = 'Validando ' + d.atual + ' de ' + d.total + ' operadores...';
                        subEl.textContent   = d.atual + ' / ' + d.total + ' LOGs';
                    }
                } else if (d.status === 'limpando') {
                    labelEl.textContent = 'Carregando tabelas auxiliares...';
                }
                if (d.concluido) {
                    if (d.resultado) {
                        clearInterval(polling);
                        exibirResumo(d.resultado, d.total);
                    }
                    // Se concluido mas resultado ainda null: continua polling (max 15 ciclos extras)
                    else {
                        window._semResultado = (window._semResultado || 0) + 1;
                        if (window._semResultado >= 15) {
                            clearInterval(polling);
                            // Exibe o que tiver — pelo menos desbloqueia a tela
                            exibirResumo({
                                total_logs: d.total, total_qsos: 0,
                                total_validos: 0, total_invalidos: 0,
                                tempo: '?', inicio: '—', fim: '—',
                                erros: [], inv: [], det_invalidos: [],
                                inv_tempo: [], inv_banda: [],
                                total_result: 0, banda_unk: 0,
                                total_participantes: 0, total_lidos: 0,
                                total_processados: 0, processados: 0,
                                duplicatas: [], score_total: 0,
                            }, d.total);
                        }
                    }
                }
            }).catch(() => {});
    }
 
    function exibirResumo(r, total) {
        // Grava tempo real e libera menu
        const segundosReais = Math.round((Date.now() - startTime) / 1000);
        confirmarConclusao('2', segundosReais);
        setBar(total, total);
        barEl.classList.remove('ativo'); barEl.classList.add('concluido');
        labelEl.textContent   = '✅ Concluído!';
        subEl.textContent     = '';
        arquivoEl.textContent = '✅ Todos os operadores validados.';
 
        document.getElementById('r-validos').textContent    = r.total_validos.toLocaleString('pt-BR');
        document.getElementById('r-invalidos').textContent  = r.total_invalidos.toLocaleString('pt-BR');
        document.getElementById('r-total-qsos').textContent = r.total_qsos.toLocaleString('pt-BR');
        document.getElementById('r-inicio').textContent     = r.inicio;
        document.getElementById('r-fim').textContent        = r.fim;
        document.getElementById('r-tempo').textContent      = r.tempo;
        document.getElementById('r-logs').textContent       = r.total_logs + ' operador(es)';
        document.getElementById('r-erros').textContent      = r.erros.length;
 
        // Motivos de invalidação
        const inv = r.inv || {};
        const temInv = Object.values(inv).some(v => v > 0);
        if (temInv) {
            document.getElementById('bloco-inv').style.display = 'block';
            document.getElementById('inv-contest').textContent  = (inv.contest  || 0).toLocaleString('pt-BR');
            document.getElementById('inv-data').textContent     = (inv.data     || 0).toLocaleString('pt-BR');
            document.getElementById('inv-banda').textContent    = (inv.banda    || 0).toLocaleString('pt-BR');
            document.getElementById('inv-exchange').textContent = (inv.exchange || 0).toLocaleString('pt-BR');
            document.getElementById('inv-hq').textContent       = (inv.hq      || 0).toLocaleString('pt-BR');
            document.getElementById('inv-categoria').textContent= (inv.categoria|| 0).toLocaleString('pt-BR');
        }
 
        // Tabela de QSOs inválidos detalhada
        if (r.det_invalidos && r.det_invalidos.length > 0) {
            document.getElementById('bloco-inv-det').style.display = 'block';
            const tbody = document.querySelector('#tbl-inv-det tbody');
            r.det_invalidos.forEach(function (q) {
                const tr = document.createElement('tr');
                tr.dataset.call = (q.callsign + ' ' + q.call_rcvd).toLowerCase();
                tr.innerHTML =
                    '<td><strong>' + q.callsign  + '</strong></td>' +
                    '<td>'         + q.call_rcvd + '</td>' +
                    '<td>'         + (q.band || '?') + '</td>' +
                    '<td>'         + (q.mode || '?') + '</td>' +
                    '<td style="white-space:nowrap">' + q.date_time + '</td>' +
                    '<td style="color:#C62828;font-size:.82rem">' + q.motivos + '</td>';
                tbody.appendChild(tr);
            });
            document.getElementById('inv-rodape').textContent =
                'Total: ' + r.det_invalidos.length.toLocaleString('pt-BR') + ' QSO(s) inválido(s)';
            document.getElementById('filtro-count').textContent =
                r.det_invalidos.length.toLocaleString('pt-BR') + ' registros';
        }
 
        if (r.erros.length > 0) {
            const b = document.getElementById('bloco-erros');
            b.style.display = 'block';
            b.innerHTML = '<strong>Erros:</strong><br>' + r.erros.map(s => '• '+s).join('<br>');
        }
        resumoEl.style.display = 'block';
        resumoEl.scrollIntoView({behavior:'smooth',block:'start'});
    }
 
    // Filtro ao vivo na tabela de inválidos
    function filtrarInvalidos(termo) {
        const rows  = document.querySelectorAll('#tbl-inv-det tbody tr');
        const lower = termo.toLowerCase();
        let visiveis = 0;
        rows.forEach(function (tr) {
            const match = !lower || tr.dataset.call.includes(lower);
            tr.style.display = match ? '' : 'none';
            if (match) visiveis++;
        });
        document.getElementById('filtro-count').textContent =
            visiveis.toLocaleString('pt-BR') + ' registro(s)';
    }
 
    barEl.classList.add('ativo');
    fetch('{{ route("processamento.validar-qsos.processar") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Content-Type': 'application/json',
            'Accept':       'application/json',
        },
    }).catch(() => addLog('❌ Falha ao iniciar o processamento.', 'erro'));
 
    consultarStatus();
    polling = setInterval(consultarStatus, 800);

    // ── Confirma conclusão ao backend e desbloqueio do menu ─────────────────
    // Chamado UMA vez quando exibirResumo() renderiza os botões finais.
    // Envia o tempo real medido pelo JS (mais preciso que o tempo do PHP).
    function desbloquearMenu() {
        // Remove imediatamente o bloqueio visual do menu sem esperar reload
        const nav = document.querySelector('nav.navbar');
        if (nav) nav.classList.remove('navbar-processando');
        const aviso = document.querySelector('.navbar-aviso-proc');
        if (aviso) aviso.remove();
        const menuDiv = document.querySelector('.navbar-menu');
        if (menuDiv) menuDiv.classList.remove('menu-desabilitado');
        document.querySelectorAll('.nav-disabled').forEach(el => el.classList.remove('nav-disabled'));
        const banner = document.querySelector('.alert-warning');
        if (banner && banner.textContent.includes('Processamento em andamento')) banner.remove();
    }

    function confirmarConclusao(etapa, segundos) {
        desbloquearMenu(); // desbloqueio imediato no DOM
        fetch('{{ route("processamento.concluir-etapa") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ etapa: etapa, segundos: segundos }),
        }).catch(() => { /* silencia — não é crítico */ });
    }

}());
</script>
 
@endsection