let data; // Placeholder for slide configuration
let currentIndex = 0;

const slideTitle = document.getElementById("slide-title");
const slideImage = document.getElementById("slide-image");
const contentArea = document.getElementById("content-area");

const textIcon = document.getElementById("text-icon");
const imageIcon = document.getElementById("image-icon");
const videoIcon = document.getElementById("video-icon");

const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");

// Fetch configuration from the JSON file
async function loadConfig() {
    const response = await fetch('slide_config.json');
    data = await response.json();
    loadSlide(currentIndex);
}

function loadSlide(index) {
    const slide = data.slides[index];
    slideTitle.textContent = slide.id.replace("_", " ");
    slideImage.src = slide.image;

    const existingText = document.getElementById("slide-text");
    if (existingText) existingText.remove();

    const existingVideo = document.getElementById("slide-video");
    if (existingVideo) existingVideo.remove();
}

textIcon.addEventListener("click", () => {
    const slide = data.slides[currentIndex];
    const textOverlay = document.createElement("div");
    textOverlay.id = "slide-text";
    textOverlay.textContent = slide.text;
    contentArea.appendChild(textOverlay);
});

imageIcon.addEventListener("click", () => {
    loadSlide(currentIndex);
});

videoIcon.addEventListener("click", () => {
    const slide = data.slides[currentIndex];
    const videoEmbed = document.createElement("iframe");
    videoEmbed.id = "slide-video";
    videoEmbed.src = slide.video;
    videoEmbed.frameBorder = "0";
    videoEmbed.allow = "autoplay; encrypted-media";
    contentArea.appendChild(videoEmbed);
});

prevBtn.addEventListener("click", () => {
    currentIndex = (currentIndex - 1 + data.slides.length) % data.slides.length;
    loadSlide(currentIndex);
});

nextBtn.addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % data.slides.length;
    loadSlide(currentIndex);
});

// Load configuration and initialize the app
loadConfig();