(function () {
    function ensureLightbox() {
        var existing = document.querySelector('.yatoon-sf-lightbox');
        if (existing) return existing;

        var box = document.createElement('div');
        box.className = 'yatoon-sf-lightbox';
        box.setAttribute('aria-hidden', 'true');
        box.innerHTML =
            '<div class="yatoon-sf-lightbox-backdrop" data-yatoon-sf-close></div>' +
            '<div class="yatoon-sf-lightbox-dialog" role="dialog" aria-modal="true">' +
                '<button type="button" class="yatoon-sf-lightbox-close" data-yatoon-sf-close aria-label="Close">&times;</button>' +
                '<img class="yatoon-sf-lightbox-img" alt="" />' +
                '<video class="yatoon-sf-lightbox-video" controls playsinline></video>' +
                '<div class="yatoon-sf-lightbox-meta">' +
                    '<div><strong class="yatoon-sf-lightbox-platform"></strong><span class="yatoon-sf-lightbox-date"></span></div>' +
                    '<p class="yatoon-sf-lightbox-caption"></p>' +
                    '<a class="yatoon-sf-lightbox-link" target="_blank" rel="noopener noreferrer">View original post</a>' +
                '</div>' +
            '</div>';
        document.body.appendChild(box);
        return box;
    }

    function stopLightboxVideo(box) {
        var video = box.querySelector('.yatoon-sf-lightbox-video');
        if (!video) return;
        video.pause();
        video.removeAttribute('src');
        video.load();
    }

    function closeLightbox() {
        var box = document.querySelector('.yatoon-sf-lightbox');
        if (!box) return;
        stopLightboxVideo(box);
        box.classList.remove('is-open');
        box.setAttribute('aria-hidden', 'true');
        document.documentElement.classList.remove('yatoon-sf-lightbox-open');
    }

    document.addEventListener('click', function (event) {
        var close = event.target.closest('[data-yatoon-sf-close]');
        if (close) {
            closeLightbox();
            return;
        }

        var trigger = event.target.closest('[data-yatoon-sf-lightbox]');
        if (!trigger) return;

        event.preventDefault();
        var box = ensureLightbox();
        var image = box.querySelector('.yatoon-sf-lightbox-img');
        var video = box.querySelector('.yatoon-sf-lightbox-video');
        var caption = box.querySelector('.yatoon-sf-lightbox-caption');
        var platform = box.querySelector('.yatoon-sf-lightbox-platform');
        var date = box.querySelector('.yatoon-sf-lightbox-date');
        var link = box.querySelector('.yatoon-sf-lightbox-link');

        var isVideo = trigger.getAttribute('data-type') === 'video';
        var videoSrc = trigger.getAttribute('data-video');

        if (isVideo && videoSrc) {
            image.style.display = 'none';
            image.removeAttribute('src');
            video.style.display = '';
            video.src = videoSrc;
            video.load();
            // Autoplay can be blocked by the browser (e.g. no prior user
            // gesture on this specific element, or data-saver mode) -
            // that's fine, the visible controls let people press play.
            video.play().catch(function () {});
        } else {
            video.style.display = 'none';
            stopLightboxVideo(box);
            image.style.display = '';
            image.src = trigger.getAttribute('data-image') || trigger.href;
        }

        image.alt = trigger.getAttribute('data-caption') || '';
        caption.textContent = trigger.getAttribute('data-caption') || '';
        platform.textContent = trigger.getAttribute('data-platform') || '';
        date.textContent = trigger.getAttribute('data-date') ? ' - ' + trigger.getAttribute('data-date') : '';

        var postUrl = trigger.getAttribute('data-post-url');
        if (postUrl) {
            link.href = postUrl;
            link.style.display = '';
        } else {
            link.removeAttribute('href');
            link.style.display = 'none';
        }

        box.classList.add('is-open');
        box.setAttribute('aria-hidden', 'false');
        document.documentElement.classList.add('yatoon-sf-lightbox-open');
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') closeLightbox();
    });
}());
