const form = document.querySelector("form");
const input = document.querySelector("input");
const chatbox = document.getElementById("chatbox");
const avatar = document.getElementById("avatar");

function appendBubble(text, sender) {
    const bubble = document.createElement("div");
    bubble.classList.add("bubble", sender);
    bubble.textContent = text;
    chatbox.appendChild(bubble);
    chatbox.scrollTop = chatbox.scrollHeight;
}

function streamText(element, text) {
    element.textContent = "";
    let i = 0;
    const interval = setInterval(() => {
        element.textContent += text[i];
        i++;
        if (i >= text.length) clearInterval(interval);
        chatbox.scrollTop = chatbox.scrollHeight;
    }, 25);
}

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

    // User message
    appendBubble(message, "user");
    input.value = "";

    // Placeholder AI message
    const aiBubble = document.createElement("div");
    aiBubble.classList.add("bubble", "ai");
    aiBubble.textContent = "⏳ SHODAN is thinking...";
    chatbox.appendChild(aiBubble);
    chatbox.scrollTop = chatbox.scrollHeight;

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

        const data = await res.json();

        if (data.reply) {
            streamText(aiBubble, data.reply);

            // Audio playback if available
            if (data.audio) {
                const audio = new Audio(data.audio);
                audio.play();
            }
        } else {
            aiBubble.textContent = "⚠️ SHODAN is silent. Something went wrong.";
        }
    } catch (err) {
        aiBubble.textContent = "❌ ERROR contacting SHODAN backend.";
        console.error(err);
    }
});