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

        if (!url) {
            response_area.innerText = 'Please enter a URL.';
            return;
        }
        fetch('/process_url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({ url: url })
        })
        .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 });

                    // Split the received chunk by new line to handle multiple lines (if any)
                    chunk.split('\n').forEach(data => {
                        if (data.trim()) { // Avoid empty strings
                            // Update the inner HTML of the output div
                            response_area.innerHTML += `<p>${data}</p>`;
                        }
                    });

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

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