<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CulturGPT Chatbot</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.24/dist/tailwind.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #2d3748;
            color: #e2e8f0;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            transition: background-color 0.3s ease;
        }
        .chat-container {
            width: 80%;
            max-width: 800px;
            background-color: #4a5568;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            overflow-y: auto;
            height: 50vh;
            margin-bottom: 20px;
        }
        .user-message, .bot-message {
            margin: 10px 0;
            padding: 10px;
            border-radius: 8px;
            background-color: #2b6cb0;
            color: white;
        }
        .user-message {
            text-align: right;
            background-color: #2b6cb0;
        }
        .bot-message {
            text-align: left;
            background-color: #38b2ac;
        }
        .bot-typing {
            text-align: left;
            font-style: italic;
            color: #cbd5e0;
        }
        .settings-container {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            visibility: hidden;
        }
        .settings-container label {
            color: white;
            margin-bottom: 5px;
        }
        .settings-container input {
            margin-bottom: 10px;
        }
        button {
            background-color: #38b2ac;
            border: none;
            padding: 10px 20px;
            color: white;
            font-size: 1.2em;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #319795;
        }
        .typing-indicator {
            font-size: 1.5em;
        }
        .input-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            width: 80%;
        }
        .input-container input {
            width: 80%;
            padding: 10px;
            font-size: 1em;
            border-radius: 8px;
            border: 1px solid #ccc;
        }
        .input-container button {
            margin-left: 10px;
        }
        #mainMenu {
            text-align: center;
            padding: 10px;
            background-color: #38b2ac;
            width: 100%;
            font-size: 2em;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        #mainMenu:hover {
            background-color: #319795;
        }
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            z-index: 1000;
        }
        .loading-screen .spinner-border {
            color: #38b2ac;
        }
        #developerMode {
            display: none;
            font-size: 1.5em;
            color: #e0e0e0;
        }
        footer {
            position: absolute;
            bottom: 10px;
            font-size: 1em;
            color: #cbd5e0;
        }
    </style>
</head>
<body>
    <div class="loading-screen" id="loadingScreen">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    
    <div id="mainMenu" class="mb-4">Main Menu - CulturGPT</div>
    <div class="chat-container" id="chatContainer"></div>
    
    <div class="input-container">
        <input type="text" id="userInput" placeholder="Type a message..." />
        <button id="sendMessageBtn">Send</button>
    </div>

    <div class="settings-container" id="settingsContainer">
        <label for="themeToggle">Light/Dark Theme</label>
        <input type="checkbox" id="themeToggle">
        <label for="smallTalk">Enable Small Talk</label>
        <input type="checkbox" id="smallTalk" checked>
        <label for="motivationalMessages">Enable Motivational Messages</label>
        <input type="checkbox" id="motivationalMessages" checked>
        <button id="toggleSettingsBtn">Hide Settings</button>
    </div>
    
    <footer>Made By Prompef</footer>

    <script>
        // Chatbot Configuration
        const CONFIG = {
            apiUrl: "https://api.ai21.com/studio/v1/chat/completions",
            apiKey: "QMIreLsU0wwKbGMTHU3Yam9d7pi8lxec",
            model: "jamba-1.5-large",
            maxTokens: 2048,
            temperature: 0.9,
            topP: 1,
            features: {
                smallTalk: true,
                motivationalMessages: true,
                contextMemory: [],
                developerMode: false,
                richResponses: true,
                messageEditing: true,
            }
        };

        // Utility Functions
        function getRandomResponse() {
            const responses = ["What can I help with?", "Let's chat!", "Ask me anything!"];
            return responses[Math.floor(Math.random() * responses.length)];
        }

        function displayMessage(content, isUser = false, isEditable = false) {
            const chatContainer = document.getElementById("chatContainer");

            const messageDiv = document.createElement("div");
            messageDiv.classList.add(isUser ? "user-message" : "bot-message");

            if (isEditable) {
                const editButton = document.createElement("button");
                editButton.textContent = "Edit";
                editButton.classList.add("btn", "btn-sm", "btn-warning");
                editButton.addEventListener("click", () => editMessage(content, messageDiv));
                messageDiv.appendChild(editButton);
            }

            messageDiv.textContent = content;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        function editMessage(originalMessage, messageDiv) {
            const newMessage = prompt("Edit your message:", originalMessage);
            if (newMessage !== null) {
                messageDiv.textContent = newMessage;
            }
        }

        function toggleSettings() {
            const settingsContainer = document.getElementById("settingsContainer");
            settingsContainer.style.visibility = settingsContainer.style.visibility === "hidden" ? "visible" : "hidden";
        }

        function showLoadingScreen() {
            document.getElementById("loadingScreen").style.visibility = "visible";
        }

        function hideLoadingScreen() {
            document.getElementById("loadingScreen").style.visibility = "hidden";
        }

        // Developer Mode Command
        function enterDeveloperMode(userMessage) {
            if (userMessage === "9948DEV") {
                CONFIG.features.developerMode = true;
                alert("Developer Mode Activated with 24 features!");
            }
        }

        // Chatbot Response
        async function chatWithCulturGPT(userMessage) {
            if (userMessage.toLowerCase() === "9948dev") {
                enterDeveloperMode(userMessage);
                return;
            }

            showLoadingScreen();

            const response = await fetch(CONFIG.apiUrl, {
                method: "POST",
                headers: {
                    "Authorization": `Bearer ${CONFIG.apiKey}`,
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    model: CONFIG.model,
                    messages: [{ role: "user", content: userMessage }],
                    max_tokens: CONFIG.maxTokens,
                    temperature: CONFIG.temperature,
                    top_p: CONFIG.topP,
                }),
            });

            const data = await response.json();
            const botResponse = data.choices[0]?.message?.content || getRandomResponse();

            hideLoadingScreen();
            displayMessage(botResponse, false, CONFIG.features.messageEditing);
        }

        // Event Listeners
        document.getElementById("sendMessageBtn").addEventListener("click", () => {
            const userMessage = document.getElementById("userInput").value;
            if (userMessage.trim()) {
                displayMessage(userMessage, true);
                chatWithCulturGPT(userMessage);
                document.getElementById("userInput").value = "";
            }
        });

        document.getElementById("themeToggle").addEventListener("change", () => {
            document.body.style.backgroundColor = document.body.style.backgroundColor === "rgb(45, 55, 72)" ? "#e2e8f0" : "#2d3748";
        });

        document.getElementById("mainMenu").addEventListener("click", toggleSettings);
    </script>
</body>
</html>