{% load static %}
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Indira – MIND</title>

<style>
/* =====================
   RESET & BASE
===================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  background: #f4f6f8;
}

/* =====================
   LAYOUT
===================== */
.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.chat-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* =====================
   HEADER
===================== */
.header {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.header p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

/* =====================
   CHAT AREA
===================== */
.chat-box {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(
    to bottom,
    #eef2ff,
    #f5f7ff
  );
}


.message {
  max-width: 85%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
}

.message.bot {
  background: #e0e7ff;
  color: #1e293b;
  border-top-left-radius: 6px;
}


.message.user {
  background: linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );
  color: #ffffff;
  margin-left: auto;
  border-top-right-radius: 6px;
}

/* =====================
   TYPING INDICATOR
===================== */
.typing {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #e0e7ff;
  color: #1e293b;
  padding: 10px 14px;
  border-radius: 14px;
  border-top-left-radius: 6px;
  font-size: 13px;
}

.typing .dots {
  display: flex;
  gap: 4px;
}

.typing .dots span {
  width: 6px;
  height: 6px;
  background: #1e3a8a;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.typing .dots span:nth-child(2) { animation-delay: 0.2s; }
.typing .dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0% { opacity: .2; }
  20% { opacity: 1; }
  100% { opacity: .2; }
}

/* =====================
   INPUT
===================== */
.input-area {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
}

.input-area input {
  flex: 1;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
}

.input-area button {
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

/* =====================
   DESKTOP
===================== */
@media (min-width: 768px) {
  body {
    background: linear-gradient(135deg, #eef2ff, #f8fafc);
  }

  .chat-card {
    height: 90vh;
    margin: auto;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    overflow: hidden;
  }
}
</style>
</head>

<body>

<div class="page">
  <div class="chat-card">

    <!-- HEADER -->
    <header class="header">
      <div class="header-left">
        <img src="{% static 'chat/logo.png' %}" class="logo">
        <div>
          <h1>Indira – MIND</h1>
          <p>Permenpar No. 6 Tahun 2025</p>
        </div>
      </div>
    </header>

    <!-- CHAT -->
    <div class="chat-box" id="chatBox">
      <div class="message bot">
        Halo, saya <b>Indira – MIND</b> 👋<br>
        Silakan ajukan pertanyaan terkait usaha pariwisata.
      </div>

      <div class="typing" id="typingIndicator" style="display:none;">
        <span>Indira sedang mengetik</span>
        <div class="dots">
          <span></span><span></span><span></span>
        </div>
      </div>
    </div>

    <!-- INPUT -->
    <div class="input-area">
      <input id="questionInput" placeholder="Tulis pertanyaan Anda...">
      <button id="sendBtn">Kirim</button>
    </div>

  </div>
</div>

<script>
const API_URL = "/coba/api/tanya/";

const chatBox = document.getElementById("chatBox");
const input = document.getElementById("questionInput");
const sendBtn = document.getElementById("sendBtn");
const typing = document.getElementById("typingIndicator");

/* =====================
   UTIL
===================== */
function scrollBottom() {
  chatBox.scrollTop = chatBox.scrollHeight;
}

function addMessage(text, sender) {
  const div = document.createElement("div");
  div.className = `message ${sender}`;
  div.innerHTML = text;
  chatBox.appendChild(div);
  scrollBottom();
  return div;
}

/* Streaming text (AI feel) */
function streamText(el, text, speed = 25) {
  let i = 0;
  el.innerHTML = "";
  const interval = setInterval(() => {
    el.innerHTML += text.charAt(i);
    i++;
    scrollBottom();
    if (i >= text.length) clearInterval(interval);
  }, speed);
}

/* =====================
   SEND QUESTION
===================== */
async function sendQuestion() {
  const question = input.value.trim();
  if (!question) return;

  // tampilkan pesan user
  addMessage(question, "user");
  input.value = "";

  // tampilkan typing indicator
  typing.style.display = "flex";
  scrollBottom();

  try {
    const res = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ pertanyaan: question }),
    });

    if (!res.ok) {
      throw new Error("Server error");
    }

    const data = await res.json();

    // sembunyikan typing
    typing.style.display = "none";

    // buat bubble bot kosong
    const botMsg = addMessage("", "bot");

    const jawaban =
      data.jawaban && data.jawaban.trim()
        ? data.jawaban
        : "Tidak ditemukan jawaban.";

    // streaming response
    streamText(botMsg, jawaban);

  } catch (err) {
    typing.style.display = "none";

    const botMsg = addMessage("", "bot");
    streamText(botMsg, "❌ Gagal menghubungi server. Silakan coba lagi.");
  }
}

/* =====================
   EVENT
===================== */
sendBtn.addEventListener("click", sendQuestion);

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    sendQuestion();
  }
});
</script>


</body>
</html>
