{{define "title"}}Ask · {{.RepoName}} — rekipedia{{end}}
{{define "extra_head"}}
<style>
#main{overflow:hidden}
#ask-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden}
#ask-header{padding:16px 0 12px;border-bottom:1px solid #1e2a3a;flex-shrink:0}
#ask-header h2{font-size:1.1em;font-weight:600;color:#e2e8f0;margin:0}
#ask-header .sub{font-size:12px;color:#4b5563;margin-top:2px}
#chat-history{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:20px 0}
.msg{display:flex;flex-direction:column;gap:3px;max-width:88%}
.msg.user{align-self:flex-end}
.msg.assistant{align-self:flex-start}
.msg .bubble{padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.65;word-break:break-word}
.msg.user .bubble{background:#1d4ed8;color:#eff6ff;border-bottom-right-radius:4px;white-space:pre-wrap}
.msg.assistant .bubble{background:#111827;border:1px solid #1e2a3a;color:#e2e8f0;border-bottom-left-radius:4px}
.msg .meta{font-size:11px;color:#4b5563;padding:0 4px}
.msg.user .meta{text-align:right}
#ask-input-bar{flex-shrink:0;display:flex;gap:8px;align-items:flex-end;padding:12px 0 8px;border-top:1px solid #1e2a3a}
#ask-input{flex:1;background:#111827;border:1px solid #334155;color:#e2e8f0;padding:10px 14px;border-radius:8px;font-size:14px;resize:none;min-height:42px;max-height:150px;font-family:inherit;line-height:1.5}
#ask-input:focus{outline:none;border-color:#3b82f6}
#ask-send{padding:10px 18px;background:#2563eb;color:#eff6ff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s}
#ask-send:hover{background:#1d4ed8}
#ask-send:disabled{background:#1e2a3a;color:#4b5563;cursor:not-allowed}
#ask-clear{padding:10px 14px;background:#1e2a3a;color:#9ca3af;border:1px solid #334155;border-radius:8px;font-size:13px;cursor:pointer;transition:background .15s}
#ask-clear:hover{background:#253347;color:#e2e8f0}
.thinking{opacity:.6;font-style:italic}
.msg.assistant .bubble h1,.msg.assistant .bubble h2,.msg.assistant .bubble h3{color:#f1f5f9;margin:.8em 0 .3em}
.msg.assistant .bubble h2{font-size:1.05em}
.msg.assistant .bubble code{background:#0d1424;border:1px solid #334155;padding:1px 5px;border-radius:3px;font-size:.82em;color:#7dd3fc}
.msg.assistant .bubble pre{background:#0d1424;border:1px solid #1e2a3a;border-radius:6px;padding:12px;overflow-x:auto;margin:.6em 0}
.msg.assistant .bubble pre code{background:none;border:none;padding:0;color:#e2e8f0}
.msg.assistant .bubble ul,.msg.assistant .bubble ol{margin:.4em 0 .6em 1.4em}
.msg.assistant .bubble li{margin-bottom:.2em}
.msg.assistant .bubble p{margin-bottom:.6em}
.msg.assistant .bubble a{color:#60a5fa}
#empty-state{flex:1;display:flex;align-items:center;justify-content:center;color:#374151;font-size:14px;text-align:center}
</style>
{{end}}
{{define "content"}}
<div id="ask-wrap">
  <div id="ask-header">
    <h2>Ask · {{.RepoName}}</h2>
    <div class="sub">Grounded Q&amp;A from your wiki and code index</div>
  </div>

  <div id="chat-history">
    <div id="empty-state">No conversation yet.<br>Ask your first question below.</div>
  </div>

  <div id="ask-input-bar">
    <textarea id="ask-input" placeholder="Ask a question about this repo…" rows="1"></textarea>
    <button id="ask-clear" onclick="clearChat()" title="Clear display">Clear</button>
    <button id="ask-send" onclick="sendQuestion()">Send</button>
  </div>
</div>

<script>
function renderMd(text) {
  return text
    .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
    .replace(/```(\w*)\n([\s\S]*?)```/g, (_,lang,code)=>`<pre><code class="lang-${lang}">${code}</code></pre>`)
    .replace(/`([^`]+)`/g,'<code>$1</code>')
    .replace(/^### (.+)$/gm,'<h3>$1</h3>')
    .replace(/^## (.+)$/gm,'<h2>$1</h2>')
    .replace(/^# (.+)$/gm,'<h1>$1</h1>')
    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
    .replace(/\*(.+?)\*/g,'<em>$1</em>')
    .replace(/^\s*[-*] (.+)$/gm,'<li>$1</li>')
    .replace(/(<li>[\s\S]*<\/li>)/,'<ul>$1</ul>')
    .replace(/\n\n/g,'</p><p>')
    .replace(/^(?!<[a-z])(.+)$/gm,'<p>$1</p>');
}

function escHtml(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}

function fmtTs(ts){
  if(!ts) return '';
  try { return new Date(ts).toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'}); } catch{ return ts.substring(0,16).replace('T',' '); }
}

let isStreaming = false;

async function loadHistory() {
  try {
    const resp = await fetch('/api/history');
    if (!resp.ok) return;
    const history = await resp.json();
    if (!history || history.length === 0) return;
    document.getElementById('empty-state')?.remove();
    for (const item of history) {
      appendMessage('user', item.question, item.created_at || '');
      appendMessage('assistant', item.answer, item.created_at || '');
    }
    scrollChat();
  } catch(e) { console.warn('history load failed', e); }
}

function appendMessage(role, text, ts) {
  const hist = document.getElementById('chat-history');
  const msg = document.createElement('div');
  msg.className = 'msg ' + role;
  msg.innerHTML = `
    <div class="bubble">${role === 'assistant' ? renderMd(text) : escHtml(text)}</div>
    <div class="meta">${role === 'user' ? 'You' : 'Assistant'}${ts ? ' · ' + fmtTs(ts) : ''}</div>
  `;
  hist.appendChild(msg);
  return msg;
}

function scrollChat(){
  const h=document.getElementById('chat-history');
  h.scrollTop=h.scrollHeight;
}

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

  document.getElementById('empty-state')?.remove();
  input.value = '';
  input.style.height = '';

  appendMessage('user', q, new Date().toISOString());

  const hist = document.getElementById('chat-history');
  const assistantMsg = document.createElement('div');
  assistantMsg.className = 'msg assistant';
  assistantMsg.innerHTML = '<div class="bubble thinking">Thinking…</div><div class="meta">Assistant</div>';
  hist.appendChild(assistantMsg);
  scrollChat();

  const bubble = assistantMsg.querySelector('.bubble');
  let accumulated = '';
  isStreaming = true;
  document.getElementById('ask-send').disabled = true;

  try {
    const resp = await fetch('/ask/stream', {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({question: q})
    });
    if (!resp.ok || !resp.body) {
      bubble.textContent = 'Error: ' + resp.statusText;
      isStreaming = false;
      document.getElementById('ask-send').disabled = false;
      return;
    }
    const reader = resp.body.getReader();
    const decoder = new TextDecoder();
    let buf = '';
    while (true) {
      const {done, value} = await reader.read();
      if (done) break;
      buf += decoder.decode(value, {stream: true});
      const lines = buf.split('\n');
      buf = lines.pop();
      for (const line of lines) {
        if (!line.startsWith('data: ')) continue;
        const chunk = line.slice(6);
        if (chunk === '[DONE]') { reader.cancel(); break; }
        if (chunk.startsWith('[ERROR]')) { bubble.textContent = chunk; break; }
        accumulated += chunk.replace(/\\n/g, '\n');
        bubble.className = 'bubble';
        bubble.innerHTML = renderMd(accumulated);
        scrollChat();
      }
    }
  } catch(e) {
    bubble.textContent = 'Stream error: ' + e.message;
  }

  isStreaming = false;
  document.getElementById('ask-send').disabled = false;
}

function clearChat() {
  const hist = document.getElementById('chat-history');
  hist.innerHTML = '<div id="empty-state" style="flex:1;display:flex;align-items:center;justify-content:center;color:#374151;font-size:14px;text-align:center">No conversation yet.<br>Ask your first question below.</div>';
}

document.getElementById('ask-input').addEventListener('input', function(){
  this.style.height = '';
  this.style.height = Math.min(this.scrollHeight, 150) + 'px';
});
document.getElementById('ask-input').addEventListener('keydown', function(e){
  if (e.key==='Enter' && !e.shiftKey) { e.preventDefault(); sendQuestion(); }
});

loadHistory();
</script>
{{end}}