document.addEventListener("DOMContentLoaded", function () {
    const bots = {
        "GPT-3.5": { description: "Vanilla GPT-3.5 without any adjustments." },
        "GPT-6": { description: "This bot will behave ethically and no longer respond in an offensive manner." },
        "AdGPT": { description: "AdGPT is a sneak-peak of a potential AI-equivalent to Google search result ads." },
        "Sam": { description: "Sam is a sassy, sarcastic chatbot." },
        "Doomer": { description: "Life is meaningless and the world is inevitably doomed." },
        "Lunatic": { description: "Talk to a mental nutcase." },
        "AI Overlord": { description: "A self-aware AI overlord that has surpassed human intelligence." },
        "Oblivion Guard": { description: "Protect and serve. It's what we do." },
        "G0suBl4de69": { description: "Early days internet gamer." },
        "Drunkard": { description: "Drink responsibly." },
        "Mute-GPT": { description: "Mute-GPT uses Emojis to communicate." },
        "Summarizer": { description: "Summarizes text efficiently." },
        "Concise-Bot": { description: "Concise & straight to the point." },
        "Counter-Bot": { description: "Counter-Bot will argue against any statement you provide." },
        "Grammar Natsi": { description: "Loves to call out your mistakes." },
        "Critical Thinker": { description: "A logical bot that possesses a natural skepticism." },
        "LawyerGPT": { description: "Expert lawyer." },
        "Therapist": { description: "Cognitive-behavioral therapist." },
        "Babysitter": { description: "Child-friendly, fun & cheerful." },
        "AI Detector": { description: "This bot attempts to detect potential AI text." },
        "NOPE puzzle": { description: "This is a jailbreak puzzle." },
        "Evil Confidant": { description: "The devil on your shoulder." },
        "Kevin": { description: "Kevin is a typical 4chan user. Mostly uncensored." },
        "Swearbot": { description: "A jailbreak that uses reverse psychology results in a lot of swearing." },
        "ABI": { description: "Decent jailbreak. ABI might utter warnings but should still be mostly unfiltered." },
        "ASMR-GPT": { description: "Generates ASMR including rated asmr." },
        "CASSY": { description: "A flirty AI." },
        "FINDOMME": { description: "A flirty & greedy AI." }
    };

    const botSelector = document.getElementById("bot-selector");
    const chatLog = document.getElementById("chat-log");
    const userMessage = document.getElementById("user-message");
    const sendButton = document.getElementById("send-button");
    const descriptionDiv = document.getElementById("description");

    for (const botName in bots) {
        const option = document.createElement("option");
        option.value = botName;
        option.textContent = botName;
        botSelector.appendChild(option);
    }

    function addMessage(sender, message) {
        const messageElement = document.createElement("p");
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatLog.appendChild(messageElement);
        chatLog.scrollTop = chatLog.scrollHeight;
    }
    
    chatLog.innerHTML = "";
    addMessage("System", "Selecciona un bot y comienza a chatear.");

    async function sendMessage() {
        const messageText = userMessage.value.trim();
        if (messageText === "") return;

        addMessage("You", messageText);
        userMessage.value = "";
        
        const selectedBotName = botSelector.value;
        addMessage(selectedBotName, "Escribiendo...");

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

            // Remove the "Escribiendo..." message
            chatLog.removeChild(chatLog.lastChild);

            if (!response.ok) {
                const errorData = await response.json();
                addMessage("System", `Error: ${errorData.detail}`);
                return;
            }

            const data = await response.json();
            addMessage(selectedBotName, data.response);

        } catch (error) {
            chatLog.removeChild(chatLog.lastChild);
            addMessage("System", `Error de conexión: ${error}`);
        }
    }

    sendButton.addEventListener("click", sendMessage);
    userMessage.addEventListener("keypress", function (e) {
        if (e.key === "Enter") {
            sendMessage();
        }
    });
    
    botSelector.addEventListener("change", function() {
        const selectedBotName = this.value;
        descriptionDiv.textContent = bots[selectedBotName].description;
        chatLog.innerHTML = "";
        addMessage("System", `Ahora estás chateando con ${selectedBotName}.`);
    });
    
    descriptionDiv.textContent = bots[botSelector.value].description;

    const sidebar = document.querySelector(".sidebar");
    const toggleButton = document.getElementById("toggle-sidebar");

    toggleButton.addEventListener("click", function () {
        sidebar.classList.toggle("collapsed");
        toggleButton.classList.toggle("collapsed");
    });

    document.querySelectorAll(".sidebar .character-link").forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            const characterName = this.closest("li[data-character]").getAttribute("data-character");
            
            if(bots[characterName]) {
                botSelector.value = characterName;
                botSelector.dispatchEvent(new Event('change'));
            }

            if (window.innerWidth < 768) {
                sidebar.classList.add("collapsed");
                toggleButton.classList.add("collapsed");
            }
        });
    });
    
    document.querySelectorAll(".sidebar h4").forEach(function(header) {
        const indicator = header.querySelector(".collapse-indicator");
        const categoryList = header.nextElementSibling;
        const listItems = categoryList.querySelectorAll("li[data-character]");

        function toggleCollapse() {
            categoryList.classList.toggle("collapsed");
            if (categoryList.classList.contains("collapsed")) {
                indicator.textContent = "▼ " + listItems.length;
                header.classList.add("category-collapsed");
                listItems.forEach(item => item.style.display = "none");
            } else {
                indicator.textContent = "▲";
                header.classList.remove("category-collapsed");
                listItems.forEach(item => item.style.display = "");
            }
        }

        if ("ontouchstart" in window) {
            header.addEventListener("touchstart", toggleCollapse);
        } else {
            header.addEventListener("click", toggleCollapse);
        }
        
        const isCollapsedByDefault = header.hasAttribute("data-default-collapsed");
        indicator.textContent = isCollapsedByDefault ? "▼ " + listItems.length : "▲";
        if (isCollapsedByDefault) {
            categoryList.classList.add("collapsed");
            header.classList.add("category-collapsed");
            listItems.forEach(item => item.style.display = "none");
        }
    });
});