// Get the clear storage button element
const clearStorageBtn = document.getElementById('clear-storage-btn');

// Add a click event listener to the clear storage button
clearStorageBtn.addEventListener('click', () => {
    // Remove the cookies
    function removeCookies() {
        // Set the expiration date to a date in the past
        const expirationDate = new Date(0).toUTCString();

        // Set the ext_id cookie to expire
        document.cookie = `ext_id=; expires=${expirationDate}`;

        // Set the luid cookie to expire
        document.cookie = `luid=; expires=${expirationDate}`;

        // Set the aime_card_id cookie to expire
        document.cookie = `aime_card_id=; expires=${expirationDate}`;
    }

    // Example usage
    removeCookies();

    console.log('Local storage cleared.');
    window.location = "/";
});

// Get the cookie string
const cookieString = document.cookie;

// Parse the cookie string and extract the values
const cookies = cookieString.split(';');
let ext_id, luid, aime_card_id;

for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    const cookieParts = cookie.split('=');

    if (cookieParts[0] === 'ext_id') {
        ext_id = cookieParts[1];
    }

    if (cookieParts[0] === 'luid') {
        luid = cookieParts[1];
    }

    if (cookieParts[0] === 'aime_card_id') {
        aime_card_id = cookieParts[1];
    }
}

// Send the user to the sign in page if they aren't already signed in to the website.
if (ext_id && luid) {
    console.log(`ext_id: ${ext_id}, luid: ${luid}`);

} else {
    console.log('User Data Not Detected! Please Sign In.');
    window.location = "/";
}
const userdata = JSON.parse(document.currentScript.getAttribute('data-userdata'));

//=====================================================================
// Now Exiting: Cookie Data ///////////////// Now Entering: User Data
//=====================================================================

// general functions 

function padNumber(num, size) {
    let s = num + "";
    while (s.length < size) {
        s = "0" + s;
    }
    return s;
}

async function getSongInformation(musicData,id) {
    const songMatch = musicData[id];
    if (!songMatch) {
        return null;
    }
    return songMatch;
}


// Ban Check lmao

if (userdata.ban_state !== 0) {
    //nice
    const parent = document.getElementById("User");
    const wrapperDiv = document.createElement("div");
    wrapperDiv.id = 'wrapper';
    const newDiv = document.createElement("div");
    newDiv.classList.add('error')
    newDiv.innerHTML = `<h3 style='
    word-wrap: break-word;
    max-width:800px;'>Heya! It looks like you've been banned from playing on this profile, but don't worry - you can still enjoy the game in guest mode and view this profile. However, your account won't be able to play on it anymore. If you have any questions about your ban, please contact your Network Administrator.</h3>`; // or set the HTML content with newDiv.innerHTML = "<p>This is some HTML content</p>;
    parent.insertBefore(wrapperDiv, parent.firstChild);
    wrapperDiv.appendChild(newDiv);
}


// Check if the user image element exists
if (userdata.icon_id === 10) {
    const userImage = document.getElementById('user-image');
    userImage.src = "images/" + ext_id + '-up.jpg';
} else if (document.currentScript.getAttribute('data-userdata')) {
    const userImage = document.getElementById('user-image');
    const UI_Icon = userdata.icon_id;

    // Pad the number because game weird

    // Set the user image source
    userImage.src = "assets/icon/UI_Icon_" + padNumber(Number(UI_Icon), 6) + '.png';
}

// title getting
const request = new XMLHttpRequest();
request.open('GET', '/assets/metadata/titleMetadata.json', true);

request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
        const data = JSON.parse(this.response);
        const userTitle = document.getElementById('user-title-text');
        var userTitleText = ""
        for (title of data) {
            if (userdata.title_id === title.titleId) {
                userTitleText = title.name
                break
            }
            continue
        }
        userTitle.textContent = userTitleText
    } else {
        // handle the error
    }
};

request.onerror = function () {
    // handle the error
};

request.send();

// User Play Log

let scoreIncrement = 0;
let errorIncrement = 0;
let displayedScoreCount = 20;

