const squares = document.querySelectorAll(".tile-active");
const bombImage = "images/x.png";
const bombSoundSrc = 'sfx/bomb.mp3';
const starSoundSrc = 'sfx/tile.mp3';
let round = 1;
let openedSquares = 0;
const maxOpens = 1;
var imgs = ['images/jv02.png'];

function sortImages() {
    var imgO = imgs[Math.floor(Math.random() * imgs.length)];
    return imgO;
}

const starImage = sortImages();

function playSound(src) {
    const sound = new Audio(src);
    sound.play();
}

function handleSquareClick(square) {
    if (openedSquares >= maxOpens) return;

    openedSquares++;

    if (round === 1) {
        round01(square);
    } else if (round === 2) {
        round02(square);
    } else if (round === 3) {
        round03(square);
    }
}

function round01(square) {
    square.removeEventListener('click', handleSquareClickWrapper);
    const selectedImage = openedSquares === 1 ? bombImage : starImage;
    const isBomb = selectedImage === bombImage;
    const resgatar = document.getElementById("resgatar");
    const proximoRound = document.getElementById("proximoRound");
    proximoRound.addEventListener('click', function() {
        round = 2;
        resetSquares();
        document.getElementById("qtdTentativas").innerText = "Tentativas: 2 / 3";
    });

    applySquareEffects(square, selectedImage, isBomb);

    if (openedSquares === 1) {
        resgatar.setAttribute("onclick", "return false;");
        resgatar.classList.add("disabled");
        resgatar.innerText = 'Resgatar';
        round = 2;
        proximoRound.style.display = '';
        proximoRound.innerText = 'Tentar novamente 2/3';
        openedSquares = 5;
        document.getElementById("restTentativas").innerHTML = '2 tentativas';
        setTimeout(function () {
            openModal('modal02');
        }, 1000);
    }
}

function round02(square) {
    square.removeEventListener('click', handleSquareClickWrapper);
    const selectedImage = openedSquares === 1 ? bombImage : starImage;
    const isBomb = selectedImage === bombImage;
    const resgatar = document.getElementById("resgatar");
    const proximoRound = document.getElementById("proximoRound");
    proximoRound.addEventListener('click', function() {
        round = 3;
        resetSquares();
        document.getElementById("qtdTentativas").innerText = "Tentativas: 3 / 3";
    });

    applySquareEffects(square, selectedImage, isBomb);

    if (openedSquares === 1) {
        resgatar.setAttribute("onclick", "return false;");
        resgatar.classList.add("disabled");
        resgatar.innerText = 'Resgatar';
        round = 3;
        proximoRound.style.display = '';
        proximoRound.innerText = 'Tentar novamente 1/3';
        document.getElementById("restTentativas").innerHTML = '1 tentativa';
        setTimeout(function () {
            openModal('modal02');
        }, 1000);
    }
}

function round03(square) {
    square.removeEventListener('click', handleSquareClickWrapper);
    const selectedImage = starImage;
    const isBomb = selectedImage === bombImage;
    const resgatar = document.getElementById("resgatar");

    applySquareEffects(square, selectedImage, isBomb);

    if (openedSquares === 1) {
        resgatar.removeAttribute("onclick");
        resgatar.classList.remove("disabled");
        resgatar.innerText = 'Resgatar';
        setTimeout(function () {
            openModal('modal01');
        }, 1000);
    }
}

function applySquareEffects(square, selectedImage, isBomb) {
    square.classList.replace('tile-active', isBomb ? 'tile-bomb' : 'tile-star');
    square.style.transform = 'rotateY(180deg)';
    square.style.transition = '0.6s';

    const div = document.createElement('div');
    div.classList.add('tile-content');
    const img = document.createElement('img');
    img.src = selectedImage;
    div.appendChild(img);
    square.appendChild(div);

    playSound(isBomb ? bombSoundSrc : starSoundSrc);
}

function handleSquareClickWrapper(event) {
    handleSquareClick(event.currentTarget);
}

function resetSquares() {
    openedSquares = 0;
    squares.forEach(square => {
        square.innerHTML = '';
        square.classList.remove('tile-bomb', 'tile-star');
        square.classList.add('tile-active');
        square.style.transform = 'rotateY(0deg)';
        square.addEventListener('click', handleSquareClickWrapper);
        document.getElementById("resgatar").disabled = true;
        document.getElementById("proximoRound").style.display = 'none';
    });
}

squares.forEach(square => {
    square.addEventListener('click', handleSquareClickWrapper);
});