<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advert Viewer</title>
<style>
    * { box-sizing: border-box; }
    html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #040404 0%, #111111 55%, #1b1b1b 100%);
        font-family: Arial, sans-serif;
        overflow: hidden;
    }
    .viewer {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: linear-gradient(135deg, #040404 0%, #111111 55%, #1b1b1b 100%);
    }
    .slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .8s ease-in-out;
        pointer-events: none;
        background: #000;
    }
    .slide.active {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;
    }
    .slide img,
    .slide video {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: center center;
        background: #000;
        user-select: none;
        -webkit-user-drag: none;
    }
    .slide video {
        outline: none;
    }
    .empty {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        text-align: center;
        padding: 24px;
    }
    .empty h1 {
        margin: 0 0 10px;
        font-size: clamp(28px, 4vw, 52px);
    }
    .empty p {
        margin: 0;
        opacity: .82;
        font-size: clamp(16px, 2vw, 22px);
    }
</style>
</head>
<body>
<div class="viewer" id="viewer">
    <div class="empty" id="empty-state">
        <h1>No adverts uploaded yet</h1>
        <p>Upload images or videos in adverts.php and they will appear here automatically.</p>
    </div>
</div>

<script>
(function () {
    var viewer = document.getElementById('viewer');
    var emptyState = document.getElementById('empty-state');
    var slides = [];
    var current = 0;
    var slideSeconds = 5;
    var pollMs = 3000;
    var rotationTimer = null;
    var latestSignature = '';
    var isFetching = false;
    var activeVideo = null;

    function clearSlides() {
        slides.forEach(function (slide) {
            if (slide && slide.parentNode) {
                slide.parentNode.removeChild(slide);
            }
        });
        slides = [];
        current = 0;
    }

    function showEmpty() {
        clearSlides();
        if (emptyState) {
            emptyState.style.display = 'flex';
        }
        stopRotation();
    }

    function stopRotation() {
        if (rotationTimer) {
            clearInterval(rotationTimer);
            rotationTimer = null;
        }
        if (activeVideo) {
            activeVideo.pause();
            activeVideo = null;
        }
    }

    function startRotation() {
        stopRotation();
        if (!slides.length) {
            return;
        }
        scheduleCurrentSlide();
    }

    function scheduleCurrentSlide() {
        stopRotation();
        if (!slides.length) {
            return;
        }

        var currentSlide = slides[current];
        if (!currentSlide) {
            return;
        }

        var mediaType = currentSlide.getAttribute('data-type');
        var video = currentSlide.querySelector('video');

        if (mediaType === 'video' && video) {
            activeVideo = video;
            video.currentTime = 0;
            var playPromise = video.play();
            if (playPromise && typeof playPromise.catch === 'function') {
                playPromise.catch(function () {});
            }
            return;
        }

        activeVideo = null;
        if (slides.length <= 1) {
            return;
        }

        rotationTimer = setTimeout(function () {
            showSlide((current + 1) % slides.length);
        }, slideSeconds * 1000);
    }

    function showSlide(index) {
        if (!slides.length) {
            return;
        }

        var oldSlide = slides[current];
        if (oldSlide) {
            oldSlide.classList.remove('active');
            var oldVideo = oldSlide.querySelector('video');
            if (oldVideo) {
                oldVideo.pause();
            }
        }

        current = index;
        slides[current].classList.add('active');
        scheduleCurrentSlide();
    }

    function buildSlides(items) {
        clearSlides();

        if (!items.length) {
            showEmpty();
            return;
        }

        if (emptyState) {
            emptyState.style.display = 'none';
        }

        items.forEach(function (item, index) {
            var slide = document.createElement('div');
            slide.className = 'slide' + (index === 0 ? ' active' : '');
            slide.setAttribute('data-type', item.type || 'image');

            if (item.type === 'video') {
                var video = document.createElement('video');
                video.src = item.src;
                video.muted = true;
                video.playsInline = true;
                video.setAttribute('playsinline', '');
                video.setAttribute('webkit-playsinline', '');
                video.preload = 'auto';
                video.autoplay = false;
                video.controls = false;
                video.addEventListener('ended', function () {
                    if (slides.length > 1) {
                        showSlide((current + 1) % slides.length);
                    } else {
                        video.currentTime = 0;
                        var replayPromise = video.play();
                        if (replayPromise && typeof replayPromise.catch === 'function') {
                            replayPromise.catch(function () {});
                        }
                    }
                });
                slide.appendChild(video);
            } else {
                var img = document.createElement('img');
                img.src = item.src;
                img.alt = 'Advert ' + (index + 1);
                img.loading = 'eager';
                slide.appendChild(img);
            }

            viewer.appendChild(slide);
            slides.push(slide);
        });

        current = 0;
        startRotation();
    }

    function fetchAds() {
        if (isFetching) {
            return;
        }

        isFetching = true;
        fetch('ads_feed.php?_=' + Date.now(), {
            cache: 'no-store'
        })
        .then(function (response) {
            if (!response.ok) {
                throw new Error('Feed request failed');
            }
            return response.json();
        })
        .then(function (data) {
            if (!data || data.ok !== true) {
                throw new Error('Invalid feed response');
            }

            if (data.signature !== latestSignature) {
                latestSignature = data.signature;
                buildSlides(Array.isArray(data.items) ? data.items : []);
            }
        })
        .catch(function () {
            // Keep current slides on screen if the feed briefly fails.
        })
        .finally(function () {
            isFetching = false;
        });
    }

    fetchAds();
    setInterval(fetchAds, pollMs);
})();
</script>
</body>
</html>
