document.addEventListener("DOMContentLoaded", () => {
    const workerUrl = "https://ctmresearchagent.aiagents.workers.dev";
    
    // --- Event Listeners ---
    document.getElementById("uploadForm").addEventListener("submit", handleReportUpload);
    document.getElementById("submitButton").addEventListener("click", handleAiQuerySubmit);
    document.getElementById("reportsList").addEventListener("click", handleViewReportClick);
    
    // NEW: Event listener for collapsible reports section
    document.querySelector(".collapsible-header").addEventListener("click", toggleReportsList);

    // Modal close listeners
    const modal = document.getElementById('reportModal');
    document.querySelector('.modal-close-button').addEventListener('click', () => { modal.style.display = 'none'; });
    window.addEventListener('click', (event) => { if (event.target == modal) { modal.style.display = 'none'; }});

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

    /**
     * NEW: Toggles the visibility of the reports list
     */
    function toggleReportsList() {
        const reportsList = document.getElementById("reportsList");
        const reportsToggle = document.getElementById("reportsToggle");
        
        reportsList.classList.toggle("collapsed");

        if (reportsList.classList.contains("collapsed")) {
            reportsToggle.textContent = "+";
        } else {
            reportsToggle.textContent = "-";
        }
    }

    // --- All other functions are unchanged ---
    async function handleViewReportClick(event) {
        if (event.target.classList.contains('view-report-btn')) {
            const docId = event.target.dataset.id;
            const modalTitle = document.getElementById('modalTitle');
            const modalBody = document.getElementById('modalBody');
            modal.style.display = 'block';
            modalTitle.textContent = "Loading Report...";
            modalBody.textContent = "";
            try {
                const response = await fetch(`${workerUrl}/api/document/${docId}`);
                if (!response.ok) throw new Error('Document not found.');
                const doc = await response.json();
                modalTitle.textContent = doc.title;
                modalBody.textContent = doc.body;
            } catch(error) {
                modalTitle.textContent = "Error";
                modalBody.textContent = error.message;
            }
        }
    }

    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 = `<div><h3>${doc.title}</h3><p>${doc.description}</p></div><button class="view-report-btn" data-id="${doc.id}">View</button>`;
                reportsList.appendChild(entryDiv);
            });
        } catch (error) {
            reportsList.innerHTML = `<p>Could not load reports: ${error.message}</p>`;
        }
    }

    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 report..."; 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(); } catch (error) { uploadStatus.textContent = `Error: ${error.message}`; } finally { uploadButton.disabled = false; uploadButton.innerText = "Process and Add Report"; } }
    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>"; } }
});