import GlobalConfig from "../global-config.js";

document.addEventListener("DOMContentLoaded", function () {
    const textarea = document.getElementById("user-message");
    const sendButton = document.getElementById("send");
    const conversationArea = document.querySelector(".row.flex-grow");

    // Fungsi untuk mengirim pesan
    async function sendMessage() {
        const userText = textarea.value.trim();
        if (userText !== "") {
            // Kosongkan textarea setelah mengirim
            textarea.value = "";

            // Tambahkan pesan user ke UI
            addMessage(userText, "user");

            // Tambahkan pesan bot sementara dengan "Loading..."
            const botMessageElement = addMessage('<div class="loader w-auto"></div>', "bot");

            // Panggil API untuk mendapatkan response dari bot
            const botResponse = await getBotResponse(userText);

            // Perbarui pesan bot dengan respons yang sebenarnya
            botMessageElement.innerHTML = botResponse;;
        }
    }

    // Event listener untuk klik tombol
    sendButton.addEventListener("click", sendMessage);

    // Event listener untuk menekan Enter di textarea
    textarea.addEventListener("keydown", function (event) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault(); // Mencegah newline di textarea
            sendMessage(); // Panggil fungsi kirim pesan
        }
    });

    function addMessage(text, sender) {
        const messageRow = document.createElement("div");
        messageRow.classList.add("row", "flex-grow", "overflow-auto");
    
        const messageCol = document.createElement("div");
        messageCol.classList.add("w-auto", "d-inline-block"); // Menyesuaikan lebar konten
    
        if (sender === "user") {
            messageCol.classList.add("ms-auto", "max-w-50"); // Rata kanan, max 50% (setara col-6)
        } else {
            messageCol.classList.add("max-w-75"); // Max 75% (setara col-9)
    
            // Tambahkan avatar hanya untuk bot
            const avatarSpan = document.createElement("span");
            avatarSpan.classList.add("d-flex", "align-items-center", "mb-1");
    
            const avatarImg = document.createElement("img");
            avatarImg.classList.add("rounded-circle");
            avatarImg.width = 32;
            avatarImg.src = "/images/iconchatbot.jpeg";
            avatarImg.alt = "bot-avatar";
    
            avatarSpan.appendChild(avatarImg);
            messageCol.appendChild(avatarSpan);
        }
    
        const messageDiv = document.createElement("div");
        messageDiv.classList.add("p-2", "rounded", "mb-2");
    
        if (sender === "user") {
            messageDiv.classList.add("user-response", "bg-primary", "text-white");
        } else {
            messageDiv.classList.add("bot-response", "bg-light");
        }
    
        // Menyisipkan konten HTML langsung (bisa berupa teks atau loader)
        messageDiv.innerHTML = text;
        messageCol.appendChild(messageDiv);
        messageRow.appendChild(messageCol);
    
        // Tambahkan ke area percakapan
        conversationArea.appendChild(messageRow);
    
        // Scroll otomatis ke bawah
        conversationArea.scrollTop = conversationArea.scrollHeight;
    
        return messageDiv; // Mengembalikan elemen agar bisa diperbarui nanti
    }

    // Fungsi untuk memanggil API
    async function getBotResponse(userText) {
        try {
            const url = `${GlobalConfig.apiHost}/api/main-generate-text`;
            const response = await fetch(url, {
                method: "POST",
                body: JSON.stringify({prompt: userText }),
                headers: {
                    Authorization: `Bearer ${document
                        .querySelector('meta[name="api-token"]')
                        .getAttribute("content")}`,
                    "Content-Type": "application/json",
                },
            });

            const data = await response.json();
            return data.response || "Maaf, saya tidak mengerti.";
        } catch (error) {
            console.error("Error fetching bot response:", error);
            return "Terjadi kesalahan, coba lagi nanti.";
        }
    }
});