// === NA PÁGINA PRINCIPAL (main.js) ===
 
// 1. Cria a thread dedicada apontando para o arquivo do worker
const meuWorker = new Worker('calculadora-worker.js');
 
// 2. Envia uma carga de dados para o worker processar
meuWorker.postMessage({ numeroInicial: 5000000 });
 
// 3. Ouve a resposta enviada de volta pelo worker
meuWorker.onmessage = function(evento) {
    console.log('Resultado recebido do Worker:', evento.data.resultado);
};
 
// 4. Captura eventuais erros de execução
meuWorker.onerror = function(erro) {
    console.error('Erro no Worker:', erro.message);
};
 
// 5. Encerra a thread quando não for mais necessária
// meuWorker.terminate();

// === DENTRO DO WORKER (calculadora-worker.js) ===
 
// O escopo global do worker é acessado via 'self'
self.onmessage = function(evento) {
    const limite = evento.data.numeroInicial;
    let totalPrimos = 0;
 
    // Cálculo matemático intensivo que demoraria segundos
    for (let i = 2; i <= limite; i++) {
        let primo = true;
        for (let j = 2; j * j <= i; j++) {
            if (i % j === 0) {
                primo = false;
                break;
            }
        }
        if (primo) totalPrimos++;
    }
 
    // Devolve o resultado para a thread principal
    self.postMessage({ resultado: totalPrimos });
};

<div class="wzw-worker-demo">
    <h3>⚡ Demonstração de Concorrência Real com Web Worker</h3>
    
    <!-- Elemento com animação CSS contínua para provar a fluidez visual -->
    <div class="spinner-teste"></div>
    <p><small>Observe como este ícone gira sem qualquer interrupção durante o cálculo pesado.</small></p>
 
    <button id="btnCalcular" class="btn-worker">Calcular Números Primos em Background</button>
    <div id="painelStatus" class="status-box">Aguardando comando...</div>
</div>

/* Animação que provará a ausência de congelamento da UI */
@keyframes girarSuave {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 
.spinner-teste {
    width: 44px;
    height: 44px;
    margin: 12px 0;
    border: 5px solid #334155;
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: girarSuave 1s linear infinite;
}
 
.wzw-worker-demo {
    padding: 24px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #f8fafc;
}
 
.btn-worker {
    padding: 12px 20px;
    background-color: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
 
.status-box {
    margin-top: 15px;
    padding: 12px;
    background-color: #1e293b;
    border-radius: 6px;
    font-family: monospace;
}

// Código do Worker encapsulado em string para teste imediato
const codigoWorker = `
    self.onmessage = function(e) {
        const n = e.data;
        let contagem = 0;
        // Laço pesado proposital
        for (let i = 0; i < n; i++) {
            contagem += Math.sqrt(i);
        }
        self.postMessage('Cálculo concluído com sucesso: ' + Math.round(contagem));
    };
`;
 
// Criação do Worker inline via Blob
const blob = new Blob([codigoWorker], { type: 'application/javascript' });
const workerUrl = URL.createObjectURL(blob);
const workerInline = new Worker(workerUrl);
 
const btn = document.getElementById('btnCalcular');
const status = document.getElementById('painelStatus');
 
btn.addEventListener('click', () => {
    status.textContent = '⏳ Executando cálculo massivo em thread separada... A animação continua a 60 FPS!';
    btn.disabled = true;
 
    // Dispara a carga de trabalho para a thread paralela
    workerInline.postMessage(20000000);
});
 
workerInline.onmessage = function(evento) {
    status.textContent = '✅ ' + evento.data;
    btn.disabled = false;
};

// Cria um buffer de 32 Megabytes
const bufferGigante = new ArrayBuffer(32 * 1024 * 1024);
 
// O segundo argumento transfere a posse com latência zero (Zero-Copy)
meuWorker.postMessage(bufferGigante, [bufferGigante]);
 
// Na thread principal, bufferGigante.byteLength agora vale 0!