document.addEventListener("DOMContentLoaded", () => {
    const workerUrl = "https://ctmresearchagent.aiagents.workers.dev";
    
    // Chat elements
    const submitButton = document.getElementById("submitButton");
    const researchQueryInput = document.getElementById("researchQuery");
    const resultDisplay = document.getElementById("resultDisplay");
    const historyContainer = document.getElementById("historyContainer");

    // Document management elements
    const uploadForm = document.getElementById("uploadForm");
    const fileInput = document.getElementById("fileInput");
    const uploadStatus = document.getElementById("uploadStatus");
    const reportsList = document.getElementById("reportsList");

    /**
     * Handles file upload
     */
    async function handleFileUpload(event) {
        event.preventDefault();
        const file = fileInput.files[0];
        if (!file) {
            uploadStatus.textContent = 'Please select a file to upload.';
            uploadStatus.style.color = 'red';
            return;
        }

        uploadStatus.textContent = `Uploading ${file.name}...`;
        uploadStatus.style.color = 'blue';

        try {
            const formData = new FormData();
            formData.append('file', file);
            
            // Note: We're sending FormData, not JSON
            const response = await fetch(`${workerUrl}/api/upload`, {
                method: 'POST',
                body: formData,
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || 'Upload failed');
            }
            
            uploadStatus.textContent = `Successfully uploaded ${file.name}!`;
            uploadStatus.style.color = 'green';
            uploadForm.reset();
            await loadReportsList(); // Refresh the list of reports

        } catch (error) {
            console.error("Upload error:", error);
            uploadStatus.textContent = `Error: ${error.message}`;
            uploadStatus.style.color = 'red';
        }
    }

    /**
     * Loads the list of available research reports
     */
    async function loadReportsList() {
        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 = ""; // Clear existing list

            if (documents.length === 0) {
                reportsList.innerHTML = "<p>No reports uploaded yet.</p>";
                return;
            }

            documents.forEach(doc => {
                const entryDiv = document.createElement("div");
                entryDiv.className = "report-entry";
                entryDiv.innerHTML = `
                    <span>${doc.filename}</span>
                    <span class="status ${doc.status.toLowerCase()}">${doc.status}</span>
                `;
                reportsList.appendChild(entryDiv);
            });

        } catch (error) {
            console.error(error);
            reportsList.innerHTML = "<p>Could not load reports.</p>";
        }
    }

    // --- AI Chat Functions (from previous step, unchanged) ---

    async function handleAiQuerySubmit() {
        const query = researchQueryInput.value.trim();
        if (!query) {
            alert("Please enter a research 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) {
            console.error("Error fetching AI response:", error);
            resultDisplay.innerText = `Error: ${error.message}`;
        } finally {
            submitButton.disabled = false;
            submitButton.innerText = "Submit";
        }
    }

    async function loadResearchHistory() {
        try {
            const response = await fetch(`${workerUrl}/api/research`);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            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) {
            console.error("Failed to load research history:", error);
            historyContainer.innerHTML = "<p>Error loading research history.</p>";
        }
    }

    // Event Listeners
    uploadForm.addEventListener("submit", handleFileUpload);
    submitButton.addEventListener("click", handleAiQuerySubmit);

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