{% extends "base.html" %}
{% block title %}Dashboard — Gatekeeper{% endblock %}
{% set page = "dashboard" %}
{% block content %}
<div class="mb-6">
    <h2 class="text-2xl font-bold text-white">Dashboard</h2>
    <p class="text-gray-400 mt-1">Overview of your Gatekeeper instance</p>
</div>

<!-- Stats cards — 2 cols on mobile, 4 on desktop -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6 mb-8">
    <div class="bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
        <p class="text-xs sm:text-sm text-gray-400">Total Requests</p>
        <p class="text-2xl sm:text-3xl font-bold text-white mt-1 sm:mt-2" id="total-requests">Loading...</p>
    </div>
    <div class="bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
        <p class="text-xs sm:text-sm text-gray-400">Active Keys</p>
        <p class="text-2xl sm:text-3xl font-bold text-white mt-1 sm:mt-2" id="active-keys">Loading...</p>
    </div>
    <div class="bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
        <p class="text-xs sm:text-sm text-gray-400">Enabled Routes</p>
        <p class="text-2xl sm:text-3xl font-bold text-white mt-1 sm:mt-2" id="enabled-routes">Loading...</p>
    </div>
    <div class="bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
        <p class="text-xs sm:text-sm text-gray-400">Google Auth</p>
        <p class="text-lg sm:text-lg font-bold mt-1 sm:mt-2" id="auth-status">Loading...</p>
    </div>
</div>

<!-- Module cards -->
<div id="modules-grid">
    <div class="text-gray-500">Loading modules...</div>
</div>

<!-- Recent audit log -->
<div class="mt-8">
    <h3 class="text-lg font-semibold text-white mb-4">Recent Requests</h3>
    <div id="recent-audit">
        <div class="text-gray-500">Loading...</div>
    </div>
</div>

<script>
async function loadDashboard() {
    // Load dashboard stats
    const data = await fetchJSON('/admin/api/dashboard');
    document.getElementById('total-requests').textContent = data.total_requests;
    document.getElementById('active-keys').textContent = data.active_keys;
    document.getElementById('enabled-routes').textContent = data.enabled_routes;
    document.getElementById('auth-status').textContent = data.auth_connected ? '✅ Connected' : '❌ Disconnected';
    document.getElementById('auth-status').className = 'text-lg font-bold mt-1 sm:mt-2 ' + (data.auth_connected ? 'text-green-400' : 'text-red-400');

    // Load modules — single column on mobile, 3 on desktop
    const modules = await fetchJSON('/admin/api/modules');
    let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">';
    modules.forEach(m => {
        html += `
        <div class="bg-gray-800 rounded-lg p-4 sm:p-6 border ${m.enabled ? 'border-green-700' : 'border-gray-700'}">
            <div class="flex items-center justify-between mb-2">
                <span class="text-2xl">${m.icon}</span>
                <span class="px-2 py-1 text-xs rounded ${m.enabled ? 'bg-green-800 text-green-300' : 'bg-gray-700 text-gray-400'}">${m.enabled ? 'Enabled' : 'Disabled'}</span>
            </div>
            <h3 class="text-lg font-semibold text-white">${m.display_name}</h3>
            <p class="text-sm text-gray-400 mt-1">${m.description}</p>
            <p class="text-xs text-gray-500 mt-3">${m.route_count} routes active</p>
        </div>`;
    });
    html += '</div>';
    document.getElementById('modules-grid').innerHTML = html;

    // Load recent audit log — mobile-friendly table
    const entries = await fetchJSON('/admin/api/audit?limit=10');
    if (entries.length === 0) {
        document.getElementById('recent-audit').innerHTML = '<p class="text-gray-500">No requests yet</p>';
        return;
    }
    let auditHtml = '<div class="overflow-x-auto -mx-4 sm:mx-0"><table class="mobile-table w-full text-sm min-w-[500px]"><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">Status</th></tr></thead><tbody>';
    entries.forEach(e => {
        const statusClass = e.status_code < 300 ? 'text-green-400' : e.status_code < 500 ? 'text-yellow-400' : 'text-red-400';
        auditHtml += `<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="Status" class="p-2 ${statusClass} font-bold">${e.status_code}</td></tr>`;
    });
    auditHtml += '</tbody></table></div>';
    document.getElementById('recent-audit').innerHTML = auditHtml;
}

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