<section id="id_applet_scroll" class="applet-scroll">
    <h2>{{ room.name }}</h2>
    {% include "core/_partials/_scroll.html" %}
</section>
<script>
(function() {
    var scroll = document.getElementById('id_drama_scroll');
    if (!scroll) return;

    // Defer dimension-dependent work until after flex layout resolves.
    // Inline scripts can run before nested flex heights are computed, producing
    // wrong scrollHeight/clientHeight values (symptom: incorrect marginTop on mobile).
    requestAnimationFrame(function() {
        var buffer = scroll.querySelector('.scroll-buffer');
        if (buffer) {
            // Push buffer so its top aligns with the bottom of the aperture when all
            // events fit within the viewport (no natural scrolling needed).
            var eventsHeight = scroll.scrollHeight - buffer.offsetHeight;
            var gap = scroll.clientHeight - eventsHeight;
            if (gap > 0) {
                buffer.style.marginTop = gap + 'px';
            }

            // Always land with the buffer's top flush against the bottom edge —
            // the user must scroll down to reveal "What happens next…?"
            // Reading offsetTop here forces a synchronous reflow so the margin
            // set above is already reflected in the value.
            scroll.scrollTop = Math.max(0, buffer.offsetTop - scroll.clientHeight);
        }
    });

    // Animate "What happens next. . . ?" buffer dots — 4th span shows '?'
    var dotsWrap = scroll.querySelector('.scroll-buffer-dots');
    if (dotsWrap) {
        var dots = dotsWrap.querySelectorAll('span');
        var n = 0;
        setInterval(function() {
            dots.forEach(function(d, i) { d.textContent = i < n ? (i === 3 ? '?' : '.') : ''; });
            n = (n + 1) % 5;
        }, 400);
    }

    // Debounced save on scroll — store bottom-of-viewport so the last-read line is restored.
    // Position is captured at event time so layout changes during the debounce window
    // (e.g. rAF adjusting marginTop) don't produce a stale clientHeight.
    var remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
    var saveTimer;
    scroll.addEventListener('scroll', function() {
        var pos = Math.round(scroll.scrollTop + scroll.clientHeight + remPx * 2.5);
        clearTimeout(saveTimer);
        saveTimer = setTimeout(function() {
            var csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
            var token = csrfToken ? csrfToken.value : '';
            fetch("{% url 'billboard:save_scroll_position' room.id %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': token,
                },
                body: 'position=' + pos,
            });
        }, 800);
    });
})();
</script>
