{% block title %}Part 1{% endblock %}

{% block content %}

<style>
    .video-outer {
        position: relative;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        /* 56.25% − 120px: clips 60px of YouTube chrome from top and bottom */
        padding-bottom: calc(56.25% - 120px);
        height: 0;
        overflow: hidden;
        background: #000;
        border-radius: 4px;
    }

    .video-outer iframe {
        position: absolute;
        top: -60px;   /* shift up to hide title bar */
        left: 0;
        width: 100%;
        height: calc(100% + 120px); /* full 16:9 height, clipped by container */
        border: none;
        pointer-events: none;
    }

    #video-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 5;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #play-hint {
        color: #fff;
        font-size: 20px;
        background: rgba(0,0,0,0.55);
        padding: 12px 28px;
        border-radius: 8px;
        pointer-events: none;
        user-select: none;
    }

    #video-cover {
        display: none;
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #111;
        z-index: 10;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
        text-align: center;
    }

    .video-toolbar {
        max-width: 900px;
        margin: 6px auto 0;
        text-align: right;
    }

    .instructions {
        text-align: center;
        margin: 20px auto;
        max-width: 900px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 5px;
    }

    #nextButton {
        display: block;
        margin: 20px auto;
        opacity: 0.5;
    }
    #nextButton:enabled {
        opacity: 1;
    }
</style>

<form method="post">
    <div class="instructions">
        <p><strong>Please watch the following video carefully and without interruptions, as the validity of the study relies on your attention.</strong></p>
        <p>Click on the video to play or pause. Use the fullscreen button below the video if needed.</p>
        <p>The "Next" button will become available when you can proceed.</p>
    </div>

    <div class="video-outer" id="video-outer">
        <iframe id="videoPlayer"
                src="{{ video_url }}?enablejsapi=1&rel=0&modestbranding=1&controls=0&iv_load_policy=3&playsinline=1"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen">
        </iframe>
        <div id="video-overlay">
            <span id="play-hint">&#9654; Click to play</span>
        </div>
        <div id="video-cover">
            Video completed. Please click <strong>Next</strong> to continue.
        </div>
    </div>

    <div class="video-toolbar">
        <button type="button" onclick="toggleFullscreen()"
                style="font-size:13px; padding:4px 12px; border:1px solid #ccc; border-radius:4px; background:#fff; cursor:pointer;">
            &#x26F6; Fullscreen
        </button>
    </div>

    <div class="text-center">
        <button type="submit" class="btn btn-primary btn-lg" id="nextButton" disabled>
            Next
        </button>
    </div>

    <input type="hidden" name="time_on_page" id="id_time_on_page" value="0">
    <input type="hidden" name="pause_count" id="id_pause_count" value="0">
    <input type="hidden" name="video_watched" id="id_video_watched" value="false">
    <input type="hidden" name="hidden_count" id="id_hidden_count" value="0">
</form>

<script src="https://www.youtube.com/iframe_api"></script>

<script>
    let pageLoadTime = Date.now();
    let pauseCount = 0;
    let player;
    let hiddenCount = 0;
    let isPlaying = false;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('videoPlayer', {
            events: { 'onStateChange': onPlayerStateChange }
        });
    }

    function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.PLAYING) {
            isPlaying = true;
            document.getElementById('play-hint').style.display = 'none';
        }
        if (event.data === YT.PlayerState.PAUSED) {
            isPlaying = false;
            pauseCount++;
            document.getElementById('id_pause_count').value = pauseCount;
            const hint = document.getElementById('play-hint');
            hint.textContent = '▶ Click to resume';
            hint.style.display = 'block';
        }
        if (event.data === YT.PlayerState.ENDED) {
            isPlaying = false;
            document.getElementById('id_video_watched').value = 'True';
            document.getElementById('nextButton').disabled = false;
            document.getElementById('video-cover').style.display = 'flex';
        }
    }

    document.getElementById('video-overlay').addEventListener('click', function () {
        if (!player || !player.playVideo) return;
        if (isPlaying) {
            player.pauseVideo();
        } else {
            player.playVideo();
        }
    });

    function toggleFullscreen() {
        const el = document.getElementById('video-outer');
        if (!document.fullscreenElement) {
            el.requestFullscreen().catch(function (err) { console.log(err); });
        } else {
            document.exitFullscreen();
        }
    }

    document.querySelector('form').addEventListener('submit', function () {
        document.getElementById('id_time_on_page').value =
            Math.floor((Date.now() - pageLoadTime) / 1000);
    });

    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            hiddenCount++;
            document.getElementById('id_hidden_count').value = hiddenCount;
        }
    });
</script>

{% endblock %}