document.addEventListener("DOMContentLoaded", () => {
    const workerUrl = "https://ctmresearchagent.aiagents.workers.dev"; // Your worker URL
    
    // Event Listeners
    document.getElementById("uploadForm").addEventListener("submit", handleReportUpload);
    document.getElementById("submitButton").addEventListener("click", handleAiQuerySubmit);

    // Initial data load
    loadReportsList();
    loadResearchHistory();

    /**
     * NEW: Submits the structured report data as JSON
     */
    async function handleReportUpload(event) {
        event.preventDefault();
        const uploadButton = document.getElementById("uploadButton");
        const uploadStatus = document.getElementById("uploadStatus");
        const report = {
            title: document.getElementById('reportTitle').value,
            description: document.getElementById('reportDescription').value,
            body: document.getElementById('reportBody').value,
        };

        if (!report.title || !report.description || !report.body) {
            uploadStatus.textContent = 'Please fill out all fields.';
            return;
        }

        uploadButton.disabled = true;
        uploadButton.innerText = "Processing...";
        uploadStatus.textContent = "Submitting and processing report. This may take a moment...";

        try {
            const response = await fetch(`${workerUrl}/api/upload`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(report),
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data.error || 'Failed to process report.');
            
            uploadStatus.textContent = `Success: ${data.message}`;
            document.getElementById("uploadForm").reset();
            await loadReportsList(); // Refresh the list
        } catch (error) {
            uploadStatus.textContent = `Error: ${error.message}`;
        } finally {
            uploadButton.disabled = false;
            uploadButton.innerText = "Process and Add Report";
        }
    }

    /**
     * NEW: Loads the list of reports directly from the database
     */
    async function loadReportsList() {
        const reportsList = document.getElementById("reportsList");
        reportsList.innerHTML = "<p>Fetching reports...</p>";
        try {
            const response = await fetch(`${workerUrl}/api/documents`);
            if (!response.ok) throw new Error('Failed to fetch reports list.');
            const documents = await response.json();
            
            reportsList.innerHTML = "";
            if (documents.length === 0) { reportsList.innerHTML = "<p>No reports have been added yet.</p>"; return; }
            
            documents.forEach(doc => {
                const entryDiv = document.createElement("div");
                entryDiv.className = "report-entry";
                entryDiv.innerHTML = `<h3>${doc.title}</h3><p>${doc.description}</p>`;
                reportsList.appendChild(entryDiv);
            });
        } catch (error) {
            reportsList.innerHTML = `<p>Could not load reports: ${error.message}</p>`;
        }
    }

    // AI Query and History functions remain the same as the last working version
    async function handleAiQuerySubmit() { /* ... function code is unchanged ... */ }
    async function loadResearchHistory() { /* ... function code is unchanged ... */ }

    // Paste the unchanged functions here
    async function handleAiQuerySubmit() {
        const researchQueryInput = document.getElementById("researchQuery");
        const resultDisplay = document.getElementById("resultDisplay");
        const submitButton = document.getElementById("submitButton");
        const query = researchQueryInput.value.trim();
        if (!query) { alert("Please enter a query."); return; }
        submitButton.disabled = true;
        submitButton.innerText = "Thinking...";
        resultDisplay.innerHTML = "<p>Generating response...</p>";
        try {
            const response = await fetch(`${workerUrl}/api/query`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: query }) });
            const data = await response.json();
            if (!response.ok) throw new Error(data.error || "An unknown error occurred.");
            resultDisplay.innerText = data.result;
            await loadResearchHistory();
        } catch (error) {
            resultDisplay.innerText = `Error: ${error.message}`;
        } finally {
            submitButton.disabled = false;
            submitButton.innerText = "Submit";
        }
    }
    async function loadResearchHistory() {
        const historyContainer = document.getElementById("historyContainer");
        try {
            const response = await fetch(`${workerUrl}/api/research`);
            if (!response.ok) throw new Error('Failed to load history.');
            const logs = await response.json();
            historyContainer.innerHTML = "";
            if (logs.length === 0) { historyContainer.innerHTML = "<p>No research history found.</p>"; return; }
            logs.forEach(log => {
                const entryDiv = document.createElement("div");
                entryDiv.className = "history-entry";
                entryDiv.innerHTML = `<p><strong>Query:</strong> ${log.query}</p><p><strong>Result:</strong> ${log.result}</p><p><small><em>${new Date(log.timestamp).toLocaleString()}</em></small></p>`;
                historyContainer.appendChild(entryDiv);
            });
        } catch (error) {
            historyContainer.innerHTML = "<p>Error loading research history.</p>";
        }
    }
});