{{ extends "global/Page.html" }}
{{ block title }}Video{{ endblock }}

{{ block content }}

{{ if video_url }}
<p>Please watch the following video carefully. <b>You must keep this page open and watch the video entirely before you can continue.</b></p>
<p>At the end of the video, you will be redirected to the next page.</p>

<style>
    .video-container {
        position: relative;
        width: 560px;
        height: 315px;
        margin: 20px auto;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: transparent;
        cursor: pointer;
    }
</style>

<div class="video-container">
    <iframe id="narrative-video" src="{{ video_url }}?enablejsapi=1&modestbranding=1&rel=0&fs=1&disablekb=1&iv_load_policy=3&controls=1" allowfullscreen></iframe>
    <div class="video-overlay" id="video-overlay"></div>
</div>

<button id="next-btn" type="button" class="btn btn-primary" disabled>Next</button>

<script>
    // Load YouTube Iframe API
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    let ytPlayer = null;
    let isPlaying = false;
    let timeOnPage = 0;
    let pauseCount = 0;
    let autoSubmitted = false;
    const bufferMs = 2000;

    function onYouTubeIframeAPIReady() {
        ytPlayer = new YT.Player('narrative-video', {
            playerVars: {
                controls: 0,
                modestbranding: 1,
                rel: 0,
                fs: 0,
                disablekb: 1,
                iv_load_policy: 3,
                playsinline: 1
            },
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerStateChange(event) {
        // 1 = playing, 2 = paused, 0 = ended
        if (event.data === 1) {
            isPlaying = true;
        } else if (event.data === 2) {
            isPlaying = false;
            pauseCount += 1;
        } else if (event.data === 0) {
            isPlaying = false;
            setTimeout(autoSubmitForm, bufferMs);
        }
    }

    (function() {
        const videoOverlay = document.getElementById('video-overlay');
        const nextBtn = document.getElementById('next-btn');
        const timerText = document.getElementById('timer-text');
        const minWatchSeconds = {{ min_watch_seconds }};

        let secondsElapsed = 0;
        let interactedWithVideo = false;

        setInterval(function() {
            timeOnPage += 1;
        }, 1000);

        // Disable default form submission via Enter key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
            }
        });

        // Gestisci click sull'overlay per play/pause
        videoOverlay.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            interactedWithVideo = true;

            // Toggle play/pause
            if (ytPlayer && ytPlayer.getPlayerState) {
                if (isPlaying) {
                    ytPlayer.pauseVideo();
                } else {
                    ytPlayer.playVideo();
                }
            }
            updateButtonState();
        });

        function formatTime(s) {
            const m = Math.floor(s / 60);
            const r = s % 60;
            return m + 'm ' + r + 's';
        }

        function updateTimer() {
            secondsElapsed += isPlaying ? 1 : 0;
            const remaining = Math.max(0, minWatchSeconds - secondsElapsed);
            if (remaining > 0) {
                timerText.textContent = 'Time remaining before you can continue: ' + formatTime(remaining);
            } else {
                timerText.textContent = 'You may now continue once you have interacted with the video.';
            }
            updateButtonState();
        }

        function updateButtonState() {
            const timeOK = secondsElapsed >= minWatchSeconds;
            if (timeOK && interactedWithVideo) {
                nextBtn.disabled = false;
            } else {
                nextBtn.disabled = true;
            }
        }

        // Start the timer (1-second intervals)
        if (minWatchSeconds > 0) {
            timerText.textContent = 'Time remaining before you can continue: ' + formatTime(minWatchSeconds);
            setInterval(updateTimer, 1000);
        } else {
            timerText.textContent = '';
        }

        nextBtn.addEventListener('click', function() {
            autoSubmitForm();
        });

        function autoSubmitForm() {
            if (autoSubmitted) return;
            autoSubmitted = true;

            let form = document.forms[0];

            let t = document.createElement('input');
            t.type = 'hidden';
            t.name = 'time_on_page';
            t.value = timeOnPage;
            form.appendChild(t);

            let p = document.createElement('input');
            p.type = 'hidden';
            p.name = 'pause_count';
            p.value = pauseCount;
            form.appendChild(p);

            let v = document.createElement('input');
            v.type = 'hidden';
            v.name = 'video_watched';
            v.value = 'True';
            form.appendChild(v);

            form.submit();
        }
    })();
</script>

{{ else }}
<p>No video in this condition. You may proceed.</p>
<button type="submit" class="submit-btn">Next</button>
{{ endif }}

<style>
    .submit-btn {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 1.2em;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .submit-btn:hover {
        background-color: #45a049;
    }
</style>

{{ endblock }}