async function userPlayLogFormatter(div, loadMoreButton) {
    const UserPlayLogData = await UserPlayLog(aime_card_id);
    let scoresWrapperDiv = document.getElementById("scoreWrapper");

    // If the scores wrapper div doesn't exist, create it.
    if (scoresWrapperDiv === null) {
        scoresWrapperDiv = document.createElement('div');
        scoresWrapperDiv.id = "scoreWrapper";
        div.appendChild(scoresWrapperDiv);
    }

    // Get the user's play log data and music IDs.
    const musicIds = UserPlayLogData.map(score => score.music_id);
    const musicData = await musicMetadata();
    
    let errorIncrement = 0;
    let scoreIncrement = 0;
    const startIndex = scoresWrapperDiv.children.length;
    const maxScores = startIndex + 20;
    for (let i = startIndex; i < UserPlayLogData.length && scoreIncrement < maxScores; i++) {
        const newDiv = document.createElement('div'); // Create a Div
        let score = JSON.parse(JSON.stringify(UserPlayLogData[i])); // get score data
        let song = await getSongInformation(musicData, score.music_id) // get song data

        if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
            console.log(song)
            console.log(score.music_id)
            console.log("Song or title is undefined");
            errorIncrement++
            continue;
        }

        newDiv.innerHTML = `
            <h4>${song.name.str || ""} || </h4>
        `;

        let jacket = document.createElement('img');
        jacket.addEventListener("error", function () {
            this.src = "assets/icon/UI_Icon_000000.png";
        });
        jacket.classList.add('score-jacket');
        jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(score.music_id), 6) + '.png';
        newDiv.append(jacket)

        newDiv.setAttribute("id", "score-grid");
        newDiv.setAttribute("class", "item");
        scoreIncrement++
        
        scoresWrapperDiv.appendChild(newDiv);
        
    }

    // Edit the Score Info Header with the relevant information.
    const header = document.querySelector('#score-info-header');
    header.textContent = `Showing ${startIndex + scoreIncrement - errorIncrement} out of ${UserPlayLogData.length} scores.`;
    if (errorIncrement > 0) {
        header.insertAdjacentHTML('afterend', `<p>${errorIncrement} Songs Failed to load properly, most likely due to missing information.</p>`);
    }

    // If there are no more scores to load, hide the "Load More" button.
    if (startIndex + scoreIncrement >= UserPlayLogData.length) {
        loadMoreButton.style.display = "none";
    }
}






//=====================================================================
// Now Exiting: User Data ////////////// Now Entering: Nested Div Hell
//=====================================================================

const showContent = (contentNumber) => {
    // Select the content div with the data-content attribute equal to the contentNumber
    const contentDiv = document.querySelector(`[data-content="content-${contentNumber}"]`);

    // Hide all content divs except the selected one
    const contentDivs = document.querySelectorAll('[data-content]');
    contentDivs.forEach((div) => {
        if (div === contentDiv) {
            if (contentNumber === 2) { // If the ContentNumber is set to the PlayLog, Go to the userPlayLogFormatter Function
                userPlayLogFormatter(div)
            }
            div.classList.remove('hidden');
        } else {
            div.classList.add('hidden');
        }
    });
};

//=====================================================================
// Now Exiting: Nested Div Hell ///////////// Now Entering: Fetch Land
//=====================================================================

function UserPlayLog(aime_card_id) {
    const input = aime_card_id;
    const url = "/api/getUserScores/";

    // Return the fetch promise so that it can be handled within userPlayLogFormatter
    return fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            input: aime_card_id
        })
    })
        .then(response => response.json())
        .then(data => data.data)
        .catch(error => console.error(error));
}

async function musicMetadata() {
    const url = "/assets/metadata/musicMetadata.json";

    try {
        const response = await fetch(url, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            },
        });

        const data = await response.json();

        const mapping = {};
        data.forEach((song) => {
            mapping[song.name.id] = song;
        });

        return mapping;
    } catch (error) {
        console.error(error);
    }
}