document.addEventListener('DOMContentLoaded', function() {
    var playButton = document.getElementById('playButton');
    var adVideoContainer = document.getElementById('adVideoContainer');
    var realVideoContainer = document.getElementById('realVideoContainer');
    var skipAdButton = document.getElementById('skipAdButton');
    var adVideo = document.getElementById('adVideo');
    var adTimerValue = serverData && serverData.adTimer ? parseInt(serverData.adTimer) : 6;
    // Dynamically create and append the countdown element if not already present
    var countdownElement = document.createElement('div');
    countdownElement.id = 'countdownElement';
    countdownElement.style.position = 'absolute';
    countdownElement.style.bottom = '50%';
    countdownElement.style.right = '20px';
    countdownElement.style.backgroundColor = 'rgba(0,0,0,0.75)';
    countdownElement.style.color = 'white';
    countdownElement.style.padding = '5px 10px';
    countdownElement.style.fontSize = '16px';
    countdownElement.style.display = 'none'; // Initially hidden
    adVideoContainer.appendChild(countdownElement); // Append it to the adVideoContainer for positioning

    playButton.addEventListener('click', function() {
        playButton.style.display = 'none';
        adVideoContainer.style.display = 'block';
        adVideo.muted = false; // Ensure the video is not muted
        adVideo.play().then(() => {
            adVideo.muted = false; // Attempt to unmute again if autoplay was successful
        }).catch(error => {
            console.error("Playback with sound was blocked. Attempting to play muted.", error);
            // Handle the case where autoplay with sound is not allowed.
            adVideo.muted = true; // Mute the video if autoplay with sound is blocked
            adVideo.play(); // Attempt to play the video muted
        });
    });

    adVideo.addEventListener('play', function() {
        let countdown = adTimerValue;
        countdownElement.style.display = 'block'; // Show countdown element when ad video plays
        countdownElement.innerText = 'Skip in ' + countdown + 's'; // Initial countdown text
        let countdownInterval = setInterval(function() {
            countdown--;
            if (countdown > 0) {
                countdownElement.innerText = 'Skip in ' + countdown + 's'; // Update countdown text
            } else {
                clearInterval(countdownInterval);
                countdownElement.style.display = 'none'; // Hide countdown element when countdown finishes
                skipAdButton.style.display = 'block'; // Show "Skip Ad" button
            }
        }, 1000);
    });
    skipAdButton.addEventListener('click', function() {
        adVideo.pause(); // Pause the ad video
        adVideo.currentTime = 0; // Reset the ad video's playback position to the beginning
        adVideoContainer.style.display = 'none'; // Hide ad video container
        realVideoContainer.style.display = 'block'; // Show real video container
    });
});