const form = document.getElementById("qa-form");
const input = document.getElementById("question-input");
const currentAnswer = document.getElementById("current-answer");
const historyList = document.getElementById("history-list");

form.addEventListener("submit", async (e) => {
  e.preventDefault();

  const question = input.value.trim();
  if (!question) return;

  // Show loading
  currentAnswer.style.display = "block";
  currentAnswer.textContent = "Consulting the Hogwarts archives...";

  const formData = new FormData();
  formData.append("query", question);

  try {
    const res = await fetch("/ask", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams({ query: question })
    });

    const text = await res.text();
    console.log("RAW RESPONSE:", text);

    if (!res.ok) {
      currentAnswer.textContent = `Error ${res.status}: ${text}`;
      return;
    }

    const data = JSON.parse(text);
    const answer = data.answer;

    // Move to history
    const item = document.createElement("div");
    item.className = "history-item";
    item.innerHTML = `
      <div class="history-question">${question}</div>
      <div class="history-answer">${answer}</div>
    `;
    historyList.prepend(item);

    currentAnswer.style.display = "none";
    input.value = "";

  } catch (err) {
    console.error(err);
    currentAnswer.textContent = "JS error: " + err.message;
  }
});

function addToHistory(question, answer) {
  const item = document.createElement("div");
  item.className = "history-item";

  item.innerHTML = `
    <div class="history-question">Q: ${escapeHTML(question)}</div>
    <div class="history-answer">${escapeHTML(answer)}</div>
  `;

  historyList.prepend(item);
}

function escapeHTML(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}