// Reference the elements that we will need
const status = document.getElementById('status');
const codeInput = document.getElementById('codeInput');
const resultsContainer = document.getElementById('results');
const analyzeButton = document.querySelector('button');

// Set initial status
status.textContent = 'Ready to analyze code';

// Event listener for the analyze button
analyzeButton.addEventListener('click', async () => {
    const code = codeInput.value.trim();
    if (!code) {
        status.textContent = 'Please enter some Python code.';
        return;
    }

    status.textContent = 'Analyzing...';

    try {
        const response = await fetch('/analyze', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ code })
        });

        if (!response.ok) {
            throw new Error('Failed to analyze code');
        }

        const result = await response.json();
        displayResults(result);
        status.textContent = 'Analysis complete';
    } catch (error) {
        status.textContent = 'Error analyzing code';
        console.error(error);
    }
});

// Function to display the results
function displayResults(results) {
    resultsContainer.innerHTML = '';

    const preElement = document.createElement('pre');
    preElement.textContent = JSON.stringify(results, null, 2);

    resultsContainer.appendChild(preElement);
}