// Submit button click
document.getElementById("submit-btn").addEventListener("click", async () => {
    const context = document.getElementById("context").value.trim();
    const questions = document.getElementById("question").value.trim();
    const output = document.getElementById("answer-box");
    const history = document.getElementById("history-list");

    if (!context || !questions) {
        output.textContent = "⚠️ Please provide both context and question(s).";
        return;
    }

    // Clear previous answers
    output.innerHTML = "";
    output.textContent = "⏳ Generating answers...";

    const res = await fetch("/predict", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ context, question: questions })
    });

    const data = await res.json();

    if (data.error) {
        output.textContent = "⚠️ " + data.error;
        return;
    }

    // Clear loading text
    output.innerHTML = "";

    // Display each Q&A nicely
    data.results.forEach((r, i) => {
        const qaDiv = document.createElement("div");
        qaDiv.className = "mb-4 p-3 bg-indigo-50 dark:bg-gray-800 rounded-lg shadow";

        const qElem = document.createElement("p");
        qElem.innerHTML = `<strong>Q${i + 1}:</strong> ${r.question}`;
        qElem.className = "font-semibold";

        const aElem = document.createElement("p");
        aElem.innerHTML = `<strong>Answer:</strong> ${r.answer}`;

        const sElem = document.createElement("p");
        sElem.innerHTML = `<strong>Confidence:</strong> ${r.score}`;

        qaDiv.appendChild(qElem);
        qaDiv.appendChild(aElem);
        qaDiv.appendChild(sElem);

        output.appendChild(qaDiv);
    });

    // Add to history
    const li = document.createElement("li");
    li.textContent = questions.replace(/\n/g, " | ");

    // Make history item clickable
    li.addEventListener("click", () => {
        document.getElementById("question").value = questions;
        // Optionally scroll to top
        document.getElementById("question").scrollIntoView({ behavior: "smooth" });
    });

    history.prepend(li);
});

// Dark mode toggle
document.getElementById("dark-toggle").addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
});