{% extends "base.html" %}
{% block title %}Audit | Suvra{% endblock %}
{% block content %}
<section class="page-head">
  <h1>Audit Explorer</h1>
  <p class="muted">Filter and inspect execution history.</p>
</section>

{% if message %}
<p class="flash">
  {% if message == "rolled_back" %}
  Rollback completed.
  {% elif message == "error" %}
  Rollback failed{% if error_message %}: {{ error_message }}{% endif %}.
  {% else %}
  {{ message }}
  {% endif %}
</p>
{% endif %}

<section class="panel">
  <!-- View toggle -->
  <div class="view-toggle">
    <a href="?{{ view_params_table }}" class="view-toggle-tab {% if view_mode != 'timeline' %}is-active{% endif %}">Table view</a>
    <a href="?{{ view_params_timeline }}" class="view-toggle-tab {% if view_mode == 'timeline' %}is-active{% endif %}">Timeline view</a>
  </div>

  {% if view_mode == 'timeline' and timeline_data.has_enough_agents %}
    {% include "audit_timeline.html" %}
  {% else %}
    {% if view_mode == 'timeline' and not timeline_data.has_enough_agents %}
    <p class="muted" style="margin: 12px 0;">Timeline view requires activity from at least 2 agents. Showing table view instead.</p>
    {% endif %}

    <form method="get" action="/dashboard/audit" class="filter-bar">
      <label>
        Search
        <input type="text" name="q" placeholder="Search actor, action, target, result..." value="{{ filters.q or '' }}" />
      </label>
      <label>
        Actor
        <input type="text" name="actor" value="{{ filters.actor or '' }}" />
      </label>
      <label>
        Action Type
        <input type="text" name="action_type" value="{{ filters.action_type or '' }}" />
      </label>
      <label>
        Decision
        <input type="text" name="decision" value="{{ filters.decision or '' }}" />
      </label>
      <label>
        Status
        <input type="text" name="status" value="{{ filters.status or '' }}" />
      </label>
      <label>
        Agent
        <input type="text" name="agent" placeholder="e.g. codex" value="{{ filters.agent or '' }}" />
      </label>
      <label>
        Page Size
        <select name="page_size">
          <option value="25" {% if filters.page_size == 25 %}selected{% endif %}>25</option>
          <option value="50" {% if filters.page_size == 50 %}selected{% endif %}>50</option>
          <option value="100" {% if filters.page_size == 100 %}selected{% endif %}>100</option>
          <option value="200" {% if filters.page_size == 200 %}selected{% endif %}>200</option>
        </select>
      </label>
      <input type="hidden" name="page" value="1" />
      <button type="submit" class="btn btn-secondary">Apply</button>
      <a class="btn btn-secondary" href="/dashboard/audit">Clear</a>
      {% if ui_permissions.audit_export %}
      <a class="btn btn-secondary" href="{{ export_csv_url }}">Export CSV</a>
      <a class="btn btn-secondary" href="{{ export_json_url }}">Export JSON</a>
      {% else %}
      <button type="button" class="btn btn-secondary" disabled>Export CSV</button>
      <button type="button" class="btn btn-secondary" disabled>Export JSON</button>
      {% endif %}
    </form>

    <table class="data-table">
      <thead>
        <tr>
          <th>Time</th>
          <th>Agent</th>
          <th>Action</th>
          <th>Target</th>
          <th>Decision</th>
          <th>Status</th>
          <th>Rollback</th>
        </tr>
      </thead>
      <tbody>
        {% for event in events %}
        <tr class="audit-row" data-event-id="{{ event.action_id_raw }}" tabindex="0" role="button" aria-label="View event detail for {{ event.action_id_raw }}">
          <td data-utc="{{ event.created_at }}">{{ event.created_at }}</td>
          <td>{{ event.agent_display }}</td>
          <td>{{ event.title }}</td>
          <td><code>{{ event.target }}</code></td>
          <td><span class="badge {{ 'allow' if event.decision == 'allow' else ('deny' if event.decision == 'deny' else 'needs') }}">{{ event.decision }}</span></td>
          <td><span class="badge status-{{ event.status|replace('_', '-') }}">{{ event.status }}</span></td>
          <td>
            {% if event.rollback_available %}
            <form method="post" action="/dashboard/rollback/{{ event.action_id_raw }}" class="rollback-form">
              <input type="hidden" name="csrf" value="1" />
              <button type="submit" class="btn btn-secondary">Rollback</button>
            </form>
            {% else %}
            <span class="muted">none</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="7" class="muted">No audit events found.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div class="pagination">
      <div class="muted">Total: {{ pagination.total_count }} events</div>
      <div class="pager-controls">
        {% if pagination.has_prev %}
        <a class="btn btn-secondary" href="{{ pagination.prev_url }}">Prev</a>
        {% else %}
        <span class="btn btn-secondary disabled">Prev</span>
        {% endif %}
        <span class="muted">Page {{ pagination.page }} of {{ pagination.total_pages }}</span>
        {% if pagination.has_next %}
        <a class="btn btn-secondary" href="{{ pagination.next_url }}">Next</a>
        {% else %}
        <span class="btn btn-secondary disabled">Next</span>
        {% endif %}
      </div>
    </div>
  {% endif %}
