{% extends "base.html" %}
{% block title %}Audit Log — GovLift{% endblock %}
{% block extra_css %}
<style>
.gl-page-header{background:linear-gradient(135deg,#0f172a,#1a3a2a);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.gl-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#d1fae5;}
.gl-page-header p{margin:4px 0 0;color:#6ee7b7;font-size:.85rem;}
.classification-banner{background:#1e3a1a;border:1px solid #166534;color:#86efac;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:6px 12px;border-radius:6px;margin-bottom:18px;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.stat-card .val{font-size:1.8rem;font-weight:700;color:#d1fae5;}
.stat-card .lbl{font-size:.75rem;color:#64748b;margin-top:2px;}
.filter-bar{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px 18px;margin-bottom:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.filter-bar label{font-size:.75rem;color:#94a3b8;display:block;margin-bottom:4px;}
.filter-bar select,.filter-bar input{background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:6px;padding:5px 10px;font-size:.8rem;}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:#10b981;}
.filter-btn{background:#10b981;border:none;color:#fff;border-radius:6px;padding:6px 16px;font-size:.8rem;font-weight:600;cursor:pointer;}
.filter-btn:hover{background:#059669;}
.back-link{color:#6ee7b7;text-decoration:none;font-size:.85rem;}
.back-link:hover{color:#34d399;}
.gl-table{width:100%;border-collapse:collapse;}
.gl-table thead th{background:#0f172a;color:#94a3b8;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid #334155;}
.gl-table tbody tr{border-bottom:1px solid #1e293b;}
.gl-table tbody tr:hover{background:#1a2540;}
.gl-table tbody td{padding:10px 12px;font-size:.83rem;color:#e2e8f0;vertical-align:middle;}
.gl-table-wrap{background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;}
.action-chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:.7rem;font-weight:600;background:#1e293b;border:1px solid #334155;color:#94a3b8;}
.action-create{border-color:#10b981;color:#10b981;}
.action-update{border-color:#60a5fa;color:#60a5fa;}
.action-delete{border-color:#f87171;color:#f87171;}
.action-read{border-color:#64748b;color:#64748b;}
.action-migrate{border-color:#fbbf24;color:#fbbf24;}
.action-scan{border-color:#818cf8;color:#818cf8;}
.details-cell{font-size:.75rem;color:#64748b;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:20px;}
.by-action-chip{background:#1e293b;border:1px solid #334155;border-radius:8px;padding:10px 14px;}
.by-action-chip .count{font-size:1.2rem;font-weight:700;color:#d1fae5;}
.by-action-chip .action-name{font-size:.72rem;color:#64748b;margin-top:2px;}
.immutable-badge{background:#1e293b;border:1px solid #166534;color:#86efac;font-size:.7rem;padding:3px 8px;border-radius:4px;font-weight:600;}
</style>
{% endblock %}
{% block content %}
<div class="classification-banner">{{ classification }}</div>
<a class="back-link" href="/govlift">← GovLift</a>

<div class="gl-page-header mt-2">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <h1>Audit Log Viewer</h1>
      <p>Append-Only NIST AU Compliant Audit Trail — {{ classification }}</p>
    </div>
    <span class="immutable-badge">APPEND-ONLY · IMMUTABLE</span>
  </div>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-4">
    <div class="stat-card">
      <div class="val">{{ data.summary.get('total_events', 0) }}</div>
      <div class="lbl">Total Events</div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="stat-card">
      <div class="val" style="color:#60a5fa;">{{ data.summary.get('unique_users', 0) }}</div>
      <div class="lbl">Unique Users</div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="stat-card">
      <div class="val" style="color:#818cf8;">{{ data.summary.get('by_action', {})|length }}</div>
      <div class="lbl">Action Types</div>
    </div>
  </div>
</div>

<!-- Action Breakdown -->
{% if data.summary.get('by_action') %}
<div class="mb-4">
  <div style="font-size:.8rem;color:#94a3b8;margin-bottom:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;">Events by Action</div>
  <div class="by-action-grid">
    {% for action, count in data.summary.by_action.items() %}
    <div class="by-action-chip">
      <div class="count">{{ count }}</div>
      <div class="action-name">{{ action }}</div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- Filter Bar -->
<div class="filter-bar">
  <div>
    <label for="f-audit-action">Action</label>
    <select id="f-audit-action">
      <option value="">All Actions</option>
      <option value="create">Create</option>
      <option value="update">Update</option>
      <option value="delete">Delete</option>
      <option value="read">Read</option>
      <option value="migrate">Migrate</option>
      <option value="scan">Scan</option>
    </select>
  </div>
  <div>
    <label for="f-resource-type">Resource Type</label>
    <select id="f-resource-type">
      <option value="">All Resources</option>
      <option value="workload">Workload</option>
      <option value="wave">Wave</option>
      <option value="migration">Migration</option>
      <option value="stig_check">STIG Check</option>
    </select>
  </div>
  <div>
    <label for="f-user-id">User ID</label>
    <input type="text" id="f-user-id" placeholder="e.g. user@mil.gov" style="width:160px;">
  </div>
  <div>
    <button class="filter-btn" onclick="applyAuditFilters()">Apply</button>
  </div>
</div>

<!-- Audit Table -->
<div class="gl-table-wrap">
  <table class="gl-table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Timestamp</th>
        <th>User</th>
        <th>Action</th>
        <th>Resource Type</th>
        <th>Resource ID</th>
        <th>Classification</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody id="audit-tbody">
      {% if data.log %}
        {% for entry in data.log %}
        <tr>
          <td style="font-size:.72rem;color:#334155;">{{ entry.get('id', '') }}</td>
          <td style="font-size:.75rem;color:#94a3b8;white-space:nowrap;">{{ entry.get('timestamp', '—') }}</td>
          <td style="font-size:.78rem;font-family:monospace;">{{ entry.get('user_id', '—') }}</td>
          <td>
            {% set act = entry.get('action', 'read') %}
            <span class="action-chip action-{{ act }}">{{ act }}</span>
          </td>
          <td style="font-size:.8rem;">{{ entry.get('resource_type', '—') }}</td>
          <td style="font-size:.75rem;color:#64748b;font-family:monospace;">{{ entry.get('resource_id', '—') }}</td>
          <td>
            {% set cls = entry.get('classification', '') %}
            {% if cls %}
              <span style="font-size:.7rem;color:#86efac;background:#1e3a1a;border:1px solid #166534;padding:2px 6px;border-radius:4px;">{{ cls }}</span>
            {% else %}
              <span style="color:#334155;font-size:.75rem;">—</span>
            {% endif %}
          </td>
          <td class="details-cell" title="{{ entry.get('details', '') }}">{{ entry.get('details', '—') }}</td>
        </tr>
        {% endfor %}
      {% else %}
        <tr><td colspan="8" style="text-align:center;padding:32px;color:#64748b;">No audit events found.</td></tr>
      {% endif %}
    </tbody>
  </table>
</div>

{% include "includes/iqe_query_widget.html" %}

<script>
function applyAuditFilters() {
  const action = document.getElementById('f-audit-action').value;
  const resourceType = document.getElementById('f-resource-type').value;
  const userId = document.getElementById('f-user-id').value.trim();
  const params = new URLSearchParams();
  if (action) params.set('action', action);
  if (resourceType) params.set('resource_type', resourceType);
  if (userId) params.set('user_id', userId);
  fetch('/api/govlift/audit?' + params.toString())
    .then(r => r.json())
    .then(data => {
      const log = data.log || data || [];
      const tbody = document.getElementById('audit-tbody');
      tbody.innerHTML = log.length ? log.map(entry => {
        const act = entry.action || 'read';
        const cls = entry.classification || '';
        const clsHtml = cls ? `<span style="font-size:.7rem;color:#86efac;background:#1e3a1a;border:1px solid #166534;padding:2px 6px;border-radius:4px;">${cls}</span>` : '<span style="color:#334155;font-size:.75rem;">—</span>';
        const details = (entry.details || '').replace(/"/g, '&quot;');
        return `<tr>
          <td style="font-size:.72rem;color:#334155;">${entry.id||''}</td>
          <td style="font-size:.75rem;color:#94a3b8;white-space:nowrap;">${entry.timestamp||'—'}</td>
          <td style="font-size:.78rem;font-family:monospace;">${entry.user_id||'—'}</td>
          <td><span class="action-chip action-${act}">${act}</span></td>
          <td style="font-size:.8rem;">${entry.resource_type||'—'}</td>
          <td style="font-size:.75rem;color:#64748b;font-family:monospace;">${entry.resource_id||'—'}</td>
          <td>${clsHtml}</td>
          <td class="details-cell" title="${details}">${entry.details||'—'}</td>
        </tr>`;
      }).join('') : '<tr><td colspan="8" style="text-align:center;padding:32px;color:#64748b;">No audit events match the selected filters.</td></tr>';
    })
    .catch(e => console.error('Filter error:', e));
}
</script>
{% endblock %}