<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Ocwiki AI</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #1f1f1f, #3d3d3d);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
            margin: 0;
            padding: 20px;
        }

        .container {
            background-color: rgba(0, 0, 0, 0.8);
            padding: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            width: 90%;
            max-width: 600px;
            border: 1px solid #ff0055;
            text-align: center; /* Center text */
        }

        .header img {
            max-width: 100%; /* Responsif gambar */
            height: auto;
            border-radius: 10px; /* Rounded corners for image */
        }

        .header {
            margin-bottom: 10px; /* Spacing below image */
        }

        .header h1 {
            margin: 10px 0; /* Spacing for heading */
            font-size: 24px;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            position: relative;
        }

        .button-group button {
            flex: 1;
            margin: 0 5px;
            padding: 10px;
            color: #fff;
            background-color: #ff0055;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
            position: relative;
            z-index: 1;
        }

        .button-group button:hover {
            opacity: 0.8;
        }

        .button-group .highlight {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: calc(33.33% - 10px);
            background: rgba(255, 255, 255, 0.5);
            border-radius: 4px;
            transition: left 0.3s ease-in-out;
            z-index: 0;
        }

        .input-group {
            position: relative;
            margin-bottom: 15px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
        }

        .input-group textarea {
            width: calc(100% - 50px);
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #555;
            border-radius: 4px 0 0 4px;
            background-color: #666;
            color: #fff;
            resize: none;
            height: 100px;
            transition: border-color 0.3s ease-in-out;
        }

        .input-group textarea:focus {
            border-color: #ff0055;
        }

        .send-arrow {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            background-color: #ff0055;
            color: #fff;
            cursor: pointer;
            border-radius: 0 4px 4px 0;
            transition: background-color 0.3s ease-in-out;
        }

        .send-arrow:hover {
            background-color: #ff3366;
        }

        .response-container {
            margin-top: 20px;
        }

        .response {
            white-space: pre-wrap;
            margin-top: 10px;
            padding: 10px;
            background-color: #555;
            border-radius: 4px;
            transition: border-color 0.3s ease-in-out;
            max-height: 300px;
            overflow-y: auto;
        }

        .response.typing {
            border-color: #ff0055;
            border-right: 0.1em solid #fff;
            animation: blink-caret 0.75s step-end infinite;
        }

        @keyframes blink-caret {
            from,
            to {
                border-color: transparent;
            }

            50% {
                border-color: #fff;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <img src="https://i.ibb.co/Jxs1GXm/copilot-image-1734157242848.jpg" alt="Ocwiki AI Logo">
            <h1>Ocwiki AI</h1>
        </div>
        <div class="button-group">
            <div class="highlight" id="highlight"></div>
            <button id="freeButton" onclick="setTopic('free')">Topik Bebas</button>
            <button id="dbButton" onclick="setTopic('db')">Topik DB</button>
            <button id="fixStoryButton" onclick="setTopic('fixStory')">Topik Perbaiki Cerita</button>
        </div>
        <div class="input-group">
            <label for="message-input">Pesan:</label>
            <textarea id="message-input" placeholder="Masukkan pesan Anda"></textarea>
            <span class="send-arrow" onclick="sendMessage()">➡️</span>
        </div>
        <div class="response-container">
            <div class="subheader">Hasil AI:</div>
            <div class="response" id="response"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        let selectedTopic = 'free';
        let isGenerating = false; // Flag untuk menandakan apakah sedang menghasilkan respons

        function setTopic(topic) {
            if (isGenerating) return; // Jangan izinkan pindah topik saat sedang menghasilkan respons
            disableButtons(20); // Nonaktifkan tombol selama 20 detik
            selectedTopic = topic;
            const highlight = document.getElementById('highlight');

            // Reset button styles
            resetButtonStyles();

            if (selectedTopic === 'db') {
                highlight.style.left = 'calc(33.33% + 5px)';
                document.getElementById('dbButton').style.backgroundColor = '#ff3366';
                delayedSendMessage('apa anda tau vsbattle character anime');
            } else if (selectedTopic === 'fixStory') {
                highlight.style.left = 'calc(66.66% + 10px)';
                document.getElementById('fixStoryButton').style.backgroundColor = '#ff3366';
                delayedSendMessage('bisa perbaiki cerita saya ini');
            } else {
                highlight.style.left = '0';
                document.getElementById('freeButton').style.backgroundColor = '#ff3366';
                delayedSendMessage('saya mau bahas topik bebas apa anda bisa menjawab semua nya ?');
            }
        }

        function resetButtonStyles() {
            const buttons = document.querySelectorAll('.button-group button');
            buttons.forEach(button => {
                button.style.backgroundColor = '#ff0055'; // Reset warna default
            });
        }

        async function delayedSendMessage(predefinedMessage) {
            // Tunggu 2 detik sebelum mengirim pesan
            setTimeout(() => {
                sendMessage(predefinedMessage);
            }, 2000); // Tunggu selama 2000 milidetik (2 detik)
        }

        async function sendMessage(predefinedMessage) {
            const promptText = 'Nama anda adalah Fajar';
            const messageText = predefinedMessage || document.getElementById('message-input').value;

            // Validasi input
            if (!messageText.trim()) {
                alert("Pesan tidak boleh kosong!");
                return;
            }

            const requestData = {
                content: messageText,
                user: "exampleUser",
                prompt: promptText
            };

            // Nonaktifkan tombol dan set flag
            isGenerating = true;
            disableButtons(20); // Nonaktifkan tombol selama 20 detik

            try {
                console.log('Mengirim permintaan ke API:', requestData);
                const response = (await axios.post('https://luminai.my.id', requestData)).data.result;
                console.log('Menerima respons dari API:', response);
                typeResponse(response);
            } catch (e) {
                console.error('Terjadi kesalahan selama permintaan API:', e);
                typeResponse(`Terjadi kesalahan: ${e.message}`);
            } finally {
                isGenerating = false; // Reset flag saat proses selesai
            }
        }

        function disableButtons(seconds) {
            const buttons = document.querySelectorAll('.button-group button');
            buttons.forEach(button => {
                button.disabled = true; // Nonaktifkan tombol
            });
            document.querySelector('.send-arrow').disabled = true; // Nonaktifkan tombol kirim

            setTimeout(() => {
                buttons.forEach(button => {
                    button.disabled = false; // Aktifkan kembali tombol
                });
                document.querySelector('.send-arrow').disabled = false; // Aktifkan kembali tombol kirim
            }, seconds * 1000); // Aktifkan kembali setelah x detik
        }

        function typeResponse(text) {
            const responseElement = document.getElementById('response');
            responseElement.textContent = '';
            responseElement.classList.add('typing');
            let i = 0;
            function type() {
                if (i < text.length) {
                    responseElement.textContent += text.charAt(i);
                    i++;
                    setTimeout(type, 30);  // Kecepatan mengetik diatur lebih cepat
                } else {
                    responseElement.classList.remove('typing');
                }
            }
            type();
        }
    </script>
</body>

</html>