document.addEventListener("DOMContentLoaded", () => {
    const responseArea = document.getElementById('response-area');
    const submitButton = document.getElementById('submit');
    const urlForm = document.getElementById('url-form');
    const urlBox = document.getElementById('url_box');

    urlForm.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent form from submitting the traditional way
        const url = urlBox.value.trim();

        if (!url) {
            responseArea.innerText = 'Please enter a URL.';
            return;
        }

        // Clear the input and update UI
        urlBox.value = "";
        submitButton.disabled = true;
        responseArea.innerText = 'Processing...';

        // 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');
            }
            return response.text();
        })
        .then(text => {
            if (text === "Processing started. Check /stream_output for updates.") {
                streamOutput(responseArea);
            } else {
                responseArea.innerText = text;
                submitButton.disabled = false;
            }
        })
        .catch(error => {
            console.error('Error processing URL:', error);
            responseArea.innerText = 'Error processing URL: ' + error.message;
            submitButton.disabled = false;
        });
    });

    function streamOutput(responseArea) {
        // Fetch the streaming output
        fetch('/stream_output')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const reader = response.body.getReader();
                const decoder = new TextDecoder("utf-8");

                responseArea.innerHTML = "";

                function readStream() {
                    reader.read().then(({ done, value }) => {
                        if (done) {
                            submitButton.disabled = false;
                            return;
                        }
                        const chunk = decoder.decode(value, { stream: true });
                        responseArea.innerHTML += chunk;
                        responseArea.scrollTop = responseArea.scrollHeight;
                        readStream();
                    }).catch(error => {
                        console.error('Error reading stream:', error);
                        responseArea.innerText = 'Error reading stream: ' + error.message;
                        submitButton.disabled = false;
                    });
                }

                readStream();
            })
            .catch(error => {
                console.error('Error fetching stream:', error);
                responseArea.innerText = 'Error fetching stream: ' + error.message;
                submitButton.disabled = false;
            });
    }
});