const chat = document.getElementById("chat-box");
const input = document.getElementById("msg");

let isSending = false;
let lastMessage = "";
let messageCount = 0;

function scrollBottom() {
  requestAnimationFrame(() => {
    chat.scrollTo({ top: chat.scrollHeight, behavior: "smooth" });
  });
}

function formatText(text) {
  return text
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
    .replace(/\*(.*?)\*/g, "<em>$1</em>")
    .replace(/`(.*?)`/g, "<code>$1</code>")
    .replace(/\n/g, "<br>");
}

function createAvatarEl(emoji) {
  const el = document.createElement("div");
  el.className = "avatar";
  el.textContent = emoji;
  return el;
}

function addMessage(type, text) {
  if (!text || typeof text !== "string") text = "⚠️ Invalid message";
  messageCount++;

  const wrapper = document.createElement("div");
  wrapper.className = `msg ${type}`;

  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.innerHTML = formatText(text);

  if (type === "user") {
    wrapper.appendChild(bubble);
    wrapper.appendChild(createAvatarEl("👤"));
  } else {
    wrapper.appendChild(createAvatarEl("🕉️"));
    wrapper.appendChild(bubble);
  }

  chat.appendChild(wrapper);
  scrollBottom();
  return wrapper;
}

function createTyping() {
  const wrapper = document.createElement("div");
  wrapper.className = "msg bot";

  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.innerHTML = `<div class="typing-dots"><span></span><span></span><span></span></div>`;

  wrapper.appendChild(createAvatarEl("🕉️"));
  wrapper.appendChild(bubble);
  chat.appendChild(wrapper);
  scrollBottom();
  return wrapper;
}

function setInputState(disabled) {
  input.disabled = disabled;
  const btn = document.querySelector(".send-btn");
  if (btn) {
    btn.style.opacity = disabled ? "0.45" : "1";
    btn.style.pointerEvents = disabled ? "none" : "auto";
  }
}

function shakeSendBtn() {
  const btn = document.querySelector(".send-btn");
  if (!btn) return;
  btn.classList.add("shake");
  setTimeout(() => btn.classList.remove("shake"), 400);
}

async function sendMsg() {
  if (isSending) return;

  const msg = input.value.trim();
  if (!msg) { shakeSendBtn(); return; }

  isSending = true;
  lastMessage = msg;

  addMessage("user", msg);
  input.value = "";
  input.blur();
  setInputState(true);

  const typing = createTyping();

  try {
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 20000);

    const res = await fetch(`/ask?msg=${encodeURIComponent(msg)}`, {
      method: "GET",
      signal: controller.signal
    });

    clearTimeout(timeout);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const data = await res.json();
    typing.remove();

    const reply = data?.reply;
    if (!reply) {
      addMessage("bot", "⚠️ I received an empty response. Please try again.");
    } else {
      addMessage("bot", reply);
    }

  } catch (err) {
    typing.remove();
    if (err.name === "AbortError") {
      addMessage("bot", "⏱️ The response took too long. Please try again.");
    } else if (!navigator.onLine) {
      addMessage("bot", "📡 You appear to be offline. Check your connection.");
    } else {
      addMessage("bot", "🌐 Something went wrong. Please try again.");
    }
    console.error("[Vasudev AI]", err);
  }

  isSending = false;
  setInputState(false);
  input.focus();
}

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    sendMsg();
  }
});

input.addEventListener("focus", () => {
  setTimeout(scrollBottom, 350);
});

input.addEventListener("input", () => {
  const wrap = document.querySelector(".input-wrap");
  if (!wrap) return;
  wrap.classList.toggle("has-text", input.value.length > 0);
});

function clearChat() {
  chat.innerHTML = "";
  messageCount = 0;
}

function retry() {
  if (lastMessage && !isSending) {
    input.value = lastMessage;
    sendMsg();
  }
}

window.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    addMessage("bot", "Namaste 🙏 I am **Vasudev AI** — ask me anything. Wisdom, knowledge, or guidance awaits.");
  }, 400);
});