{% 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>

            <!-- Barra de Busca e Filtros de Elite -->
            <div class="card bg-slate-900 border-slate-800 mb-4">
                <div class="card-body p-3">
                    <div class="row g-3 align-items-center">
                        <div class="col-md-5">
                            <div class="input-group">
                                <span class="input-group-text bg-black border-slate-700 text-warning"><i class="bi bi-search"></i></span>
                                <input type="text" id="search-input" class="form-control bg-black border-slate-700 text-white" placeholder="Pesquisar jogo (ex: Mega, Quina, 05, 10)..." onkeyup="filterResults()">
                            </div>
                        </div>
                        <div class="col-md-7">
                            <div class="d-flex gap-2 justify-content-md-end flex-wrap">
                                <button onclick="applyFilter('all')" class="btn btn-sm btn-outline-light active filter-btn" data-filter="all">TODOS</button>
                                <button onclick="applyFilter(6)" class="btn btn-sm btn-outline-danger filter-btn" data-filter="6">SENAS (6)</button>
                                <button onclick="applyFilter(5)" class="btn btn-sm btn-outline-warning filter-btn" data-filter="5">QUINAS (5)</button>
                                <button onclick="applyFilter(4)" class="btn btn-sm btn-outline-info filter-btn" data-filter="4">QUADRAS (4)</button>
                                <button onclick="applyFilter('other')" class="btn btn-sm btn-outline-secondary filter-btn" data-filter="other">OUTROS</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dashboard de Resumo -->
            <div class="row g-2 mb-4">
                <div class="col">
                    <div class="p-2 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1 x-small">DUQUES</small>
                        <h4 id="stat-duque" class="text-secondary fw-bold mb-0">0</h4>
                    </div>
                </div>
                <div class="col">
                    <div class="p-2 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1 x-small">TERNOS</small>
                        <h4 id="stat-terno" class="text-primary fw-bold mb-0">0</h4>
                    </div>
                </div>
                <div class="col">
                    <div class="p-2 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1 x-small">QUADRAS</small>
                        <h4 id="stat-quadra" class="text-info fw-bold mb-0">0</h4>
                    </div>
                </div>
                <div class="col">
                    <div class="p-2 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1 x-small">QUINAS</small>
                        <h4 id="stat-quina" class="text-warning fw-bold mb-0">0</h4>
                    </div>
                </div>
                <div class="col">
                    <div class="p-2 rounded-4 bg-slate-900 border border-slate-800 text-center">
                        <small class="text-slate-500 d-block mb-1 x-small">SENAS</small>
                        <h4 id="stat-sena" class="text-danger fw-bold mb-0">0</h4>
                    </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; }
    .x-small { font-size: 0.7rem; }
    
    .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);
    }
    .filter-btn.active {
        background-color: currentColor;
        color: #000 !important;
        box-shadow: 0 0 15px currentColor;
    }
    .border-slate-700 { border-color: #334155 !important; }
</style>

<script>
    let allHits = [];

    function loadReport() {
        const data = localStorage.getItem('detectedHits');
        const container = document.getElementById('report-container');
        
        if (!data) return;
        
        allHits = JSON.parse(data);
        if (allHits.length === 0) return;
        
        renderHits(allHits.reverse());
        updateStats(allHits);
    }

    function renderHits(hitsToRender) {
        const container = document.getElementById('report-container');
        container.innerHTML = '';
        
        if (hitsToRender.length === 0) {
            container.innerHTML = `
                <div class="col-12 text-center py-5 text-slate-700">
                    <i class="bi bi-search display-4 d-block mb-3"></i>
                    <p>Nenhum acerto encontrado para esta busca.</p>
                </div>
            `;
            return;
        }

        hitsToRender.forEach(hit => {
            // Garantir ordenação (Menor para o Maior)
            if (hit.sequence) hit.sequence.sort((a, b) => a - b);

            let badgeClass = "bg-danger";
            if (hit.hits === 2) badgeClass = "bg-secondary";
            else if (hit.hits === 3) badgeClass = "bg-primary";
            else if (hit.hits === 4) badgeClass = "bg-info";
            else if (hit.hits === 5) badgeClass = "bg-warning text-dark";
            
            const col = document.createElement('div');
            col.className = 'col-md-6 col-lg-4 hit-item';
            col.dataset.hits = hit.hits;
            col.dataset.type = hit.type.toLowerCase();
            col.dataset.sequence = hit.sequence.join(',');
            
            let ballsHtml = hit.sequence.map(n => {
                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);
        });
    }

    function updateStats(hits) {
        let dq = 0, tr = 0, qd = 0, qn = 0, sn = 0;
        hits.forEach(hit => {
            if (hit.hits === 2) dq++;
            else if (hit.hits === 3) tr++;
            else if (hit.hits === 4) qd++;
            else if (hit.hits === 5) qn++;
            else if (hit.hits >= 6) sn++;
        });
        
        if (document.getElementById('stat-duque')) document.getElementById('stat-duque').innerText = dq;
        if (document.getElementById('stat-terno')) document.getElementById('stat-terno').innerText = tr;
        document.getElementById('stat-quadra').innerText = qd;
        document.getElementById('stat-quina').innerText = qn;
        document.getElementById('stat-sena').innerText = sn;
    }

    let currentFilter = 'all';

    function applyFilter(filter) {
        currentFilter = filter;
        
        // Atualizar botões
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.dataset.filter == filter) btn.classList.add('active');
        });

        filterResults();
    }

    function filterResults() {
        const searchText = document.getElementById('search-input').value.toLowerCase();
        
        const filtered = allHits.filter(hit => {
            const matchesSearch = hit.type.toLowerCase().includes(searchText) || 
                                hit.sequence.join(',').includes(searchText);
            
            let matchesFilter = true;
            if (currentFilter === 6) matchesFilter = (hit.hits >= 6);
            else if (currentFilter === 5) matchesFilter = (hit.hits === 5);
            else if (currentFilter === 4) matchesFilter = (hit.hits === 4);
            else if (currentFilter === 'other') matchesFilter = (hit.hits < 4);
            
            return matchesSearch && matchesFilter;
        });
        
        renderHits(filtered);
    }

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

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