/* --- VOORBEELD PLAYLISTS --- */
		const playlistFiles = {
			Spandex: "/stories/feed.asp?id=1500",
			Latex: "/stories/feed.asp?id=1501",
			Pantyhose: "/stories/feed.asp?id=1502",
			AI: "/stories/feed.asp?id=1504",
			Other: "/stories/feed.asp?id=1504"
		};
		async function loadPlaylist(category) {
		const file = playlistFiles[category];
		const response = await fetch(file);
		return await response.json();
		}
        /* --- STORY PLAYER LOGIC --- */
		document.querySelectorAll(".story-player").forEach(player => {
			player.addEventListener("click", async () => {
				await startStoryPlayer(player);
			});
		});

        async function startStoryPlayer(player) {
            const category = player.dataset.category;
            const list = await loadPlaylist(category);
            if (!list || list.length === 0) return;

            let index = 0;

            const fs = document.createElement("div");
            fs.classList.add("story-fullscreen");

            const video = document.createElement("video");
            video.classList.add("story-video");
            video.src = list[index].src;
            video.autoplay = true;
            video.playsInline = true;
            video.controls = false;
            video.muted = false;

            /* TOP UI */
            const topUI = document.createElement("div");
            topUI.classList.add("top-ui");

            const progress = document.createElement("div");
            progress.classList.add("progress-bar");
            const fill = document.createElement("div");
            fill.classList.add("progress-fill");
            progress.appendChild(fill);

            const buttons = document.createElement("div");
            buttons.classList.add("top-buttons");

            const audioBtn = document.createElement("div");
            audioBtn.classList.add("btn");
            audioBtn.textContent = "🔊";

            const closeBtn = document.createElement("div");
            closeBtn.classList.add("btn");
            closeBtn.textContent = "✕";

            buttons.appendChild(audioBtn);
            buttons.appendChild(closeBtn);

            topUI.appendChild(progress);
            topUI.appendChild(buttons);

            /* PROFIEL LINK */
            const profile = document.createElement("a");
            profile.classList.add("profile-overlay");
            profile.href = list[index].UserProfile;
            profile.textContent = list[index].UserProfileText;
            profile.target = "_blank";

            fs.appendChild(video);
            fs.appendChild(topUI);
            fs.appendChild(profile);
            document.body.appendChild(fs);

            if (fs.requestFullscreen) fs.requestFullscreen();

            /* AUDIO */
            audioBtn.addEventListener("click", () => {
                video.muted = !video.muted;
                audioBtn.textContent = video.muted ? "🔇" : "🔊";
            });

            /* CLOSE */
            closeBtn.addEventListener("click", () => closeFullscreen(fs));

            /* PROGRESS */
            video.addEventListener("timeupdate", () => {
                if (!video.duration) return;
                fill.style.width = (video.currentTime / video.duration) * 100 + "%";
            });

            /* NEXT VIDEO */
            video.addEventListener("ended", () => {
                index++;
                if (index >= list.length) {
                    closeFullscreen(fs);
                    return;
                }
                fadeToNextVideo(video, list[index], profile, fill);
            });

            /* SWIPE */
            let startX = 0;
            fs.addEventListener("touchstart", e => startX = e.touches[0].clientX);
            fs.addEventListener("touchend", e => {
                const diff = e.changedTouches[0].clientX - startX;
                if (diff > 50) prevVideo();
                if (diff < -50) nextVideo();
            });

            /* DESKTOP CLICK LEFT/RIGHT */
            fs.addEventListener("click", e => {
                const x = e.clientX;
                const w = window.innerWidth;
                if (x < w * 0.33) prevVideo();
                else if (x > w * 0.66) nextVideo();
            });

            function nextVideo() {
                if (index < list.length - 1) {
                    index++;
                    fadeToNextVideo(video, list[index], profile, fill);
                }
            }

            function prevVideo() {
                if (index > 0) {
                    index--;
                    fadeToNextVideo(video, list[index], profile, fill);
                }
            }
        }

        function fadeToNextVideo(video, data, profile, fill) {
            video.style.transition = "opacity 0.4s";
            video.style.opacity = 0;

            setTimeout(() => {
                video.src = data.src;
                profile.href = data.UserProfile;
                profile.textContent = data.UserProfileText;
                fill.style.width = "0%";
                video.play();
                video.style.opacity = 1;
            }, 400);
        }

		function closeFullscreen(fs) {
			const video = fs.querySelector("video");

			if (video) {
				video.pause();
				video.src = "";      // stopt buffering en audio volledig
				video.load();        // reset player
			}

			if (document.fullscreenElement) {
				document.exitFullscreen();
			}

			fs.remove();
		}