document.addEventListener('DOMContentLoaded', function () {
    const inputText = document.getElementById('inputText');
    const videoPlayer = document.getElementById('translationVideo');
    const translateBtn = document.getElementById('translateBtn');
    const wordTab = document.getElementById('wordTab');
    const letterTab = document.getElementById('letterTab');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const notification = document.getElementById('notification');
    const currentDisplay = document.getElementById('currentDisplay'); // Display for current word/letter

    let videoSequence = [];
    let currentIndex = 0;
    let currentMode = 'letters'; // Default mode

    // Switch to "words" mode
    wordTab.addEventListener('click', () => {
        currentMode = 'words';
        wordTab.classList.add('active');
        letterTab.classList.remove('active');
        notification.style.display = 'none'; // Hide notification when switching mode
    });

    // Switch to "letters" mode
    letterTab.addEventListener('click', () => {
        currentMode = 'letters';
        letterTab.classList.add('active');
        wordTab.classList.remove('active');
        notification.style.display = 'none'; // Hide notification when switching mode
    });

    // Function to check if a video exists
    async function videoExists(src) {
        return new Promise((resolve) => {
            const video = document.createElement('video');
            video.src = src;
            video.onloadeddata = () => resolve(true);
            video.onerror = () => resolve(false);
        });
    }

    // Generate video sequence and check for missing videos
    async function generateVideoSequence() {
        const text = inputText.value.trim();
        const items = currentMode === 'words' ? text.split(' ') : text.split('');
        videoSequence = [];
        let missingVideos = false;

        for (const item of items) {
            const videoPath =
                currentMode === 'words'
                    ? `video/${item.toLowerCase()}.mp4`
                    : `video/pismena/${item.toLowerCase()}.mp4`;

            const exists = await videoExists(videoPath);
            if (exists) {
                videoSequence.push(videoPath);
            } else {
                missingVideos = true;
            }
        }

        if (missingVideos) {
            notification.style.display = 'flex'; // Show notification if videos are missing
        } else {
            notification.style.display = 'none'; // Hide notification if all videos exist
        }

        currentIndex = 0; // Reset to the beginning of the sequence
    }

    // Play video at the current index
    function playVideo() {
        if (videoSequence.length === 0) return;

        videoPlayer.src = videoSequence[currentIndex];
        videoPlayer.play();

        // Update current word/letter display
        const currentItem =
            currentMode === 'words'
                ? inputText.value.trim().split(' ')[currentIndex]
                : inputText.value.trim().split('')[currentIndex];
        currentDisplay.textContent = currentItem.toUpperCase();
    }

    // Automatically play the next video in the sequence
    videoPlayer.addEventListener('ended', () => {
        if (currentIndex < videoSequence.length - 1) {
            currentIndex++;
            playVideo();
        }
    });

    // Navigate to the previous video
    prevBtn.addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            playVideo();
        }
    });

    // Navigate to the next video
    nextBtn.addEventListener('click', () => {
        if (currentIndex < videoSequence.length - 1) {
            currentIndex++;
            playVideo();
        }
    });

    // Handle "Prelož" button click
    translateBtn.addEventListener('click', async () => {
        await generateVideoSequence();
        if (videoSequence.length > 0) {
            playVideo();
        }
    });
});