{% extends "base.html" %}
{% block title %}AI Ask — MOSAIC{% endblock %}

{% block head %}
<style>
  .rag-answer { font-size: .95em; line-height: 1.6; }
  .rag-answer p { margin-bottom: .6rem; }
  .rag-answer h1, .rag-answer h2, .rag-answer h3 { margin-top: 1rem; }
  .rag-answer code { font-size: .88em; }
  .source-list { font-size: .85em; margin-top: 1rem; }
  .source-list li { margin-bottom: .25rem; }
</style>
{% endblock %}

{% block content %}
<h2>AI &mdash; Ask</h2>

<p>Ask a question about your indexed papers. Results are generated by the configured LLM
using retrieved paper abstracts as context.
Requires <a href="{{ url_for('ui.rag_index_page') }}">indexed papers</a> and an
<a href="{{ url_for('ui.config_page') }}">LLM configured</a>.</p>

<form id="ask-form" onsubmit="return false">
  <textarea name="query" rows="3" placeholder="e.g. What are the main approaches to transformer attention efficiency?" autofocus required></textarea>

  <div class="grid">
    <label>
      Mode
      <select name="mode">
        <option value="synthesis">Synthesis &mdash; state-of-the-art summary</option>
        <option value="gaps">Gaps &mdash; open problems and limitations</option>
        <option value="compare">Compare &mdash; structured paper comparison</option>
        <option value="extract">Extract &mdash; task / method / dataset / metric / result</option>
      </select>
    </label>
    <label>
      Top-k papers to retrieve <small>(overrides config default)</small>
      <input type="number" name="top_k" min="1" max="50" placeholder="default">
    </label>
  </div>

  <details>
    <summary>Restrict to a subset</summary>
    <div class="filter-grid" style="margin-top:.5rem;">
      <label>
        Year filter <small>(e.g. 2020, 2020-2024)</small>
        <input type="text" name="year" placeholder="e.g. 2020-2024">
      </label>
      <label>
        Keyword filter <small>(pre-filter papers whose title/abstract contains this text)</small>
        <input type="text" name="subset_query" placeholder="e.g. BERT">
      </label>
    </div>
  </details>

  <div style="display:flex;gap:.5rem;align-items:center;margin-top:.75rem;">
    <button type="submit"
            hx-post="{{ url_for('ui.rag_ask_submit') }}"
            hx-include="#ask-form"
            hx-target="#ask-result"
            hx-swap="innerHTML"
            hx-indicator="#ask-spinner">
      Ask
    </button>
    <label style="margin:0;display:flex;align-items:center;gap:.3rem;">
      <input type="checkbox" name="show_sources" checked>
      Show source papers
    </label>
    <span id="ask-spinner" class="htmx-indicator" aria-busy="true">Querying&hellip;</span>
  </div>
</form>

<div id="ask-result" style="margin-top:1.5rem;"></div>

<script src="{{ url_for('static', filename='marked.min.js') }}"></script>
<script>
// After HTMX injects the answer, render any .rag-answer divs as markdown
document.body.addEventListener('htmx:afterSwap', function(e) {
  if (e.detail.target.id === 'ask-result' || e.detail.target.closest && e.detail.target.closest('#ask-result')) {
    document.querySelectorAll('#ask-result .rag-answer').forEach(function(el) {
      el.innerHTML = marked.parse(el.textContent);
    });
  }
});
</script>
{% endblock %}