{% extends "base.html" %}
{% block content %}
<div class="console" x-data="consolePage({{ {'kind': kind} | tojson }})">
  <nav class="console-tabs">
    <button type="button" :class="kind === 'find' ? 'tab-active' : ''" @click="kind = 'find'">find</button>
    <button type="button" :class="kind === 'aggregate' ? 'tab-active' : ''" @click="kind = 'aggregate'">aggregate</button>
    <button type="button" :class="kind === 'runCommand' ? 'tab-active' : ''" @click="kind = 'runCommand'">runCommand</button>
  </nav>

  <!-- find -->
  <form
    x-show="kind === 'find'"
    class="filter-form"
    method="post"
    action="/console/find"
  >
    <div class="filter-controls">
      <label>Database <input type="text" name="db" required value="{{ form.db or '' }}" /></label>
      <label>Collection <input type="text" name="coll" required value="{{ form.coll or '' }}" /></label>
      <label>Limit <input type="number" name="limit" min="1" max="200" value="{{ form.limit or '50' }}" /></label>
    </div>
    <label class="filter-label">
      Filter (Extended JSON)
      <textarea name="filter" rows="2" placeholder='{"status": "active"}'>{{ form.filter or '' }}</textarea>
    </label>
    <label class="filter-label">
      Sort (Extended JSON, optional)
      <textarea name="sort" rows="1" placeholder='{"created_at": -1}'>{{ form.sort or '' }}</textarea>
    </label>
    <label class="filter-label">
      Projection (Extended JSON, optional)
      <textarea name="projection" rows="1" placeholder='{"name": 1}'>{{ form.projection or '' }}</textarea>
    </label>
    <div class="modal-actions">
      <button type="submit">Run find</button>
    </div>
  </form>

  <!-- aggregate -->
  <form
    x-show="kind === 'aggregate'"
    class="filter-form"
    method="post"
    action="/console/aggregate"
  >
    <div class="filter-controls">
      <label>Database <input type="text" name="db" required value="{{ form.db or '' }}" /></label>
      <label>Collection <input type="text" name="coll" required value="{{ form.coll or '' }}" /></label>
      <label>Limit <input type="number" name="limit" min="1" max="1000" value="{{ form.limit or '200' }}" /></label>
    </div>
    <label class="filter-label">
      Pipeline (Extended JSON array)
      <textarea name="pipeline" rows="6" placeholder='[{"$match": {}}, {"$count": "n"}]'>{{ form.pipeline or '' }}</textarea>
    </label>
    <div class="modal-actions">
      <button type="submit">Run aggregate</button>
    </div>
  </form>

  <!-- runCommand -->
  <form
    x-show="kind === 'runCommand'"
    class="filter-form"
    method="post"
    action="/console/runCommand"
  >
    <div class="filter-controls">
      <label>Database <input type="text" name="db" required value="{{ form.db or 'admin' }}" /></label>
    </div>
    <label class="filter-label">
      Command (Extended JSON object)
      <textarea name="command" rows="4" placeholder='{"serverStatus": 1}'>{{ form.command or '' }}</textarea>
    </label>
    <div class="modal-actions">
      <button type="submit">Run command</button>
    </div>
  </form>

  {% for msg in errors %}
    <div class="error">{{ msg }}</div>
  {% endfor %}

  {% if results is not none %}
    <h2 class="section-title">
      Results
      {% if stats %}<span class="modal-meta">— {{ stats.count }} doc{{ '' if stats.count == 1 else 's' }} from <code>{{ stats.ns }}</code></span>{% endif %}
    </h2>
    {% if results %}
      <div class="changestream-log">
        {% for body in results %}
          <pre class="doc-body">{{ body }}</pre>
        {% endfor %}
      </div>
    {% else %}
      <p class="empty">No documents.</p>
    {% endif %}
  {% endif %}

  {% if history %}
    <h2 class="section-title">Recent</h2>
    <ul class="history-list">
      {% for entry in history %}
        <li>
          <button
            type="button"
            class="btn-secondary"
            @click="loadHistory({{ entry.id }}, '{{ entry.kind }}')"
          >{{ entry.kind }} #{{ entry.id }}</button>
          <code class="history-summary" x-text="''"></code>
          <span class="history-payload">{{ entry.payload }}</span>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

<script>
function consolePage(initial) {
  return {
    kind: initial.kind || "find",

    async loadHistory(id, kind) {
      this.kind = kind;
      const r = await fetch(`/console/history/${id}`);
      if (!r.ok) return;
      const payload = await r.json();
      // Re-populate the active form's fields from the stored payload.
      const form = document.querySelector(
        `form[action="/console/${kind}"]`
      );
      if (!form) return;
      for (const [name, value] of Object.entries(payload)) {
        const field = form.elements.namedItem(name);
        if (field) field.value = value;
      }
    },
  };
}
</script>
{% endblock %}