document.getElementById('react-query-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const queryText = document.getElementById('react-query-text').value;
    const response = await fetch('/react_query', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: queryText }),
    });
    const data = await response.json();
    const taskId = data.task_id;
    monitorTask(taskId);
});

async function monitorTask(taskId) {
    const statusDiv = document.getElementById('results');
    statusDiv.innerHTML = `<p>Task ID: ${taskId}</p><p>Status: Monitoring...</p>`;
    let completed = false;
    while (!completed) {
        const response = await fetch(`/status/${taskId}`);
        const data = await response.json();
        statusDiv.innerHTML = `<p>Task ID: ${taskId}</p><p>Status: ${data.status}</p><p>Current Step: ${data.current_step}</p>`;
        if (data.status === 'completed') {
            completed = true;
            const stepsList = data.steps.map(step => `<li>${step}</li>`).join('');
            statusDiv.innerHTML += `<ul>${stepsList}</ul>`;
            break;
        }
        await new Promise(resolve => setTimeout(resolve, 2000));
    }
}

document.getElementById('query-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const queryText = document.getElementById('query-text').value;
    const agent = document.getElementById('agent-select').value;
    const response = await fetch('/query', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: queryText, agent }),
    });
    const data = await response.json();
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = data.results.map(result => `<p>${result.content}</p>`).join('');
});

document.getElementById('upload-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const fileInput = document.getElementById('file-input');
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
    });
    const data = await response.json();
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = `<p>${data.message}</p>`;
});