</section>

<!-- Shared detail drawer -->
<div class="drawer" id="drawer-detail" role="dialog" aria-modal="true" aria-label="Event detail">
  <div class="drawer-backdrop"></div>
  <div class="drawer-panel">
    <div class="drawer-header">
      <h2 class="drawer-title">Event Detail</h2>
      <button class="drawer-close" type="button" id="drawer-close-btn" aria-label="Close">&times;</button>
    </div>
    <div class="drawer-body" id="drawer-detail-content">
      <div class="drawer-loading">
        <div class="spinner"></div>
        <p class="muted">Loading event detail...</p>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  'use strict';

  var drawer = document.getElementById('drawer-detail');
  var drawerContent = document.getElementById('drawer-detail-content');
  var loadingHTML = '<div class="drawer-loading"><div class="spinner"></div><p class="muted">Loading event detail...</p></div>';
  var errorHTML = '<div class="detail-not-found"><p class="muted">Failed to load event detail.</p></div>';

  function openDrawer(eventId) {
    if (!drawer) return;
    // Reset content to loading state
    drawerContent.innerHTML = loadingHTML;
    drawer.classList.add('is-open');
    document.body.style.overflow = 'hidden';

    // Fetch detail content
    fetch('/dashboard/audit/detail/' + encodeURIComponent(eventId), {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
      .then(function (resp) {
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        return resp.text();
      })
      .then(function (html) {
        drawerContent.innerHTML = html;
      })
      .catch(function () {
        drawerContent.innerHTML = errorHTML;
      });
  }

  function closeDrawer() {
    if (!drawer) return;
    drawer.classList.remove('is-open');
    document.body.style.overflow = '';
  }

  // Row click handlers — table view
  document.querySelectorAll('.audit-row').forEach(function (row) {
    row.addEventListener('click', function (e) {
      // Don't open drawer on form submit, buttons, selects
      if (e.target.closest('form, button, a, input, select, textarea')) return;
      var eventId = row.getAttribute('data-event-id');
      if (eventId) openDrawer(eventId);
    });
  });

  // Timeline dot click handlers (delegated — dots are SVG circles)
  document.addEventListener('click', function (e) {
    var dot = e.target.closest('[data-event-id]');
    if (!dot || dot.classList.contains('audit-row')) return;
    var eventId = dot.getAttribute('data-event-id');
    if (eventId) {
      e.preventDefault();
      openDrawer(eventId);
    }
  });

  // Close button
  document.getElementById('drawer-close-btn')?.addEventListener('click', closeDrawer);

  // Backdrop click
  drawer?.querySelector('.drawer-backdrop')?.addEventListener('click', closeDrawer);

  // Escape key
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && drawer?.classList.contains('is-open')) {
      closeDrawer();
    }
  });
})();
</script>

<p class="muted" style="margin-top: 16px; font-size: 0.78rem;">
  Exporter: {{ exporter_status.exporter_state }}
  {% if not exporter_status.exporter_configured %}
  — set <code>OTEL_EXPORTER_OTLP_ENDPOINT</code> to enable OpenTelemetry export.
  {% endif %}
</p>
{% endblock %}