function retryGame(){
    window.location.reload();
}
 
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('childId');
const gameVersion = urlParams.get('gameName');
const assignmentId = urlParams.get('assignmentId');
const worksheetId = urlParams.get('worksheetId');
const gameId = urlParams.get('id');
let submitNotic;

// console.log(userId);
let startTime = Date.now();


const url = window.location.href;
const gameName = url.split('/');
const gameType = gameName[3].split('?id=');
// let gameVersion;

// console.log("Here is game name ", gameType[0])

// if(gameType[0] == "guided-tracing"){
//     gameVersion = gameType[0].split('?')[0];
//     gameId = gameName[4];
//     console.log('Type - 1');

// } else if(gameName.length == 4){
//     gameVersion = gameName[3].split('?')[0];
//     gameId = urlParams.get('id');
// }
// else if(gameName.length == 5){
//     gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
//     gameId = urlParams.get('id');
//     console.log('Type - 2');
// }else if(gameName.length == 6){
//     gameVersion = gameType[0] + '-' + gameName[4];
//     gameId = urlParams.get('id');
//     console.log('Type - 3');
// }

function submitUserData(drawingZone) {
    const endTime = Date.now();
    const timeDifference = endTime - startTime;
    const timeDifferenceInSeconds = timeDifference / 1000;
    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);

    let imageCode;
    let gameScore;

    if(scoreTotal){
        gameScore = scoreTotal;
    }else{
        gameScore = 0;
    }
    // console.log('This is from main point', scoreTotal);
    drawingZone.renderer.snapshot((image) => {
        submitButton.setVisible(true);
        image.style.width = '160px';
        image.style.height = '120px';
        image.style.paddingLeft = '2px';
        document.body.appendChild(image);
        // Download the snapshot as an image
        // const link = document.createElement('a');
        // link.href = image.src;
        // link.download = 'my_drawing.png';
        // link.click();
        document.body.removeChild(image);
        imageCode = image.src;
        let starValue = Math.round((scoreTotal / maxScore) * 10);
        starValue = starValue === 0 ? 3 : starValue;
        // console.log('Star Value', starValue);
        // console.log('starValue', starValue)
        // if(scoreTotal === maxScore){
        //     starValue = 5;
        // } else if(scoreTotal === maxScore - 1){
        //     starValue = 4;
        // } else{
        //     starValue = 3;
        // }
        let maxStarValue = 10;
        let progress = 0;
        let feedbackMessage = '';
        if (starValue >= 1 && starValue <= 3) {
            feedbackMessage = "You're making progress! Let's keep going!";
          } else if (starValue >= 4 && starValue <= 6) {
            feedbackMessage = "Nice work! You're improving every day!";
          } else if (starValue >= 7 && starValue <= 8) {
            feedbackMessage = "Amazing work! Keep it up!";
          } else if (starValue >= 9 && starValue <= 10) {
            feedbackMessage = "Outstanding! You're a true superstar!";
          } else {
            feedbackMessage = "Invalid star value.";
          }

        
        function progressIncrement() {
            const interval = setInterval(() => {
                if (progress >= 100) {
                    clearInterval(interval);
                } else {
                    progress += 10; 
                    progressBar.style.width = `${progress}%`;
                }
            }, 100);
        }
        progressIncrement();
        function addStarScalingStyles() {
            const style = document.createElement('style');
            style.innerHTML = `
                @keyframes scaleUp {
                    0% {
                        transform: scale(1.5);
                    }
                    100% {
                        transform: scale(1);
                    }
                }
                .star {
                    display: inline-block;
                    transform-origin: center;
                    transform: scale(0); /* Initial state before animation */
                    opacity: 0; /* Initial opacity */
                    animation: scaleUp 0.5s ease forwards;
                }
            `;
            document.head.appendChild(style);
        }
        addStarScalingStyles();
       
        const starContainer = document.getElementById('star-container');
        let scoreBoard = document.getElementById('scoreBoard');
        let loadingMainContainer = document.getElementById('loadingMainContainer');
        loadingMainContainer.style.display = 'flex';

        const loadingDiv = document.getElementById('loadingState');
        loadingDiv.style.display = 'flex';

        const containerDiv = document.createElement('div');
        containerDiv.classList.add('w-full');
        containerDiv.style.display = 'flex';
        containerDiv.style.flexDirection = 'column';
        containerDiv.style.justifyContent = 'center';
        containerDiv.style.alignItems = 'center';

        const paragraph = document.createElement('p');
        paragraph.textContent = 'HOLD ON.';
        paragraph.style.fontSize = '16px';
        paragraph.style.fontWeight = '600';
        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
        containerDiv.appendChild(paragraph);

        const progressBarContainer = document.createElement('div');
        progressBarContainer.style.position = 'relative';
        progressBarContainer.style.display = 'flex';
        progressBarContainer.style.alignItems = 'center';
        progressBarContainer.style.border = '1px solid #AFB8E6';
        progressBarContainer.style.height = '10px'; 
        progressBarContainer.style.width = '100%';
        progressBarContainer.style.marginTop = '30px';
        progressBarContainer.style.marginBottom = '30px';
        containerDiv.appendChild(progressBarContainer);

        const progressBar = document.createElement('div');
        progressBar.style.height = '10px';
        progressBar.style.backgroundColor = '#D7DCF2';
        progressBar.style.width = '0%';
        progressBarContainer.appendChild(progressBar);

        loadingDiv.appendChild(containerDiv);

        const calculationText = document.createElement('p');
        calculationText.textContent = 'Your stars are being calculated...';
        calculationText.style.fontSize = '14px';
        calculationText.style.fontWeight = '600';
        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
        containerDiv.appendChild(calculationText);

        const saveUserDataForScreenshot = {
            gameName: gameVersion,
            gameID: gameId,      
            screenShot: imageCode,
            userId: userId,      
            gameTime: timeDifferenceInSeconds         
        };
        fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
            method: 'POST',
            headers: {
                'Content-Type' : 'application/json'
            },
            body: JSON.stringify(saveUserDataForScreenshot)
        })
        .then(response => response.json())
        .then(data => {
            console.log('Gallery Response Data', data)

            if(data.screenshotUrl){
                let userData = {
                    'gameName': gameVersion,
                    'gameID': gameId,
                    'screenShot': imageCode,
                    'userId' : userId,
                    'gameTime' : timeDifferenceInSeconds,
                    'score' : scoreTotal,
                    'gameStar' : starValue
                };
                // console.log(userData);
                fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(userData)
                })
                .then(response => {
                    setTimeout(() => { 
                        if (response.ok) {
                            // console.log('Response Code', response.status)
                            if (response.status == 200) {
                                document.getElementById('saved-toast').classList.remove('hidden');
                                setTimeout(() => {
                                    document.getElementById('saved-toast').classList.add('hidden');
                                }, 1500);
                                loadingMainContainer.style.display = 'none';
                                loadingDiv.style.display = 'none';
                                starContainer.style.display = 'flex';
                                // starContainer.style.flexDirection = 'row';
                                // document.getElementById('wsSavedImg').classList.remove('-z-10');
                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                document.getElementById('get-star-value').innerHTML = starValue;
                                // const starDiv = document.createElement('div');
                                // starDiv.innerHTML = starSVG;   
                                // starContainer.appendChild(starDiv);   
                                // starDiv.classList.add('star');  
                                scoreBoard.style.display = 'flex';
                            }
                        } else {
                        console.log('Something went wrong', response);
                        }
                    }, 100);
                })
                .catch(error => {
                    console.error('An error occurred', error);
                });
                const userAnotherData = {
                    assignmentId: assignmentId,
                    worksheetId: worksheetId,
                    studentId: userId,
                    submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
                };
                const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
                // console.log('Starting submissions API call');
                fetch(`https://preschool-curriculum.in/api/one/v1/akademy/worksheet/submissions`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': authToken
                    },
                    body: JSON.stringify(userAnotherData)
                })
                .then(response => {
                    // console.log('Submissions API Response:', response);
                    return response.json();
                })
                .then(data => {
                    // console.log('Submissions Response Data:', data);
                })
                .catch(error => {
                    console.error('Error in Submissions API:', error);
                });

            }
        })
        .catch(error => {
            console.error('An error occoured', error)
        })
    });        
};