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

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- Sidebar Controles -->
        <div class="col-lg-3 col-md-4 mb-4">
            <div class="card bg-slate-800 border-slate-700 shadow-lg mb-4">
                <div class="card-body">
                    <h5 class="text-white mb-3 d-flex align-items-center">
                        <i class="bi bi-cpu-fill me-2 text-warning"></i> CONFIGURAÇÕES
                    </h5>
                    
                    <div id="elite-indicator" class="d-none badge bg-warning text-dark pulse-warning p-2 rounded-pill fw-bold w-100 mb-3">
                        <i class="bi bi-shield-check me-1"></i>PRECISÃO 99.9% ATIVA
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-slate-400 small fw-bold text-uppercase">Escolha a Loteria</label>
                        <select class="form-select bg-slate-900 text-white border-slate-700" id="lottery-select">
                            <option value="">-- Selecione --</option>
                            {% for lottery in loterias %}
                                <option value="{{ lottery.name }}">{{ lottery.get_name_display }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-slate-400 small fw-bold text-uppercase">Velocidade do Motor</label>
                        <input type="range" class="form-range" id="speed-range" min="10" max="1000" step="10" value="100">
                    </div>

                    <div class="d-grid gap-2">
                        <button id="btn-start" class="btn btn-warning fw-bold py-3 shadow-glow-gold" disabled>
                            <i class="bi bi-play-fill"></i> INICIAR MOTOR IA
                        </button>
                        <button id="btn-pause" class="btn btn-outline-warning fw-bold py-3 d-none">
                            <i class="bi bi-pause-fill"></i> PAUSAR MOTOR
                        </button>
                    </div>
                </div>
            </div>

            <!-- Painel Configurações de Elite (99.9%) -->
            <div class="card bg-slate-800 border-warning border-opacity-25 shadow-lg mb-4">
                <div class="card-body">
                    <h6 class="text-warning mb-3 d-flex align-items-center">
                        <i class="bi bi-gear-fill me-2"></i> CONFIGURAÇÕES DE ELITE
                    </h6>
                    
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="elite-mode-switch">
                        <label class="form-check-label text-warning small fw-bold" for="elite-mode-switch">MODO 99.9% (USAR APENAS DEZENAS ABAIXO)</label>
                    </div>

                    <div class="row g-1 mb-3" id="elite-inputs-container">
                        <!-- Inputs para as 15 dezenas de elite -->
                        {% for i in "123456789012345"|make_list %}
                        <div class="col-2-4">
                            <input type="number" class="form-control form-control-sm bg-slate-900 text-white border-slate-700 elite-num-input px-1 text-center" placeholder="00" min="1" max="100">
                        </div>
                        {% endfor %}
                    </div>

                    <div class="d-flex gap-2">
                        <button id="btn-apply-elite" class="btn btn-warning btn-sm flex-grow-1 fw-bold rounded-pill shadow-sm">
                            APLICAR
                        </button>
                        <button id="btn-recalculate-math" class="btn btn-outline-warning btn-sm flex-grow-1 fw-bold rounded-pill">
                            RECALCULAR
                        </button>
                    </div>
                </div>
            </div>

            <!-- Radar de Reclamação -->
            <div class="card bg-slate-800 border-info border-opacity-25 shadow-lg">
                <div class="card-body p-3">
                    <h6 class="text-info mb-2 small fw-bold text-uppercase d-flex justify-content-between align-items-center">
                        Radar de Reclamação
                        <span id="voice-indicator" class="spinner-grow spinner-grow-sm text-info d-none"></span>
                    </h6>
                    <div id="voice-log" class="bg-black p-2 rounded text-info x-small font-monospace overflow-auto" style="height: 100px;">
                        IA: Aguardando seleção...<br>
                    </div>
                </div>
            </div>
        </div>

        <!-- Central do Gerador -->
        <div class="col-lg-6 col-md-8">
            <div class="card bg-slate-900 border-slate-800 shadow-2xl overflow-hidden mb-4">
                <div class="card-header bg-slate-800 border-slate-700 d-flex justify-content-between align-items-center py-3">
                    <div class="d-flex align-items-center">
                        <div class="pulse-green me-3"></div>
                        <h5 class="text-white mb-0" id="lottery-display">Selecione uma Loteria</h5>
                    </div>
                    <div class="text-slate-400 small font-monospace" id="concurso-info">MOTOR: OFFLINE</div>
                </div>
                
                <div class="generator-viewport bg-black position-relative" style="height: 500px; overflow-y: scroll;">
                    <div id="sequence-container" class="p-3">
                        <div class="text-center text-slate-700 py-5">
                            <i class="bi bi-activity display-4 mb-3"></i>
                            <p>Selecione uma loteria para carregar o Funil Neural</p>
                        </div>
                    </div>
                    
                    <!-- Controles Flutuantes -->
                    <div class="position-absolute bottom-0 end-0 p-3 d-flex flex-column gap-2">
                        <button id="btn-up" class="btn btn-slate-700 btn-sm rounded-circle shadow"><i class="bi bi-chevron-up"></i></button>
                        <button id="btn-down" class="btn btn-slate-700 btn-sm rounded-circle shadow"><i class="bi bi-chevron-down"></i></button>
                    </div>
                </div>

                <div class="card-footer bg-slate-800 border-slate-700 p-0">
                    <div class="row g-0 text-center" id="stats-bar">
                        <div class="col py-3 border-end border-slate-700">
                            <div class="text-slate-400 x-small text-uppercase">Total</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-total">0</div>
                        </div>
                        <div class="col py-3 border-end border-slate-700 d-none" id="col-duque">
                            <div class="text-secondary x-small text-uppercase">Duque</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-duque">0</div>
                        </div>
                        <div class="col py-3 border-end border-slate-700 d-none" id="col-terno">
                            <div class="text-primary x-small text-uppercase">Terno</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-terno">0</div>
                        </div>
                        <div class="col py-3 border-end border-slate-700">
                            <div class="text-info x-small text-uppercase">Quadra</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-quadra">0</div>
                        </div>
                        <div class="col py-3 border-end border-slate-700">
                            <div class="text-warning x-small text-uppercase">Quina</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-quina">0</div>
                        </div>
                        <div class="col py-3 d-none" id="col-sena">
                            <div class="text-danger x-small text-uppercase">Sena</div>
                            <div class="text-white fw-bold h5 mb-0" id="count-sena">0</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card bg-slate-800 border-slate-700 p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-warning small fw-bold text-uppercase mb-0">Elite Verde (Sugeridos pela IA)</h6>
                            <button class="btn btn-slate-700 btn-sm rounded-pill px-3" onclick="recalculateDeepElite()">
                                <i class="bi bi-arrow-repeat me-1"></i> Forçar Recalibragem
                            </button>
                        </div>
                        <div id="elite-panel" class="d-flex flex-wrap gap-2 justify-content-center">
                            <!-- Dezenas sugeridas via JS -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Resultados e Hits -->
        <div class="col-lg-3 col-md-12">
            <div class="card bg-slate-800 border-slate-700 shadow-lg h-100">
                <div class="card-header bg-slate-700 border-slate-600 py-3 d-flex justify-content-between align-items-center">
                    <h6 class="text-white mb-0 fw-bold">HITS DE ELITE</h6>
                    <button id="btn-download" class="btn btn-success btn-sm d-none fw-bold">
                        <i class="bi bi-download me-1"></i> TXT
                    </button>
                </div>
                <div class="card-body p-0">
                    <div id="hits-panel" class="p-3 d-flex flex-column gap-2 overflow-auto" style="max-height: 600px;">
                        <div class="text-center text-slate-700 py-3 small">Nenhum acerto de elite detectado ainda...</div>
                    </div>
                </div>
                <div class="card-footer border-top border-slate-700 bg-slate-900 p-3">
                    <div class="d-grid gap-2">
                        <button id="btn-open-browser" class="btn btn-outline-info btn-sm d-none fw-bold">
                            <i class="bi bi-window me-1"></i> VER NO NAVEGADOR
                        </button>
                        <p class="x-small text-slate-500 text-center mb-0">A IA salva automaticamente os últimos hits detectados.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Seção do Funil -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card bg-slate-800 border-slate-700 shadow-lg p-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="text-white mb-0 fw-bold d-flex align-items-center">
                        <i class="bi bi-filter-circle-fill me-2 text-info"></i> FUNIL DE ANULAÇÃO (EXCLUIR NÚMEROS)
                    </h6>
                    <span class="badge bg-slate-700 text-info" id="funnel-count">0 / 60</span>
                </div>
                <div id="funnel-grid" class="d-flex flex-wrap gap-1 justify-content-center">
                    <!-- Gerado via JS -->
                </div>
                <p class="text-slate-500 x-small mt-3 mb-0 text-center">Números marcados em azul serão IGNORADOS pelo motor de cálculo.</p>
            </div>
        </div>
    </div>
</div>

<style>
    .col-2-4 { width: 20%; flex: 0 0 20%; }
    .bg-black { background-color: #000000 !important; }
    .bg-slate-900 { background-color: #0f172a !important; }
    .bg-slate-800 { background-color: #1e293b !important; }
    .bg-slate-700 { background-color: #334155 !important; }
    .border-slate-800 { border-color: #1e293b !important; }
    .border-slate-700 { border-color: #334155 !important; }
    .text-slate-400 { color: #94a3b8 !important; }
    .text-slate-500 { color: #64748b !important; }
    .text-slate-700 { color: #334155 !important; }
    .x-small { font-size: 0.7rem; }
    
    .pulse-green {
        width: 12px; height: 12px;
        background: #10b981;
        border-radius: 50%;
        animation: pulse-green 2s infinite;
    }
    
    .num-ball {
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        background: #1e293b; border: 1px solid #334155;
        border-radius: 50%; color: #94a3b8;
        font-weight: bold; font-size: 0.8rem;
        transition: all 0.2s;
    }
    .num-elite { background: linear-gradient(135deg, #198754, #28a745); border-color: #28a745; color: white; box-shadow: 0 0 8px rgba(40,167,69,0.3); }
    .num-reclaimed { background: linear-gradient(135deg, #0dcaf0, #0aa2c0); border-color: #0dcaf0; color: white; box-shadow: 0 0 8px rgba(13,202,240,0.3); }
    
    .sequence-row {
        display: flex; gap: 4px; justify-content: center;
        margin-bottom: 6px; padding: 4px;
        border-radius: 4px; transition: background 0.1s;
    }
    .sequence-row:hover { background: rgba(255,255,255,0.05); }
    
    .funnel-ball {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: #1e293b; border: 1px solid #334155;
        border-radius: 4px; color: #64748b;
        font-weight: bold; font-size: 0.8rem; cursor: pointer;
        transition: all 0.2s;
    }
    .funnel-ball.active { background: #0ea5e9; border-color: #0ea5e9; color: white; box-shadow: 0 0 10px rgba(14,165,233,0.4); }
    .funnel-ball:hover:not(.active) { border-color: #0ea5e9; color: #0ea5e9; }

    .shadow-glow-gold { box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); }
    
    @keyframes pulse-green {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }
    
    .pulse-warning { animation: pulse-yellow 1.5s infinite; }
    @keyframes pulse-yellow {
        0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    }
</style>

<script>
    let generatorRunning = false;
    let lotteryData = null;
    let currentStartNum = 1;
    let totalGenerated = 0;
    let countDuque = 0;
    let countTerno = 0;
    let countQuadra = 0;
    let countQuina = 0;
    let countSena = 0;
    let detectedHits = [];
    let animationId = null;
    let annulledFunnel = new Set();
    const MAX_FUNNEL = 60;
    let eliteModeActive = false;
    let customEliteNumbers = [];

    const synth = window.speechSynthesis;
    let voiceEnabled = true;

    function speak(text) {
        if (!voiceEnabled || !synth) return;
        synth.cancel();
        const utter = new SpeechSynthesisUtterance(text);
        utter.lang = 'pt-BR';
        utter.rate = 1.1;
        
        const voices = synth.getVoices();
        const femaleVoice = voices.find(v => v.name.includes('Maria') || v.name.includes('Google português do Brasil'));
        if (femaleVoice) utter.voice = femaleVoice;

        utter.onstart = () => document.getElementById("voice-indicator").classList.remove("d-none");
        utter.onend = () => document.getElementById("voice-indicator").classList.add("d-none");
        
        const log = document.getElementById("voice-log");
        log.innerHTML += `> IA: ${text}<br>`;
        log.scrollTop = log.scrollHeight;
        
        synth.speak(utter);
    }

    const lotterySelect = document.getElementById("lottery-select");
    const funnelGrid = document.getElementById("funnel-grid");
    const funnelCountLabel = document.getElementById("funnel-count");
    const btnStart = document.getElementById("btn-start");
    const btnPause = document.getElementById("btn-pause");
    const container = document.getElementById("sequence-container");
    const viewport = document.querySelector(".generator-viewport");
    const elitePanel = document.getElementById("elite-panel");

    // Recalibragem Neural para Elite 99.9%
    function recalculateDeepElite() {
        if (!lotteryData) return;
        
        speak(`Iniciando Recalibragem Neural para ${lotteryData.name}.`);
        
        const max = lotteryData.max_number;
        const frequency = lotteryData.elite_greens;
        const delayed = lotteryData.reclaimed_numbers;
        
        let candidates = [];
        for (let n = 1; n <= max; n++) {
            let score = 0;
            const freqIdx = frequency.indexOf(n);
            if (freqIdx !== -1) score += (20 - (freqIdx / 4));
            if (delayed.includes(n)) score += 15;
            
            // Quadrantes
            const quadSize = max / 4;
            const quad = Math.ceil(n / quadSize);
            score += 2;
            
            candidates.push({ num: n, score: score });
        }

        candidates.sort((a, b) => b.score - a.score);
        
        // Pega de 15 a 20 números para o funil de elite
        const topCount = Math.max(15, lotteryData.numbers_to_draw);
        const topNums = candidates.slice(0, topCount).map(c => c.num).sort((a, b) => a - b);
        
        customEliteNumbers = topNums;
        fillEliteInputs(topNums);
        updateElitePanel();
        
        speak("Matemática de Elite aplicada com convergência de 99.9%.");
    }

    lotterySelect.addEventListener("change", async (e) => {
        const key = e.target.value;
        if (!key) return;
        
        document.getElementById("lottery-display").innerText = e.target.options[e.target.selectedIndex].text;
        document.getElementById("concurso-info").innerText = "SINCRO: OK";
        
        const resp = await fetch(`/api/lottery-info/${key}/`);
        lotteryData = await resp.json();
        
        if (key.toLowerCase().includes('quina')) {
            document.getElementById("col-duque").classList.remove("d-none");
            document.getElementById("col-terno").classList.remove("d-none");
            document.getElementById("col-sena").classList.add("d-none");
        } else {
            document.getElementById("col-duque").classList.add("d-none");
            document.getElementById("col-terno").classList.add("d-none");
            document.getElementById("col-sena").classList.remove("d-none");
        }

        setupFunnel(lotteryData.max_number);
        recalculateDeepElite();
        
        btnStart.disabled = false;
        resetGenerator();
    });

    function setupFunnel(max) {
        funnelGrid.innerHTML = "";
        annulledFunnel.clear();
        updateFunnelLabel();
        
        for (let i = 1; i <= max; i++) {
            const ball = document.createElement("div");
            ball.className = "funnel-ball";
            ball.innerText = i.toString().padStart(2, "0");
            
            if (lotteryData.annulled_numbers.includes(i) && annulledFunnel.size < MAX_FUNNEL) {
                ball.classList.add("active");
                annulledFunnel.add(i);
            }

            ball.onclick = () => {
                if (ball.classList.contains("active")) {
                    ball.classList.remove("active");
                    annulledFunnel.delete(i);
                } else {
                    if (annulledFunnel.size >= MAX_FUNNEL) return;
                    ball.classList.add("active");
                    annulledFunnel.add(i);
                }
                updateFunnelLabel();
            };
            funnelGrid.appendChild(ball);
        }
    }

    function updateFunnelLabel() {
        funnelCountLabel.innerText = `${annulledFunnel.size} / ${MAX_FUNNEL}`;
    }

    function updateElitePanel() {
        elitePanel.innerHTML = "";
        const numbers = eliteModeActive ? customEliteNumbers : lotteryData.elite_greens.slice(0, 15);
        numbers.forEach(n => {
            const ball = document.createElement("div");
            ball.className = "num-ball num-elite";
            ball.innerText = n.toString().padStart(2, "0");
            elitePanel.appendChild(ball);
        });
    }

    function resetGenerator() {
        generatorRunning = false;
        btnStart.classList.remove("d-none");
        btnPause.classList.add("d-none");
        container.innerHTML = "";
        currentStartNum = 1;
        totalGenerated = 0;
        countDuque = 0; countTerno = 0; countQuadra = 0; countQuina = 0; countSena = 0;
        detectedHits = [];
        updateStats();
        if (animationId) cancelAnimationFrame(animationId);
    }

    function updateStats() {
        document.getElementById("count-total").innerText = totalGenerated.toLocaleString();
        if (document.getElementById("count-duque")) document.getElementById("count-duque").innerText = countDuque.toLocaleString();
        if (document.getElementById("count-terno")) document.getElementById("count-terno").innerText = countTerno.toLocaleString();
        document.getElementById("count-quadra").innerText = countQuadra.toLocaleString();
        document.getElementById("count-quina").innerText = countQuina.toLocaleString();
        if (document.getElementById("count-sena")) document.getElementById("count-sena").innerText = countSena.toLocaleString();
    }

    function generateChunk() {
        if (!generatorRunning) return;

        const nToDraw = lotteryData.numbers_to_draw;
        const maxNum = lotteryData.max_number;
        const eliteNums = eliteModeActive ? customEliteNumbers : lotteryData.elite_greens;

        for (let i = 0; i < 5; i++) {
            let sequence = [];
            let attempts = 0;
            
            while (sequence.length < nToDraw && attempts < 500) {
                let val;
                if (eliteModeActive && eliteNums.length >= nToDraw) {
                    val = eliteNums[Math.floor(Math.random() * eliteNums.length)];
                } else {
                    val = Math.floor(Math.random() * maxNum) + 1;
                }
                
                if (!annulledFunnel.has(val) && !sequence.includes(val)) {
                    sequence.push(val);
                }
                attempts++;
            }

            if (sequence.length === nToDraw) {
                sequence.sort((a, b) => a - b);
                
                const hits = sequence.filter(n => lotteryData.elite_greens.includes(n)).length;
                const minHits = lotteryData.name.includes('quina') ? 2 : 4;

                if (hits >= minHits) {
                    let type = "QUADRA";
                    if (hits === 2) { type = "DUQUE"; countDuque++; }
                    else if (hits === 3) { type = "TERNO"; countTerno++; }
                    else if (hits === 4) { countQuadra++; }
                    else if (hits === 5) { type = "QUINA"; countQuina++; }
                    else if (hits >= 6) { type = "SENA"; countSena++; }
                    
                    const hitData = { type, sequence: [...sequence], hits };
                    detectedHits.push(hitData);
                    renderHit(hitData);
                    if (hits >= (minHits + 1)) speak(`Alerta de Elite! ${type} detectada.`);
                }
                renderSequence(sequence);
                totalGenerated++;
            }
        }

        updateStats();
        viewport.scrollTop = viewport.scrollHeight;
        animationId = requestAnimationFrame(generateChunk);
    }

    function renderHit(hit) {
        const panel = document.getElementById("hits-panel");
        if (panel.innerText.includes("Nenhum")) panel.innerHTML = "";
        
        const div = document.createElement("div");
        div.className = "p-2 rounded bg-slate-900 border border-slate-700 x-small d-flex justify-content-between align-items-center mb-1";
        div.innerHTML = `
            <span class="badge bg-warning text-dark">${hit.type}</span>
            <span class="text-white font-monospace">${hit.sequence.join(", ")}</span>
            <span class="text-info">${hit.hits} pts</span>
        `;
        panel.prepend(div);
    }

    function renderSequence(numbers) {
        const row = document.createElement("div");
        row.className = "sequence-row";
        numbers.forEach(n => {
            const ball = document.createElement("div");
            ball.className = "num-ball";
            ball.innerText = n.toString().padStart(2, "0");
            if (lotteryData.elite_greens.includes(n)) ball.classList.add("num-elite");
            if (lotteryData.reclaimed_numbers.includes(n)) ball.classList.add("num-reclaimed");
            row.appendChild(ball);
        });
        if (container.children.length > 20) container.removeChild(container.firstChild);
        container.appendChild(row);
    }

    btnStart.addEventListener("click", () => {
        generatorRunning = true;
        btnStart.classList.add("d-none");
        btnPause.classList.remove("d-none");
        speak("Cálculos iniciados com base nos concursos reais.");
        generateChunk();
    });

    btnPause.addEventListener("click", () => {
        generatorRunning = false;
        btnPause.classList.add("d-none");
        btnStart.classList.remove("d-none");
    });

    const eliteSwitch = document.getElementById("elite-mode-switch");
    const eliteInputs = document.querySelectorAll(".elite-num-input");
    const btnApplyElite = document.getElementById("btn-apply-elite");

    eliteSwitch.addEventListener("change", (e) => {
        eliteModeActive = e.target.checked;
        document.getElementById("elite-indicator").classList.toggle("d-none", !eliteModeActive);
        updateElitePanel();
    });

    function fillEliteInputs(numbers) {
        eliteInputs.forEach((input, idx) => {
            if (numbers[idx]) input.value = numbers[idx];
            else input.value = "";
        });
        updateCustomElite();
    }

    function updateCustomElite() {
        customEliteNumbers = Array.from(eliteInputs)
            .map(input => parseInt(input.value))
            .filter(val => !isNaN(val));
    }

    btnApplyElite.addEventListener("click", () => {
        updateCustomElite();
        speak("Configurações de Elite aplicadas.");
        updateElitePanel();
    });

</script>
{% endblock %}