{% extends "base.html" %}
{% block content %}
<h1 style="color:#e6edf3;margin-bottom:1.5rem;font-size:1.5rem;font-weight:600">💬 Ask</h1>

<div class="ask-box">
  <input id="q-input" type="text" placeholder="How does authentication work?" autofocus>
  <div class="spinner" id="spinner"></div>
  <button id="ask-btn" onclick="submitQuestion()">Ask</button>
</div>

<div id="live-answer" style="display:none" class="qa-item">
  <div class="q" id="live-q"></div>
  <div class="prose" id="live-a"></div>
</div>

<div id="history">
{% for item in history %}
<div class="qa-item">
  <div class="q">{{ item.question }}</div>
  <div class="prose">{{ item.answer | safe }}</div>
  <div class="meta">{{ item.model }} · {{ item.created_at }}</div>
</div>
{% endfor %}
</div>

<script>
function simpleMarkdown(text) {
  return text
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/^### (.+)$/gm, '<h3>$1</h3>')
    .replace(/^## (.+)$/gm, '<h2>$1</h2>')
    .replace(/^# (.+)$/gm, '<h1>$1</h1>')
    .replace(/\n/g, '<br>');
}

async function submitQuestion() {
  const input = document.getElementById('q-input');
  const q = input.value.trim();
  if (!q) return;

  const btn = document.getElementById('ask-btn');
  const spinner = document.getElementById('spinner');
  const liveBox = document.getElementById('live-answer');

  btn.disabled = true;
  spinner.style.display = 'block';
  liveBox.style.display = 'block';
  document.getElementById('live-q').textContent = q;
  document.getElementById('live-a').innerHTML = '<em style="color:var(--muted)">Thinking…</em>';

  const form = new FormData();
  form.append('question', q);

  try {
    const res = await fetch('/ask', { method: 'POST', body: form });
    const data = await res.json();
    if (data.error) {
      document.getElementById('live-a').innerHTML = '<span style="color:#f85149">' + data.error + '</span>';
    } else {
      document.getElementById('live-a').innerHTML = simpleMarkdown(data.answer);
      const hist = document.getElementById('history');
      const div = document.createElement('div');
      div.className = 'qa-item';
      div.innerHTML = '<div class="q">' + q + '</div><div class="prose">' + simpleMarkdown(data.answer) + '</div>';
      hist.prepend(div);
      liveBox.style.display = 'none';
      input.value = '';
    }
  } catch(e) {
    document.getElementById('live-a').innerHTML = '<span style="color:#f85149">Request failed</span>';
  }

  btn.disabled = false;
  spinner.style.display = 'none';
}

document.getElementById('q-input').addEventListener('keydown', e => {
  if (e.key === 'Enter') submitQuestion();
});
</script>
{% endblock %}