// TODO: Inna - Implement frontend game functionality

let gameState = {
    currentQuestion: null,
    optionsDisabled: false
};

function loadQuestion() {
    fetch('/get_question')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error(data.error);
                return;
            }
            if (data.game_over) {
                endGame(data.final_score);
                return;
            }
            gameState.currentQuestion = data;
            displayQuestion(data);
        })
        .catch(error => console.error('Error:', error));
}

function displayQuestion(questionData) {
    document.getElementById('question-num').textContent = questionData.question_number;
    document.getElementById('question-text').textContent = questionData.question;
    
    const optionsContainer = document.getElementById('options-container');
    optionsContainer.innerHTML = '';
    
    const optionLetters = ['A', 'B', 'C', 'D'];
    questionData.options.forEach((option, index) => {
        const optionElement = document.createElement('div');
        optionElement.className = 'option';
        optionElement.textContent = `${optionLetters[index]}. ${option}`;
        optionElement.onclick = () => selectAnswer(option);
        optionsContainer.appendChild(optionElement);
    });
    
    document.getElementById('feedback').style.display = 'none';
    gameState.optionsDisabled = false;
}

function selectAnswer(selectedAnswer) {
    if (gameState.optionsDisabled) return;
    gameState.optionsDisabled = true;
    
    fetch('/answer', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ answer: selectedAnswer })
    })
    .then(response => response.json())
    .then(data => {
        const feedback = document.getElementById('feedback');
        feedback.style.display = 'block';
        
        if (data.correct) {
            feedback.textContent = 'Correct! 🎉';
            feedback.className = 'feedback correct';
            setTimeout(() => {
                if (data.next_question) loadQuestion();
                else endGame(data.final_score, true);
            }, 1500);
        } else {
            feedback.textContent = `Incorrect! Correct answer: ${data.correct_answer}`;
            feedback.className = 'feedback incorrect';
            setTimeout(() => endGame(data.final_score), 2000);
        }
    })
    .catch(error => console.error('Error:', error));
}

function useLifeline(lifelineName) {
    fetch(`/lifeline/${lifelineName}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
                return;
            }
            document.getElementById('lifeline-result').textContent = 
                data.hint || data.friend_says || 'Lifeline used!';
        })
        .catch(error => console.error('Error:', error));
}

function endGame(finalScore, isWin = false) {
    document.getElementById('final-prize').textContent = finalScore;
    document.getElementById('game-over-screen').style.display = 'block';
    document.querySelector('.game-area').style.display = 'none';
}

function restartGame() {
    window.location.href = '/start';
}

document.addEventListener('DOMContentLoaded', function() {
    if (window.location.pathname === '/start') {
        loadQuestion();
    }
});