import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const supabaseUrl = 'https://manesldshonpegglmyan.supabase.co'
const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1hbmVzbGRzaG9ucGVnZ2xteWFuIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTczMDcxNzQ2NCwiZXhwIjoyMDQ2MjkzNDY0fQ.saaJeTtwYZCS3YKJYmQsAOSAEFzUVUJnoJSD8-lgLHo'
const supabase = createClient(supabaseUrl, supabaseKey)

const inputText = document.getElementById('inputText');
const videoPlayer = document.getElementById('translationVideo');
const translateWordsBtn = document.getElementById('translateWordsBtn');
const translateLettersBtn = document.getElementById('translateLettersBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const translateBtn = document.getElementById('translateBtn');
const statusText = document.getElementById('statusText');

let videoSequence = [];
let currentIndex = 0;
let autoPlayEnabled = true;
let currentTranslationMode = 'words'; 

async function videoExists(src) {
    return new Promise(resolve => {
        const video = document.createElement('video');
        video.src = src;
        video.onloadeddata = () => resolve(true);
        video.onerror = () => resolve(false);
    });
}

async function fetchVideoUrl(word) {
    const { data, error } = await supabase
        .from('Videa') 
        .select('video_url')
        .eq('label', word)
        .maybeSingle(); 

    if (error) {
        console.error('Error fetching video:', error);
        return null;
    }

    return data.video_url;
}

async function loadVideoSequenceByWords() {
    const words = inputText.value.trim().split(' ');
    videoSequence = [];

    for (const word of words) {
        const videoUrl = await fetchVideoUrl(word.toLowerCase());
        if (videoUrl) {
            videoSequence.push(videoUrl);
        }
    }
    currentIndex = 0;
}

async function fetchLetterVideoUrl(letter) {
    const { data, error } = await supabase
        .from('Videa') 
        .select('video_url')
        .eq('label', letter)
        .maybeSingle();

    if (error) {
        console.error('Error fetching video for letter:', letter, error);
        return null;
    }

    if (!data) {
        console.warn(`No video found for letter: ${letter}`);
        return null;
    }

    return data.video_url;
}

async function loadVideoSequenceByLetters() {
    const characters = inputText.value.trim().split('');
    videoSequence = [];

    for (const char of characters) {
        if (/[a-zA-Z]/.test(char)) {
            const videoUrl = await fetchLetterVideoUrl(char.toLowerCase());
            if (videoUrl) {
                videoSequence.push(videoUrl);
            }
        }
    }
    currentIndex = 0;
}

function playVideoAtIndex(index) {
    if (index < 0 || index >= videoSequence.length) return;

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

    const currentLabel = videoSequence[index].split('/').pop().split('.')[0];
    document.getElementById('currentLetter').innerText = currentLabel.toUpperCase();

    if (autoPlayEnabled) {
        videoPlayer.onended = () => {
            currentIndex++;
            if (currentIndex < videoSequence.length) {
                playVideoAtIndex(currentIndex);
            } else {
                autoPlayEnabled = false;
            }
        };
    } else {
        videoPlayer.onended = null;
    }
}

translateBtn.addEventListener('click', async () => {
    autoPlayEnabled = true;

    if (currentTranslationMode === 'words') {
        await loadVideoSequenceByWords();
    } else if (currentTranslationMode === 'letters') {
        await loadVideoSequenceByLetters();
    }

    if (videoSequence.length > 0) {
        playVideoAtIndex(currentIndex);
    } else {
        statusText.innerText = 'No videos found for the entered text.';
    }
});

translateWordsBtn.addEventListener('click', () => {
    currentTranslationMode = 'words';
    translateWordsBtn.classList.add('active');
    translateLettersBtn.classList.remove('active');
});

translateLettersBtn.addEventListener('click', () => {
    currentTranslationMode = 'letters';
    translateLettersBtn.classList.add('active');
    translateWordsBtn.classList.remove('active');
});

prevBtn.addEventListener('click', () => {
    if (currentIndex > 0) {
        autoPlayEnabled = false;
        currentIndex--;
        playVideoAtIndex(currentIndex);
    }
});

nextBtn.addEventListener('click', () => {
    if (currentIndex < videoSequence.length - 1) {
        autoPlayEnabled = false;
        currentIndex++;
        playVideoAtIndex(currentIndex);
    }
});