const slideTitle = document.getElementById('slide-title');
const slideImage = document.getElementById('slide-image');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const promptBox = document.getElementById('promptBox');
const promptText = document.getElementById('promptText');
const responseBox = document.getElementById('responseBox');
const responseContent = document.getElementById('responseContent');
const promptIcon = document.getElementById('promptIcon');
const videoIcon = document.getElementById('videoIcon');
const videoOverlay = document.getElementById('videoOverlay');
const videoPlayer = document.getElementById('videoPlayer');
const closeVideo = document.getElementById('closeVideo');
const queryButton = document.getElementById('queryButton');
const websiteIcon = document.getElementById('websiteIcon');
const websiteLayer = document.getElementById('websiteLayer');
const websiteFrame = document.getElementById('websiteFrame');
const textboxIcon = document.getElementById('textboxIcon');
const textboxLayer = document.getElementById('textboxLayer');
const textboxContent = document.getElementById('textboxContent');

let slides = [];
let currentIndex = 0;
let websiteVisible = false;
let textboxVisible = false;

async function fetchSlides() {
    try {
        const response = await fetch('config.json');
        const data = await response.json();
        slides = data.slides;
        loadSlide(currentIndex);
    } catch (error) {
        console.error('Error loading slides:', error);
    }
}

function loadSlide(index) {
    if (!slides.length) return;
    const slide = slides[index];
    slideTitle.textContent = slide.id.replace('_', ' ');
    slideImage.src = slide.image;
    promptBox.style.display = 'none';
    responseBox.style.display = 'none';
    responseContent.innerHTML = '';
    videoPlayer.src = '';
    textboxLayer.style.transform = 'translateX(100%)';
    textboxLayer.style.display = 'none';
    textboxContent.innerHTML = '';
    textboxVisible = false;
    if (websiteVisible) {
        toggleWebsiteLayer();
    }
}

function toggleWebsiteLayer() {
    if (websiteVisible) {
        websiteLayer.style.display = 'none';
        websiteFrame.src = '';
    } else {
        const websiteURL = slides[currentIndex]?.website || '';
        if (websiteURL) {
            window.open(websiteURL, '_blank');
        } else {
            console.warn('No website URL defined for this slide.');
        }
    }
    websiteVisible = !websiteVisible;
}

function toggleTextboxLayer() {
    if (textboxVisible) {
        textboxLayer.style.transform = 'translateX(100%)';
        setTimeout(() => {
            textboxLayer.style.display = 'none';
        }, 300);
        textboxContent.innerHTML = '';
    } else {
        const markdownText = slides[currentIndex]?.text || "No additional text available.";
        textboxContent.innerHTML = marked(markdownText);
        textboxLayer.style.display = 'block';
        setTimeout(() => {
            textboxLayer.style.transform = 'translateX(0)';
        }, 10);
    }
    textboxVisible = !textboxVisible;
}

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

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

promptIcon.addEventListener('click', () => {
    const slideText = slides[currentIndex]?.text || "No prompt text available.";
    promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block';
    promptText.value = slideText;
});

videoIcon.addEventListener('click', () => {
    const videoURL = slides[currentIndex]?.video || '';
    if (videoURL) {
        videoPlayer.src = videoURL;
        videoOverlay.style.display = 'flex';
    }
});

closeVideo.addEventListener('click', () => {
    videoOverlay.style.display = 'none';
    videoPlayer.src = '';
});

websiteIcon.addEventListener('click', toggleWebsiteLayer);
textboxIcon.addEventListener('click', toggleTextboxLayer);

queryButton.addEventListener('click', async () => {
    const userPrompt = promptText.value.trim();
    if (!userPrompt) return;
    responseBox.style.display = "block";
    responseContent.innerHTML = "Processing...";
    setTimeout(() => {
        responseContent.innerHTML = "Response received: " + userPrompt;
    }, 2000);
});

fetchSlides();