let isRecording = false;
let mediaRecorder;
let recordedChunks = [];

// Handles the recording button click event
document.getElementById('recordButton').addEventListener('click', function () {
    if (!isRecording) {
        startRecording();
    } else {
        stopRecording();
    }
});

function startRecording() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function (stream) {
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.start();

            mediaRecorder.ondataavailable = function (e) {
                recordedChunks.push(e.data);
            };

            // Update button text and style
            document.getElementById('recordButton').textContent = 'Stop';
            document.getElementById('recordButton').classList.add('recording');
            document.getElementById('recordStatus').textContent = 'Recording...';
            document.getElementById('transcribeContainer').style.display = 'none'; // Hide Transcribe button initially
            isRecording = true;
        })
        .catch(function (err) {
            console.error('The following error occurred: ' + err);
        });
}

function stopRecording() {
    mediaRecorder.stop();

    mediaRecorder.onstop = function () {
        const blob = new Blob(recordedChunks, { type: 'audio/webm' });
        recordedChunks = [];
        const audioURL = window.URL.createObjectURL(blob);

        // Update button text and style
        document.getElementById('recordButton').textContent = 'Start';
        document.getElementById('recordButton').classList.remove('recording');
        document.getElementById('recordStatus').textContent = 'Tap to Record';
        document.getElementById('transcribeContainer').style.display = 'block'; // Show Transcribe button

        // Set up the Transcribe button click event
        document.getElementById('transcribeButton').addEventListener('click', function () {
            transcribeAudio(blob);
        });

        isRecording = false;
    };
}

function transcribeAudio(blob) {
    const formData = new FormData();
    formData.append('audio', blob, 'audio.webm');

    //fetch('https://tri4-semalab.hf.space/transcribe', { 
    fetch('https://jikoni-semabox.hf.space/transcribe', { 
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('output').textContent = data.transcription;
    })
    .catch(error => {
        console.error('Error:', error);
    });
}