document.addEventListener("DOMContentLoaded", (event) => {
    const response_area = document.getElementById('response-area');
    document.getElementById('submit').addEventListener('click', function() {
        var url = document.getElementById('url_box').value;

        if (!url) {
            response_area.innerText = 'Please enter a URL.';
            return;
        }
        
        // First, process the URL
        fetch('/process_url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({ url: url })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            // Start streaming once processing is started
            streamOutput(response_area);
        })
        .catch(error => {
            console.error('Error processing URL:', error);
            response_area.innerText = 'Error processing URL: ' + error.message;
        });
    });
});

function streamOutput(response_area) {
    // Fetch the streaming output
    const streamResponsePromise = fetch('/stream_output');
    response_area.innerHTML = "" 

    streamResponsePromise
        .then(response => {
            const reader = response.body.getReader();
            const decoder = new TextDecoder("utf-8");

            function readStream() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        console.log("Stream finished.");
                        return;
                    }

                    // Decode and process the chunk
                    const chunk = decoder.decode(value, { stream: true });
                    response_area.innerHTML += chunk;

                    // Continue reading
                    readStream();
                });
            }

            // Start reading the stream
            readStream();
        })
        .catch(error => {
            console.error('Error fetching stream:', error);
            response_area.innerText = 'Error fetching stream: ' + error.message;
        });
}