{% extends "base.html" %}
{% block title %}Audit Log — Gatekeeper{% endblock %}
{% set page = "audit" %}
{% block content %}
<div class="mb-6">
    <h2 class="text-2xl font-bold text-white">Audit Log</h2>
    <p class="text-gray-400 mt-1">View request history and activity</p>
</div>

<!-- Filters — stacked on mobile, row on desktop -->
<div class="mb-4 flex flex-col sm:flex-row gap-3">
    <select id="filter-module" onchange="loadAudit()" class="bg-gray-800 border border-gray-600 text-gray-200 rounded px-3 py-2 text-sm min-h-[44px]">
        <option value="">All Modules</option>
        <option value="drive">Drive</option>
        <option value="gmail">Gmail</option>
        <option value="calendar">Calendar</option>
    </select>
    <input type="text" id="filter-prefix" placeholder="Key prefix filter" class="bg-gray-800 border border-gray-600 text-gray-200 rounded px-3 py-2 text-sm min-h-[44px] text-base">
    <button onclick="loadAudit()" class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded text-sm min-h-[44px] flex-shrink-0">Filter</button>
</div>

<div id="audit-table" class="text-gray-500">Loading audit log...</div>

<div id="pagination" class="mt-4 flex gap-2"></div>

<script>
let currentOffset = 0;
const pageSize = 20;

async function loadAudit() {
    const module = document.getElementById('filter-module').value;
    const prefix = document.getElementById('filter-prefix').value;
    let url = `/admin/api/audit?limit=${pageSize}&offset=${currentOffset}`;
    if (module) url += `&module=${module}`;
    if (prefix) url += `&key_prefix=${prefix}`;

    const entries = await fetchJSON(url);
    if (entries.length === 0) {
        document.getElementById('audit-table').innerHTML = '<p class="text-gray-500">No entries found</p>';
        return;
    }
    let html = '<div class="overflow-x-auto -mx-4 sm:mx-0"><table class="mobile-table w-full text-sm min-w-[700px]"><thead><tr class="text-gray-400 border-b border-gray-700"><th class="text-left p-2">Time</th><th class="text-left p-2">Key</th><th class="text-left p-2">Module</th><th class="text-left p-2">Route</th><th class="text-left p-2 hidden sm:table-cell">Method</th><th class="text-left p-2 hidden md:table-cell">Path</th><th class="text-left p-2">Status</th></tr></thead><tbody>';
    entries.forEach(e => {
        const sc = e.status_code;
        const statusClass = sc < 300 ? 'text-green-400' : sc < 500 ? 'text-yellow-400' : 'text-red-400';
        html += `<tr class="border-b border-gray-800">
            <td data-label="Time" class="p-2 text-gray-300 text-xs">${e.created_at || ''}</td>
            <td data-label="Key" class="p-2 font-mono text-xs">${e.api_key_prefix}</td>
            <td data-label="Module" class="p-2">${e.module}</td>
            <td data-label="Route" class="p-2 font-mono text-blue-300 text-xs">${e.route}</td>
            <td data-label="Method" class="p-2 text-xs hidden sm:table-cell">${e.method}</td>
            <td data-label="Path" class="p-2 text-gray-400 text-xs hidden md:table-cell">${e.path}</td>
            <td data-label="Status" class="p-2 ${statusClass} font-bold">${sc}</td>
        </tr>`;
    });
    html += '</tbody></table></div>';
    document.getElementById('audit-table').innerHTML = html;
}

// pageInit called by auth gate in base.html after login confirmed
function pageInit() { loadAudit(); }
</script>
{% endblock %}