document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('startRecording').addEventListener('click', startRecording);
    document.getElementById('stopRecording').addEventListener('click', stopRecording);
    document.getElementById('speakTranslation').addEventListener('click', speakTranslation);

    fetchSupportedLanguages();
});

async function startRecording() {
    const response = await fetch('/start-recording', {
        method: 'POST'
    });
    const result = await response.text();
    document.getElementById('status').innerText = result;
}

async function stopRecording() {
    const targetLanguage = document.getElementById('targetLanguage').value;
    const response = await fetch('/stop-recording', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ targetLanguage })
    });
    const result = await response.json();
    document.getElementById('recognizedText').innerText = result.recognizedText;
    document.getElementById('translatedText').innerText = result.translatedText;
}

async function speakTranslation() {
    const response = await fetch('/speak-translation', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({})
    });
    const result = await response.text();
    document.getElementById('status').innerText = result;
}

async function fetchSupportedLanguages() {
    const response = await fetch('/get-supported-languages');
    const languages = await response.json();
    const select = document.getElementById('targetLanguage');
    for (const [key, value] of Object.entries(languages)) {
        const option = document.createElement('option');
        option.value = key;
        option.text = value;
        select.add(option);
    }
}