{% extends "base.html" %}
{% block content %}
<header class="header">
  <h2>{{ subject_label }} - {{ "Ilmu Pengetahuan Alam dan Sosial" if subject=='ipas'
                              else "Pendidikan Jasmani, Olahraga, dan Kesehatan" if subject=='penjas'
                              else "Pendidikan Pancasila dan Kewarganegaraan" }}</h2>
  <a class="link" href="{{ url_for('subjects') }}">← Kembali ke Home</a>
</header>

<main class="main">
  <div id="chat-box" class="chat-box">
    <div class="msg bot">Halo! Selamat datang di chat mata pelajaran {{ subject_label }}. Ada yang bisa saya bantu?</div>
  </div>
  <div class="input-row">
    <input id="message" type="text" placeholder="Ketik pesan Anda...">
    <button id="send" class="btn">SEND</button>
  </div>
</main>

<script>
const chatBox = document.getElementById('chat-box');
const msgInput = document.getElementById('message');
const sendBtn = document.getElementById('send');

function append(role, text) {
  const item = document.createElement('div');
  item.className = 'msg ' + role;
  item.textContent = text;
  chatBox.appendChild(item);
  chatBox.scrollTop = chatBox.scrollHeight;
}

async function ask(text){
  const res = await fetch('{{ url_for("ask", subject_key=subject) }}', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({message: text})
  });
  return await res.json();
}

// ✅ FIX: pastikan history selalu ada array valid
const history = {{ history|default([])|tojson|safe }};
for (const item of history) {
  const div = document.createElement('div');
  div.className = 'msg ' + item.role;
  div.textContent = item.message;
  chatBox.appendChild(div);
}

sendBtn.addEventListener('click', async () => {
  const text = msgInput.value.trim();
  if (!text) return;
  append('user', text);
  msgInput.value = '';
  append('bot', '⏳ Sedang memikirkan jawaban...');
  try {
    const data = await ask(text);
    chatBox.lastChild.textContent = data.ok ? data.answer : ('Error: ' + (data.error || 'unknown'));
  } catch (e) {
    chatBox.lastChild.textContent = 'Error jaringan.';
  }
});

msgInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') sendBtn.click();
});
</script>
{% endblock %}