const CHAT = document.getElementById("chat");
const INPUT = document.getElementById("input");
const SEND = document.getElementById("sendBtn");

function addMessage(text, who = "ai") {
    const div = document.createElement("div");
    div.className = who === "user" ? "msg-user" : "msg-ai";

    const bubble = document.createElement("span");
    bubble.className = "bubble " + (who === "user" ? "bubble-user" : "bubble-ai");
    bubble.innerText = text;

    div.appendChild(bubble);
    CHAT.appendChild(div);
    CHAT.scrollTop = CHAT.scrollHeight;
}

async function sendMessage() {
    const msg = INPUT.value.trim();
    if (!msg) return;

    addMessage(msg, "user");
    INPUT.value = "";

    addMessage("⏳ Thinking...", "ai");

    const response = await fetch("backend/openrouter.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: msg })
    });

    const data = await response.json();

    CHAT.lastChild.remove(); // remove "Thinking..."

    addMessage(data.reply, "ai");
}

SEND.onclick = sendMessage;
INPUT.onkeydown = (e) => { if (e.key === "Enter") sendMessage(); };