function retryGame(){
        window.location.reload();
    }
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const childId = urlParams.get('childId');
    const gameVersion = urlParams.get('gameName');
    const gameId = urlParams.get('id');
    const spriteName = urlParams.get('spriteName');
    const assignmentId = urlParams.get('assignmentId');
    const worksheetId = urlParams.get('worksheetId');
    let submitNotic;
    let startTime = Date.now();
    // console.log('gameVersion', gameVersion)

    const url = window.location.href;
    const gameName = url.split('/');
    const gameType = gameName[3].split('?id=');
    // let gameVersion;
    // 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');
    // }
    // console.log("Here is game name ", gameType[0])

    // console.log(gameVersion)
    let imageCode;
    let gameScore;
    let timeDifferenceInSeconds;

    // if(scoreTotal){
    //     gameScore = scoreTotal;
    // }else{
    //     gameScore = 0;
    // }


function submitUserData(drawingZone) {
    submitButton.setVisible(false);
    galleryButton.setVisible(false);
    customCursor.setVisible(false);
    snapshotButton.setVisible(false);
    if(!gameType[0] === 'guided-tracing'){
        snapshotButton.setVisible(false);
        customCursor.setVisible(false);
        galleryButton.setVisible(false);
    }
    muteIcon.setVisible(false);
    retryButton.setVisible(false);
    
    const endTime = Date.now();
    const timeDifference = endTime - startTime;
    timeDifferenceInSeconds = timeDifference / 1000;
    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);


    // console.log('This is from main point', scoreTotal);
    drawingZone.renderer.snapshot((image) => {
        submitButton.setVisible(true);
        galleryButton.setVisible(true);
        customCursor.setVisible(true);
        snapshotButton.setVisible(true);
        if(!gameType[0] == "guided-tracing"){
            snapshotButton.setVisible(true);
            customCursor.setVisible(true);
            galleryButton.setVisible(true);
        }

        muteIcon.setVisible(true);
        retryButton.setVisible(true);
        
        if(gameType[0] == 'drawing'){
            // submitButton.setVisible(true);
            // snapshotButton.setVisible(true);
            // customCursor.setVisible(true);
            // galleryButton.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;
        }else if( gameType[0] == "guided-tracing"){
            // submitButton.setVisible(true);
            // snapshotButton.setVisible(true);
            // customCursor.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 = `guided-tracing-${gameId}.png`;
            // link.click();
            document.body.removeChild(image);
            imageCode = image.src;
        }
        
        
    });   
    

};

    function calculateFromAI(){
        let progress = 0;
        let starValue;
        
        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);
        let userDataForStar = {
            gameName: gameVersion,
            childId: childId,
            gameID: gameId,
            gameTime: timeDifferenceInSeconds,
            screenShot: imageCode
        };
        
        // First API call
        fetch(`https://api.teachertrainingkolkata.in/api/aiEvaluateImageToStar`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userDataForStar)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            setTimeout(() => {
                if (data && data.message === "Game data saved successfully") {
                    let starValue = data.data.gameStar; // Ensure starValue is available
        
                    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.";
                    }
        
                    loadingMainContainer.style.display = 'none';
                    loadingDiv.style.display = 'none';
                    starContainer.style.display = 'flex';
                    starContainer.style.flexDirection = 'row';
                    document.getElementById('get-star-value').innerHTML = starValue;
                    document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                    scoreBoard.style.display = 'flex';
        
                    if (scoreBoard.style.display === 'flex') {
                        const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');
                        bottomAnimateClipart.classList.remove('hidden');
                        bottomAnimateClipart.classList.add('-translate-x-full', 'transition-transform', 'duration-700');
                        setTimeout(() => {
                            bottomAnimateClipart.classList.add('hidden');
                            bottomAnimateClipart.classList.remove('translate-x-full');
                        }, 100);
                    }
        
                    // ✅ Now create `userData` inside the correct scope where starValue exists
                    let userData = {
                        gameName: gameVersion.trim(),
                        gameID: gameId,
                        screenShot: imageCode,
                        childId: childId,
                        gameTime: timeDifferenceInSeconds,
                        gameStar: starValue // ✅ Now correctly assigned
                    };
        
                    // ✅ Now perform the second fetch request
                    fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(userData)
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.screenshotUrl) {
                            fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify(userData)
                            })
                            .then(response => {
                                setTimeout(() => {
                                    if (response.ok && response.status == 200) {
                                        document.getElementById('saved-toast').classList.remove('hidden');
                                        setTimeout(() => {
                                            document.getElementById('saved-toast').classList.add('hidden');
                                        }, 2000);
                                    }
                                }, 100);
                            })
                            .catch(error => {
                                console.error('An error occurred', error);
                            });
        
                            // Final API Call
                            const userAnotherData = {
                                assignmentId: assignmentId,
                                worksheetId: worksheetId,
                                studentId: childId,
                                submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
                            };
                            const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q';
        
                            fetch(`https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions`, {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': authToken
                                },
                                body: JSON.stringify(userAnotherData)
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Submission API response', data);
                            })
                            .catch(error => {
                                console.error('An error occurred', error);
                            });
                        }
                    })
                    .catch(error => {
                        console.error('An error occurred', error);
                    });
                }
            }, 150);
        })
        .catch(error => {
            console.error('An error occurred', error);
        });        
    }