const container = document.getElementById('container');
        const status = document.getElementById('status');
        const timeDisplay = document.getElementById('time');
        const encouragement = document.getElementById('encouragement');
        const balance = document.getElementById('balance');
        const progressBar = document.getElementById('progress-bar');

        let tiles = [];
        let timeLeft = 120; // 2 minutes in seconds
        let gameFinished = false;
        let userId = new URLSearchParams(window.location.search).get('user_id');

        function createTiles() {
            container.innerHTML = '';
            tiles.forEach(tile => {
                const tileElement = document.createElement('div');
                tileElement.classList.add('tile');
                if (tile === 9) {
                    tileElement.classList.add('empty');
                    const img = document.createElement('img');
                    img.src = 'https://i.postimg.cc/3NTmKzLG/20241107-134043.png'; // Empty tile image
                    tileElement.appendChild(img);
                } else {
                    tileElement.textContent = tile;
                }
                tileElement.addEventListener('click', () => moveTile(tile));
                container.appendChild(tileElement);
            });
        }

        function moveTile(tile) {
            const index = tiles.indexOf(tile);
            const emptyIndex = tiles.indexOf(9);

            const canMove =
                [index - 1, index + 1, index - 3, index + 3].includes(emptyIndex) &&
                Math.abs(index - emptyIndex) !== 2;

            if (canMove) {
                [tiles[index], tiles[emptyIndex]] = [tiles[emptyIndex], tiles[index]];
                createTiles();
                checkWin();
            }
        }

        function checkWin() {
    const isSolved = tiles.slice(0, 8).every((tile, index) => tile === index + 1);
    if (isSolved) {
        gameFinished = true;
        balance.classList.remove('hidden');
        balance.textContent = 'Congratulations! You won 10000 coins!';
        showToast('Congratulations! You won 10000 coins!');
        updatewin(userId);
    }
}


 // upde if you win 
 function updatewin(userId) {

            // Prepare data to send to server
            const data = { user_id: userId };

            // Use fetch to send data to the server
            fetch('updatewin_user.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then(response => response.json())
            .then(data => {
            if (data.status === 'success') {
                    showToast('You won!');
                } else {
                    
                }
            });
        }

        function updateBalanceAndTickets(userId, coins, tickets, solved) {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'update_tiles_balance.php', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log('Balance and tickets updated successfully.');
       
                    
             showToast('value updated!');
                } else {
                    console.error('Error updating balance and tickets.');
                    
      
                    
                }
            };
            xhr.send(JSON.stringify({ user_id: userId, coins: coins, tickets: tickets, solved: solved }));
        }

        function updateTimer() {
            if (gameFinished) return;

            timeLeft--;
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timeDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            const progressPercentage = (timeLeft / 120) * 100;
            progressBar.style.width = `${progressPercentage}%`;

            if (timeLeft % 60 === 0 && timeLeft > 0) {
                showEncouragement();
            }

            if (timeLeft <= 0) {
                gameFinished = true;
                balance.classList.remove('hidden');
                balance.textContent = 'Time\'s up! Better luck next time!';
                showToast('Bad Luck! Try another time');
                updateBalanceAndTickets(userId, 0, 0, false);
            }
        }

        function showEncouragement() {
            const messages = [
                '😇 Keep going!',
                'You can do it!',
                '💪 Stay strong!',
                '🎉 Almost there!',
                '🚀 Keep pushing!',
                '🌟 Great job!'
            ];
            const randomMessage = messages[Math.floor(Math.random() * messages.length)];
            encouragement.textContent = randomMessage;
        }

        document.addEventListener('DOMContentLoaded', () => {
            fetch('get_puzzle.php')
                .then(response => response.json())
                .then(data => {
                    tiles = data.tiles;
                    createTiles();
                    setInterval(updateTimer, 1000); // Update timer every second
                })
                .catch(error => console.error('Error fetching puzzle data:', error));
        });
        
        
        
        function showToast(message) {
            const toast = document.getElementById("toast");
            toast.innerHTML = `<strong>${message}</strong><br><small>Lionify Star</small>`;
            toast.classList.add("show");
            setTimeout(() => {
                toast.classList.remove("show");
            }, 3000);
        }
        
        function changeHeaderBgColor(color) {
        Telegram.WebApp.setHeaderColor(color);
    }
        
        Telegram.WebApp.ready();
    changeHeaderBgColor("#000000");
    Telegram.WebApp.BackButton.show();
    Telegram.WebApp.onEvent("backButtonClicked", () => {
        window.history.back();
        Telegram.WebApp.BackButton.hide();
        Telegram.WebApp.offEvent("backButtonClicked");
    });