{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid py-4 bg-black min-vh-100">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Cabeçalho Futurista -->
            <div class="d-flex justify-content-between align-items-center mb-4 border-bottom border-slate-800 pb-3">
                <div>
                    <h2 class="text-warning fw-bold mb-0"><i class="bi bi-radar"></i> MONITOR DE ACERTOS IA</h2>
                    <p class="text-slate-500 small mb-0">Relatório Detalhado de Combinações com Alta Probabilidade de Elite</p>
                </div>
                <div class="text-end">
                    <button onclick="window.print()" class="btn btn-outline-info btn-sm me-2">
                        <i class="bi bi-printer"></i> IMPRIMIR
                    </button>
                    <button onclick="clearReport()" class="btn btn-outline-danger btn-sm">
                        <i class="bi bi-trash"></i> LIMPAR
                    </button>
                </div>
            </div>

            <!-- Dashboard de Resumo -->
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <div class="p-3 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1">QUADRAS DETECTADAS</small>
                        <h3 id="stat-quadra" class="text-info fw-bold mb-0">0</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1">QUINAS DETECTADAS</small>
                        <h3 id="stat-quina" class="text-warning fw-bold mb-0">0</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1">SENAS DETECTADAS</small>
                        <h3 id="stat-sena" class="text-danger fw-bold mb-0">0</h3>
                    </div>
                </div>
            </div>

            <!-- Lista de Acertos -->
            <div id="report-container" class="row g-3">
                <div class="col-12 text-center py-5 text-slate-700">
                    <i class="bi bi-info-circle display-4 d-block mb-3"></i>
                    <p>Aguardando dados do Detector de Acertos...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body { background-color: #000 !important; }
    .bg-slate-900 { background-color: #0f172a; }
    .border-slate-800 { border-color: #1e293b !important; }
    .text-slate-500 { color: #64748b !important; }
    .text-slate-700 { color: #334155 !important; }
    
    .hit-card {
        background: #0f172a;
        border: 1px solid #1e293b;
        border-radius: 12px;
        padding: 15px;
        transition: all 0.3s;
    }
    .hit-card:hover {
        transform: translateY(-5px);
        border-color: #334155;
        box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    }
    
    .num-ball-mini {
        width: 35px;
        height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #1e293b;
        color: #fff;
        border-radius: 50%;
        margin: 2px;
        font-weight: bold;
        font-size: 0.9rem;
    }
    .elite-ball {
        background: linear-gradient(135deg, #198754, #28a745);
    }
</style>

<script>
    function loadReport() {
        const data = localStorage.getItem('detectedHits');
        const container = document.getElementById('report-container');
        
        if (!data) return;
        
        const hits = JSON.parse(data);
        if (hits.length === 0) return;
        
        container.innerHTML = '';
        
        let qd = 0, qn = 0, sn = 0;
        
        // Inverte para mostrar os mais recentes primeiro
        hits.reverse().forEach(hit => {
            // Garantir ordenação (Menor para o Maior) na exibição do relatório
            hit.sequence.sort((a, b) => a - b);

            if (hit.hits === 4) qd++;
            else if (hit.hits === 5) qn++;
            else if (hit.hits >= 6) sn++;
            
            const badgeClass = hit.hits === 4 ? "bg-info" : (hit.hits === 5 ? "bg-warning text-dark" : "bg-danger");
            
            const col = document.createElement('div');
            col.className = 'col-md-6 col-lg-4';
            
            let ballsHtml = hit.sequence.map(n => {
                // Aqui não temos os elite_greens no localStorage, então mostramos simples
                return `<div class="num-ball-mini">${n.toString().padStart(2, '0')}</div>`;
            }).join('');
            
            col.innerHTML = `
                <div class="hit-card">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="badge ${badgeClass} px-3 py-2 fs-6">${hit.type}</span>
                        <span class="text-slate-500 small">${hit.hits} Pontos de Elite</span>
                    </div>
                    <div class="d-flex flex-wrap justify-content-center mb-2">
                        ${ballsHtml}
                    </div>
                </div>
            `;
            container.appendChild(col);
        });
        
        document.getElementById('stat-quadra').innerText = qd;
        document.getElementById('stat-quina').innerText = qn;
        document.getElementById('stat-sena').innerText = sn;
    }

    function clearReport() {
        if (confirm('Deseja limpar todos os acertos detectados?')) {
            localStorage.removeItem('detectedHits');
            location.reload();
        }
    }

    // Carrega ao iniciar
    document.addEventListener('DOMContentLoaded', loadReport);
</script>
{% endblock %}
