<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>REIKER GPT 3-o</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Arial', sans-serif;
      background-color: #121212;
      display: flex;
      flex-direction: column;
      height: 100vh;
      color: #e0e0e0;
    }

    .header {
      background: linear-gradient(90deg, #0a84ff, #1e1e1e);
      color: #fff;
      padding: 15px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 2px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      z-index: 1;
    }

    .header span {
      font-size: 24px;
      color: #ffa500;
      text-shadow: 0 2px 4px rgba(255, 165, 0, 0.6);
    }

    .chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .chat-box {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
      background-color: #1e1e1e;
      display: flex;
      flex-direction: column;
      gap: 10px; /* Consistent spacing between messages */
    }

    .message-wrapper {
      display: flex;
      width: 100%;
    }

    .message {
      padding: 12px 16px;
      border-radius: 18px;
      max-width: 75%;
      word-wrap: break-word;
      font-size: 14px;
    }

    .user-message {
      background-color: #0a84ff;
      color: #fff;
      margin-left: auto;
      text-align: right;
      border-bottom-right-radius: 4px;
      border-top-right-radius: 18px;
      border-top-left-radius: 18px;
      box-shadow: 0 4px 8px rgba(10, 132, 255, 0.3);
    }

    .bot-message {
      background-color: #333;
      color: #e0e0e0;
      margin-right: auto;
      text-align: left;
      border-bottom-left-radius: 4px;
      border-top-right-radius: 18px;
      border-top-left-radius: 18px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .input-container {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      background-color: #1e1e1e;
      border-top: 1px solid #333;
      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    }

    .input-container input {
      flex: 1;
      padding: 12px 15px;
      font-size: 16px;
      background-color: #2c2c2c;
      border: none;
      border-radius: 25px;
      color: #fff;
      outline: none;
      transition: box-shadow 0.3s ease;
    }

    .input-container input::placeholder {
      color: #aaa;
    }

    .input-container input:focus {
      box-shadow: 0 0 8px rgba(10, 132, 255, 0.8);
    }

    .input-container button {
      background-color: #0a84ff;
      color: white;
      border: none;
      padding: 12px 15px;
      border-radius: 50%;
      margin-left: 10px;
      cursor: pointer;
      font-size: 16px;
      box-shadow: 0 4px 8px rgba(10, 132, 255, 0.3);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .input-container button:disabled {
      background-color: #555;
      box-shadow: none;
      cursor: not-allowed;
    }

    .input-container button:active {
      transform: scale(0.95);
      box-shadow: 0 2px 4px rgba(10, 132, 255, 0.3);
    }
  </style>
</head>
<body>
  <div class="header">
    <span>REIKER GPT 3-o</span>
  </div>
  <div class="chat-container">
    <div id="chat-box" class="chat-box"></div>
    <div class="input-container">
      <input id="chat-input" type="text" placeholder="Type a message..." />
      <button id="send-button" disabled>▶</button>
    </div>
  </div>

  <script>
    const chatBox = document.getElementById("chat-box");
    const chatInput = document.getElementById("chat-input");
    const sendButton = document.getElementById("send-button");

    // Enable/Disable the send button based on input value
    chatInput.addEventListener("input", () => {
      sendButton.disabled = chatInput.value.trim() === "";
    });

    sendButton.addEventListener("click", () => {
      const userMessage = chatInput.value.trim();
      if (userMessage) {
        displayMessage(userMessage, "user-message");
        chatInput.value = "";
        sendButton.disabled = true;
        fetchResponse(userMessage);
      }
    });

    function displayMessage(message, type) {
      const wrapperDiv = document.createElement("div");
      wrapperDiv.classList.add("message-wrapper");

      const messageDiv = document.createElement("div");
      messageDiv.classList.add("message", type);
      messageDiv.textContent = message;

      wrapperDiv.appendChild(messageDiv);
      chatBox.appendChild(wrapperDiv);
      chatBox.scrollTop = chatBox.scrollHeight; // Scroll to the bottom
    }

    function fetchResponse(userMessage) {
      const apiUrl = `https://api.davidcyriltech.my.id/ai/chatbot?query=${encodeURIComponent(
        userMessage
      )}`;

      fetch(apiUrl)
        .then((response) => response.json())
        .then((data) => {
          if (data.success && data.result) {
            displayMessage(data.result, "bot-message");
          } else {
            displayMessage("Error: Could not fetch response.", "bot-message");
          }
        })
        .catch(() => {
          displayMessage("Error: Unable to reach the server.", "bot-message");
        });
    }
  </script>
</body>
</html>