// Function to fetch scoreboard data using AJAX
function fetchScoreboardData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/scoreboard", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                updateScoreboard(JSON.parse(xhr.responseText));
            } else {
                console.error("Failed to fetch scoreboard data.");
            }
        }
    };
    xhr.send();
}

// Function to update scoreboard with fetched data
function updateScoreboard(data) {
    var liveGamesSection = document.getElementById('live-games-section');
    var preGamesSection = document.getElementById('pre-games-section');
    var finalGamesSection = document.getElementById('final-games-section');

    if (liveGamesSection) {
        var liveGamesExist = data && data.live_games && data.live_games.length > 0;
        if (liveGamesExist) {
            if (!document.getElementById('live-games')) {
                var targetElement = document.getElementById('live-games-section');
                var newElement = document.createElement('h1');
                newElement.setAttribute('id', 'live-games');
                newElement.innerText = 'Live Games';
                targetElement.parentNode.insertBefore(newElement, targetElement);
            }
            liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
        } else {
            var liveGamesElement = document.getElementById('live-games');
            if (liveGamesElement) {
                liveGamesElement.remove();
            }
            liveGamesSection.innerHTML = '';
        }
    }

    if (preGamesSection) {
        var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
        if (preGamesExist) {
            if (!document.getElementById('on-later')) {
                var targetElement = document.getElementById('pre-games-section');
                var newElement = document.createElement('h1');
                newElement.setAttribute('id', 'on-later');
                newElement.innerText = 'Scheduled Games';
                targetElement.parentNode.insertBefore(newElement, targetElement);
            }
            preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
        } else {
            var onLaterElement = document.getElementById('on-later');
            if (onLaterElement) {
                onLaterElement.remove();
            }
            preGamesSection.innerHTML = '';
        }
    }

    if (finalGamesSection) {
        var finalGamesExist = data && data.final_games && data.final_games.length > 0;
    
        // Check if final games exist
        if (finalGamesExist) {
            // Create or update "Game Over" heading
            if (!document.getElementById('game-over')) {
                var targetElement = document.getElementById('final-games-section');
                var newElement = document.createElement('h1');
                newElement.setAttribute('id', 'game-over');
                newElement.innerText = 'Game Over';
                targetElement.parentNode.insertBefore(newElement, targetElement);
            }
    
            // Update final games section with generated game boxes
            finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
        } else {
            // Remove "Game Over" heading if it exists and clear final games section
            var gameOverElement = document.getElementById('game-over');
            if (gameOverElement) {
                gameOverElement.remove();
            }
            finalGamesSection.innerHTML = '';
        }
    }

    updateGauge()
}

function updateGauge() {
    document.querySelectorAll('.gauge').forEach(function(gauge) {
        // Get the score value from the data-score attribute
        var score = parseInt(gauge.getAttribute('data-score'));

        // Clamp the score value between 0 and 700
        score = Math.min(650, Math.max(0, score));

        // Calculate the gauge width as a percentage
        var gaugeWidth = (score / 650) * 100;

        // Set the width of the gauge
        gauge.style.width = gaugeWidth + '%';

        if (score <=300) {
            gauge.style.backgroundColor = '#4A90E2'
        } else if (score <= 500) {
            gauge.style.backgroundColor = '#FF4500'
        } else {
            gauge.style.backgroundColor = '#FF0033'
        }
    });
}

// Function to generate HTML for game boxes
function generateGameBoxes(games, state) {
    var html = '';
    games.forEach(function(game) {
        if (game['Game State'] === state) {
            html += '<div class="game-box">';
            if (state === 'LIVE') {
                if (game['Time Running']) {
                    html += '<div class="live-dot"></div>'; // Display the red dot if the game is live
                }
                html += '<div class="team-info">';
                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
                html += '<div class="team-info-column">';
                html += '<span class="team-name">' + game['Away Team'] + '</span>';
                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
                html += '<span class="team-power-play">' + game['Away Power Play'] + '</span>';
                html += '</div>';
                html += '<span class="team-score">' + game['Away Score'] + '</span>';
                html += '</div>';
                html += '<div class="team-info">';
                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
                html += '<div class="team-info-column">';
                html += '<span class="team-name">' + game['Home Team'] + '</span>';
                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
                html += '<span class="team-power-play">' + game['Home Power Play'] + '</span>';
                html += '</div>';
                html += '<span class="team-score">' + game['Home Score'] + '</span>';
                html += '</div>';
                html += '<div class="game-info">';
                if (game['Intermission']) {
                    html += '<div class="live-state-intermission">'
                    if (game['Period'] == 1 ) {
                        html += '1st Int';
                    }
                    if (game['Period'] == 2 ) {
                        html += '2nd Int';
                    }
                    if (game['Period'] == 3 ) {
                        html += '3rd Int';
                    }
                    html += '</div>';
                    html += '<div class="live-time-intermission">' + game['Time Remaining'] + '</div>';
                } else {
                    html += '<div class="live-state">';
                    if (game['Period'] == 1 ) {
                        html += '1st';
                    }
                    else if (game['Period'] == 2 ) {
                        html += '2nd';
                    }
                    else if (game['Period'] == 3 ) {
                        html += '3rd';
                    }
                    else {
                        html += 'OT';
                    }
                    html += '</div>';
                    html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
                }
                html += '</div>';
                if (!game['Intermission']) {
                    html += '<div class="hype-meter-label">';
                    html += '<strong>Hype Meter</strong>';
                    html += '</div>';

                    html += '<div class="game-score-gauge">';
                    html += '<div class="gauge" data-score="' + game['Priority'] + '"></div>';
                    html += '</div>';
                    html += '</div>';
                }


                html += '</div>';
            } else if (state === 'PRE') {
                html += '<div class="pre-state">' + game['Start Time'] + '</div>';
                html += '<div class="team-info">';
                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
                html += '<span class="team-name">' + game['Away Team'] + '</span>';
                html += '<span class="team-record">' + game['Away Record'] + '</span>';
                html += '</div>';
                html += '<div class="team-info">';
                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
                html += '<span class="team-name">' + game['Home Team'] + '</span>';
                html += '<span class="team-record">' + game['Home Record'] + '</span>';
                html += '</div>';
            } else if (state === 'FINAL') {
                html += '<div class="final-state">';
                if (game['Last Period Type'] === 'REG') {
                    html += 'FINAL';
                } else if (game['Last Period Type'] === 'OT') {
                    html += 'FINAL/OT';
                } else {
                    html += 'FINAL/SO';
                }
                html += '</div>';
                html += '<div class="team-info">';
                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
                html += '<div class="team-info-column">';
                html += '<span class="team-name">' + game['Away Team'] + '</span>';
                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
                html += '</div>';
                html += '<span class="team-score">' + game['Away Score'] + '</span>';
                html += '</div>';
                html += '<div class="team-info">';
                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
                html += '<div class="team-info-column">';
                html += '<span class="team-name">' + game['Home Team'] + '</span>';
                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
                html += '</div>';
                html += '<span class="team-score">' + game['Home Score'] + '</span>';
                html += '</div>';
            }
            html += '</div>';
        }
    });
    return html;
}

// Function to reload the scoreboard every 20 seconds
function autoRefresh() {
    fetchScoreboardData();
    setTimeout(autoRefresh, 5000); // 20 seconds
}

// Call the autoRefresh function when the page loads
window.onload = function() {
    autoRefresh();
};