const nPlayerButton = document.querySelector("#newPlayerButton");
const playersList = document.querySelector("#playersList");
const startButton = document.querySelector("#startGame");
const logArea = document.querySelector("#gameLog");
const body = document.querySelector("body");
const hintCheckbox = document.querySelector("#hintCheck");
const timerInput = document.getElementById("timerInput");

const theme = localStorage.getItem('theme');

if (theme == "light") {
    body.classList.add("light-theme");
}

let stage = 0;
let currentPlayer = 0;
let impostor;
let allPlayers;
let currentName;
let secret;
let enableHint;
let timer;

nPlayerButton.addEventListener('click', () => {
    const holder = document.createElement("div");
    const newPlayer = document.createElement("input");
    const killButton = document.createElement("button");
    holder.classList.add("playerHolder");
    killButton.textContent = "X";
    killButton.addEventListener('click', () => {
        holder.remove();
    });
    holder.appendChild(newPlayer);
    holder.appendChild(killButton);
    playersList.appendChild(holder);
});

startButton.addEventListener('click', () => {
    switch (stage) {
        case 0:
        allPlayers = Array.from(document.querySelectorAll("#playersList input"));
        if (allPlayers.some(player => !player.value)) {
            alert("Por favor, preencha o nome de todos os jogadores.");
            return;
        }
        body.classList.add("game");
        enableHint = hintCheckbox.checked;
        clear("Prepare-se para iniciar o jogo.");
        impostor = choose();
        secret = getWordWithHint().then(result => {
            secret = result;
        });
        stage = -1;
        break;
        
        case 1:
        if (currentName == impostor) {
            clear(currentName + " é impostor" + (enableHint ? (", sua dica é " + secret.hint + ".") : "."));
            logClass('impostor');
        } else {
            clear(currentName + " é civil, a palavra é " + secret.word);
            logClass('civil');
        }
        
        currentPlayer += 1;
        if (currentPlayer == allPlayers.length
        ) {
            stage += 1;
        } else {
            stage = -1;
        }
        break;
        
        case -1:
        currentName = allPlayers[currentPlayer].value;
        clear(`
        <p>Entregue o dispositivo para:<br><span class="playerName">${currentName}</span><br>para continuar</p>
        `);
            stage = 1;
            break;
            
            case 2: {
                clear("O jogo começou! Cada um deve falar uma palavra relacionada ao tema.\n<p id='timer'>Prepare-se!</p>");
                startTimer(timerInput.value);
                stage += 1;
                break;
            }
            case 3: {
                if (!!navigator.vibrate) {
                    navigator.vibrate(0);
                }
                if (!!StayAwake.enableScreenTimeout) {
                    StayAwake.enableScreenTimeout();
                }
                clearInterval(timer);
                clear("O jogo acabou! Votem para expulsar um jogador.")
                stage += 1;
                break;
            }
            
            case 4: {
                clear(`O impostor era <b>${impostor}</b>; a palavra era <b>${secret.word}</b>; a dica <b>${secret.hint}</b>.`);
                stage += 1;
                break;
            }
            
            default:
            body.classList.remove("game");
            stage = 0;
            currentPlayer = 0;
            break;
        }
    });
    
    function choose() {
        const randomIndex = Math.floor(Math.random() * allPlayers.length);
        return allPlayers[randomIndex].value;
    }
    
    function log(text) {
        logArea.innerHTML = logArea.innerHtml + "<br>" + text;
    }
    
    function clear(text) {
        logArea.classList.forEach(item => {
            logArea.classList.remove(item);
        })
        logArea.innerHTML = text;
    }
    
    function logClass(className) {
        logArea.classList.toggle(className);
    }
    
    async function getWordWithHint() {
        try {
            const response = await fetch('words.json');
            const data = await response.json();
            const randomWordObj = data[Math.floor(Math.random() * data.length)];
            const randomHint = randomWordObj.hints[Math.floor(Math.random() * randomWordObj.hints.length)];
            
            return {
                word: randomWordObj.word,
                hint: randomHint
            };
        } catch (error) {
            console.error('Error loading words:', error);
        }
    }
    
    function startTimer(minutes) {
        const now = new Date();
        const minutesLater = new Date(now.getTime() + minutes * 60 * 1000);
        timer = setInterval(() => {
            const timerElement = document.getElementById("timer");
            if (!timerElement) { return; }
            const rightNow = new Date().getTime();
            var distance = minutesLater.getTime() - rightNow;
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            timerElement.innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            if (!!StayAwake.disableScreenTimeout) {
                StayAwake.disableScreenTimeout();
            }
            
            if (distance < 0) {
                clearInterval(timer);

                if (!!navigator.vibrate) {
                    navigator.vibrate([1000, 500, 1000, 2000, 1000, 500, 1000, 2000, 1000, 500, 1000, 2000]);
                }

                if (!!StayAwake.enableScreenTimeout) {
                    StayAwake.enableScreenTimeout();
                }

                timerElement.innerText = "Acabou!";
            }
        }, 1000)
    }
    
    function changeTheme(){
        body.classList.toggle('light-theme');
        console.log(body.classList.contains('light-theme') ? "light" : "dark")
        localStorage.setItem('theme', body.classList.contains('light-theme') ? "light" : "dark");
    }