{% extends "base.html" %}
{% block title %}audit log · Maverick{% endblock %}
{% block content %}
  <h2>audit log</h2>

  <div class="panel">
    <form method="get" action="/audit" style="display: flex; gap: 1rem; align-items: end; flex-wrap: wrap;">
      <label>
        <div class="muted" style="font-size: 0.75rem; text-transform: uppercase;">lines</div>
        <input type="number" name="n" value="{{ n }}" min="1" max="1000"
               style="padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);" />
      </label>
      <label>
        <div class="muted" style="font-size: 0.75rem; text-transform: uppercase;">day (YYYY-MM-DD)</div>
        <input type="text" name="day" value="{{ day or '' }}" placeholder="today"
               style="padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);" />
      </label>
      <label>
        <div class="muted" style="font-size: 0.75rem; text-transform: uppercase;">kind</div>
        <select name="kind"
                style="padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);">
          <option value="">(all)</option>
          {% for k in kinds %}
          <option value="{{ k }}"{% if k == kind %} selected{% endif %}>{{ k }}</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit"
              style="padding: 0.45rem 1rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer;">
        load
      </button>
    </form>
  </div>

  <div class="panel">
    <form id="audit-search" style="display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap;">
      <label style="flex: 1 1 300px;">
        <div class="muted" style="font-size: 0.75rem; text-transform: uppercase;">search (regex)</div>
        <input type="text" id="audit-pattern" placeholder="tool_call.*shell"
               style="width: 100%; padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);" />
      </label>
      <label>
        <div class="muted" style="font-size: 0.75rem; text-transform: uppercase;">day</div>
        <input type="text" id="audit-search-day" value="{{ day or '' }}" placeholder="today"
               style="padding: 0.4rem 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text);" />
      </label>
      <button type="submit"
              style="padding: 0.45rem 1rem; background: var(--accent); color: #fff; border: 0; border-radius: 4px; cursor: pointer;">
        search
      </button>
    </form>
    <p id="audit-search-msg" role="status" aria-live="polite" class="muted" style="margin-top: 0.5rem; min-height: 1em; font-size: 0.85rem;"></p>
    <pre id="audit-search-results" tabindex="0" aria-label="Search results" style="white-space: pre-wrap; margin: 0; max-height: 360px; overflow-y: auto; font-size: 0.8rem;"></pre>
  </div>

  <script>
    (function() {
      const form = document.getElementById('audit-search');
      const pat = document.getElementById('audit-pattern');
      const day = document.getElementById('audit-search-day');
      const msg = document.getElementById('audit-search-msg');
      const out = document.getElementById('audit-search-results');
      const btn = form.querySelector('button[type="submit"]');
      form.addEventListener('submit', async function(ev) {
        ev.preventDefault();
        const p = pat.value.trim();
        if (!p) { msg.textContent = 'Pattern required.'; return; }
        if (btn) btn.disabled = true;
        msg.style.color = 'var(--muted)';
        msg.textContent = 'Searching…';
        out.textContent = '';
        const url = new URL('/api/v1/audit/grep', window.location.origin);
        url.searchParams.set('pattern', p);
        if (day.value.trim()) url.searchParams.set('day', day.value.trim());
        try {
          const r = await fetch(url.toString());
          if (!r.ok) {
            const j = await r.json().catch(() => ({}));
            msg.style.color = 'var(--danger)';
            msg.textContent = j.detail || ('HTTP ' + r.status);
            return;
          }
          const data = await r.json();
          const events = data.events || [];
          msg.textContent = events.length + ' match(es).';
          out.textContent = events.map(e => JSON.stringify(e)).join('\n');
        } catch (e) {
          msg.style.color = 'var(--danger)';
          msg.textContent = String(e);
        } finally {
          if (btn) btn.disabled = false;
        }
      });
    })();
  </script>

  <div class="panel">
    {% if events %}
      <table>
        <thead>
          <tr><th scope="col">ts</th><th scope="col">kind</th><th scope="col">agent</th><th scope="col">goal</th><th scope="col">detail</th></tr>
        </thead>
        <tbody>
        {% for ev in events %}
          <tr>
            <td class="muted" style="white-space: nowrap;">{{ ev.ts | datetime }}</td>
            <td><code>{{ ev.kind }}</code></td>
            <td class="muted">{{ ev.agent or '-' }}</td>
            <td class="muted">{{ ev.goal_id if ev.goal_id is not none else '-' }}</td>
            <td>
              {% set keep = ['v', 'ts', 'kind', 'agent', 'goal_id'] %}
              {% set extras = {} %}
              {% for k, v in ev.items() if k not in keep %}{% set _ = extras.update({k: v}) %}{% endfor %}
              {% if extras %}
                <code style="font-size: 0.75rem; display: block; white-space: pre-wrap; word-break: break-all;">{{ extras | tojson(indent=2) }}</code>
              {% else %}
                <span class="muted">-</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="muted">
        No audit events for the selected day. Maverick writes to
        <code>~/.maverick/audit/YYYY-MM-DD.ndjson</code>; run a goal first.
      </p>
    {% endif %}
  </div>
{% endblock %}