document.addEventListener('DOMContentLoaded', () => {
    const convertButton = document.getElementById('convertButton');
    const inputText = document.getElementById('inputText');
    const statusDiv = document.getElementById('status');
    const downloadLink = document.getElementById('downloadLink');
    const audioPlayer = document.getElementById('audioPlayer');

    convertButton.addEventListener('click', async () => {
        const text = inputText.value;
        statusDiv.textContent = 'Processing...';
        downloadLink.style.display = 'none';
        audioPlayer.style.display = 'none';

        try {
            const response = await fetch('http://localhost:5000/text-to-speech/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text }),
            });

            const data = await response.json();

            if (data.status === 'success') {
                statusDiv.textContent = 'Speech generated successfully!';
                downloadLink.href = 'http://localhost:5000' + data.url;
                downloadLink.style.display = 'block';
                audioPlayer.src = 'http://localhost:5000' + data.url;
                audioPlayer.style.display = 'block';
            } else {
                statusDiv.textContent = `Error: ${data.message}`;
            }
        } catch (error) {
            statusDiv.textContent = `Network error: ${error}`;
        }
    });
});