{% extends "base.html" %}
{% block title %}API Keys{% endblock %}
{% block content %}

<h1>API Keys</h1>
<p class="subtitle">Create, view, and revoke gateway API keys.</p>

<div class="card card-gap-lg">
    <h2>Create New Key</h2>
    <div class="flex-row gap-md mt-md">
        <input type="text" name="name" placeholder="Key name (e.g., agent-1, ci-cd)" class="input input-inline" required>
        <select name="tier" class="input" style="width:100px;">
            <option value="free">free</option>
            <option value="pro">pro</option>
            <option value="team">team</option>
            <option value="admin">admin</option>
        </select>
        <button type="submit" class="btn btn-primary" onclick="createKey(this)">Create</button>
    </div>
    <div id="new-key-result" class="mt-md"></div>
</div>

<div class="card">
    <h2>Your Keys</h2>
    <div id="keys-table" class="mt-md">
        <p class="text-small">Loading...</p>
    </div>
</div>

<script>
async function createKey(btn) {
    const form = btn.parentElement;
    const name = form.querySelector('input[name="name"]').value;
    const tier = form.querySelector('select[name="tier"]').value;
    const key = sessionStorage.getItem('phi_api_key');
    if (!key) { showResult('Set your API key in sessionStorage.phi_api_key first.', true); return; }

    try {
        const resp = await fetch('/v1/keys', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${key}` },
            body: JSON.stringify({ name, tier })
        });
        const data = await resp.json();
        if (resp.ok) {
            document.getElementById('new-key-result').innerHTML =
                `<div class="success-box">
                    <p style="font-size:12px;color:var(--ok);margin-bottom:6px;">Key created — save it now</p>
                    <pre class="code" style="margin:0;">${data.key}</pre>
                    <p class="text-small mt-sm">This key will not be shown again.</p>
                </div>`;
            loadKeys();
        } else {
            showResult(data.detail || 'Failed to create key', true);
        }
    } catch(e) { showResult(e.message, true); }
}

function showResult(msg, isError) {
    document.getElementById('new-key-result').innerHTML =
        `<p class="text-small" style="color:${isError ? '#ef4444' : 'var(--text-secondary)'};">${msg}</p>`;
}

async function loadKeys() {
    const key = sessionStorage.getItem('phi_api_key');
    if (!key) {
        document.getElementById('keys-table').innerHTML = '<p class="text-small">Set your API key in sessionStorage.phi_api_key to manage keys.</p>';
        return;
    }
    try {
        const resp = await fetch('/v1/keys', { headers: { 'Authorization': `Bearer ${key}` }});
        const keys = await resp.json();
        if (!Array.isArray(keys) || keys.length === 0) {
            document.getElementById('keys-table').innerHTML = '<p class="text-small">No keys yet. Create one above.</p>';
            return;
        }
        document.getElementById('keys-table').innerHTML = `
            <table>
                <thead><tr><th>Prefix</th><th>Name</th><th>Tier</th><th>Created</th><th>Last used</th><th></th></tr></thead>
                <tbody>${keys.map(k => `
                    <tr>
                        <td class="mono">${k.prefix}&hellip;</td>
                        <td>${k.name}</td>
                        <td><span class="badge badge-${k.tier}">${k.tier}</span></td>
                        <td>${new Date(k.created_at).toLocaleDateString()}</td>
                        <td>${k.last_used_at ? new Date(k.last_used_at).toLocaleString() : '—'}</td>
                        <td><button class="btn btn-danger btn-xs" onclick="revokeKey('${k.id}', this)">Revoke</button></td>
                    </tr>
                `).join('')}</tbody>
            </table>`;
    } catch(e) {
        document.getElementById('keys-table').innerHTML = '<p class="text-small">Failed to load keys.</p>';
    }
}

async function revokeKey(id, btn) {
    const key = sessionStorage.getItem('phi_api_key');
    if (!confirm('Revoke this key?')) return;
    try {
        await fetch(`/v1/keys/${id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${key}` }});
        btn.textContent = 'Revoked';
        btn.disabled = true;
        setTimeout(loadKeys, 1000);
    } catch(e) { alert('Failed: ' + e.message); }
}

loadKeys();
</script>
{% endblock %}