{% extends "base.html" %}
{% block title %}API Keys — Gatekeeper{% endblock %}
{% set page = "keys" %}
{% block content %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
    <div>
        <h2 class="text-2xl font-bold text-white">API Keys</h2>
        <p class="text-gray-400 mt-1">Manage API keys for agent access</p>
    </div>
    <button onclick="showCreateForm()" class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg text-sm min-h-[44px] flex-shrink-0">
        + Create Key
    </button>
</div>

<div id="create-form" class="hidden mb-6 bg-gray-800 rounded-lg p-4 sm:p-6 border border-gray-700">
    <h3 class="text-lg font-semibold text-white mb-4">Create New API Key</h3>
    <!-- Stacked on mobile, row on desktop -->
    <div class="flex flex-col sm:flex-row gap-3">
        <input type="text" id="key-name" placeholder="Key name" class="bg-gray-700 border border-gray-600 text-gray-200 rounded px-3 py-3 text-sm flex-1 min-h-[48px] text-base">
        <select id="key-permissions" class="bg-gray-700 border border-gray-600 text-gray-200 rounded px-3 py-3 text-sm min-h-[48px]">
            <option value="*">All Modules (*)</option>
            <option value="drive">Drive only</option>
            <option value="gmail">Gmail only</option>
            <option value="calendar">Calendar only</option>
            <option value="drive,gmail">Drive + Gmail</option>
            <option value="drive,calendar">Drive + Calendar</option>
            <option value="gmail,calendar">Gmail + Calendar</option>
        </select>
        <div class="flex gap-2">
            <button onclick="createKey()" class="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded text-sm min-h-[44px] flex-1 sm:flex-none">Create</button>
            <button onclick="hideCreateForm()" class="bg-gray-600 hover:bg-gray-500 text-white px-4 py-2 rounded text-sm min-h-[44px]">Cancel</button>
        </div>
    </div>
    <div id="new-key-display" class="hidden mt-4 bg-yellow-900 border border-yellow-600 rounded p-4">
        <p class="text-yellow-200 font-bold">⚠️ Save this key now — it won't be shown again!</p>
        <div class="flex items-center gap-2 mt-2">
            <code id="new-key-value" class="text-white bg-gray-900 px-3 py-1 rounded text-sm flex-1 break-all"></code>
            <button onclick="copyKey()" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm min-h-[44px] flex-shrink-0">Copy</button>
        </div>
    </div>
</div>

<div id="keys-table" class="text-gray-500">Loading keys...</div>
<script>
function showCreateForm() { document.getElementById('create-form').classList.remove('hidden'); }
function hideCreateForm() { document.getElementById('create-form').classList.add('hidden'); document.getElementById('new-key-display').classList.add('hidden'); }

function copyKey() {
    const key = document.getElementById('new-key-value').textContent;
    navigator.clipboard.writeText(key);
}

async function createKey() {
    const name = document.getElementById('key-name').value;
    const perms = document.getElementById('key-permissions').value;
    const data = await fetchJSON('/admin/api/keys', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, permissions: perms})
    });
    document.getElementById('new-key-display').classList.remove('hidden');
    document.getElementById('new-key-value').textContent = data.raw_key;
    loadKeys();
}

async function revokeKey(keyId) {
    if (!confirm('Are you sure you want to revoke this key?')) return;
    await fetchJSON(`/admin/api/keys/${keyId}`, {method: 'DELETE'});
    loadKeys();
}

async function loadKeys() {
    const keys = await fetchJSON('/admin/api/keys');
    if (keys.length === 0) {
        document.getElementById('keys-table').innerHTML = '<p class="text-gray-500">No keys 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-[600px]"><thead><tr class="text-gray-400 border-b border-gray-700"><th class="text-left p-2">Name</th><th class="text-left p-2">Prefix</th><th class="text-left p-2">Active</th><th class="text-left p-2">Permissions</th><th class="text-left p-2 hidden sm:table-cell">Last Used</th><th class="text-left p-2">Actions</th></tr></thead><tbody>';
    keys.forEach(k => {
        html += `<tr class="border-b border-gray-800">
            <td data-label="Name" class="p-2 font-medium">${k.name}</td>
            <td data-label="Prefix" class="p-2 font-mono text-xs">${k.key_prefix}</td>
            <td data-label="Active" class="p-2">${k.is_active ? '<span class="text-green-400">✅</span>' : '<span class="text-red-400">❌</span>'}</td>
            <td data-label="Permissions" class="p-2 text-xs"><code>${k.permissions}</code></td>
            <td data-label="Last Used" class="p-2 text-gray-400 text-xs hidden sm:table-cell">${k.last_used_at || 'Never'}</td>
            <td data-label="" class="p-2 actions-cell">${k.is_active ? '<button onclick="revokeKey(' + k.id + ')" class="bg-red-700 hover:bg-red-600 text-white px-2 py-1 rounded text-xs min-h-[36px]">Revoke</button>' : ''}</td>
        </tr>`;
    });
    html += '</tbody></table></div>';
    document.getElementById('keys-table').innerHTML = html;
}

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