const form = document.getElementById("chat-form");
const input = document.getElementById("user-input");
const chatBox = document.getElementById("chat-box");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const userMessage = input.value.trim();
  if (!userMessage) return;

  appendMessage(userMessage, "user");
  input.value = "";

  appendMessage("Typing...", "bot", true);

  try {
    const response = await fetch("/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: userMessage }),
    });

    const data = await response.json();
    removeTyping();
    appendMessage(data.reply, "bot");
  } catch (error) {
    removeTyping();
    appendMessage("Error connecting to server.", "bot");
  }
});

function appendMessage(text, sender, isTyping = false) {
  const message = document.createElement("div");
  message.classList.add("message");
  message.classList.add(sender === "user" ? "user-message" : "bot-message");
  if (isTyping) message.id = "typing";
  message.textContent = text;
  chatBox.appendChild(message);
  chatBox.scrollTop = chatBox.scrollHeight;
}

function removeTyping() {
  const typingMsg = document.getElementById("typing");
  if (typingMsg) typingMsg.remove();
}