{% extends "base.html" %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-white">API Keys</h1>
        <p class="dark:text-gray-400 text-gray-500 mt-2">Manage access keys for all agents.</p>
    </div>
    <a href="/dashboard" class="dark:text-gray-400 text-gray-500 hover:text-white">&larr; Back to Dashboard</a>
</div>

<div class="dark:bg-gray-800 bg-gray-100 rounded-lg shadow border dark:border-gray-700 border-gray-200 p-6">
    <div id="alert-box" class="hidden mb-4 p-4 rounded-md text-sm"></div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-700">
            <thead>
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Agent</th>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">API Key</th>
                    <th class="px-4 py-3 text-left text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Last Used</th>
                    <th class="px-4 py-3 text-right text-xs font-medium dark:text-gray-400 text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for key in keys %}
                <tr class="hover:bg-gray-750 transition" id="row-{{ key.agent_name }}">
                    <td class="px-4 py-4 whitespace-nowrap text-sm font-bold text-nyora">{{ key.agent_name }}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300 font-mono" id="key-{{ key.agent_name }}">{{ key.api_key }}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{{ key.last_used or 'Never' }}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button onclick="rotateKey('{{ key.agent_name }}')" class="text-yellow-500 hover:text-yellow-400">Rotate</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
    const alertBox = document.getElementById('alert-box');

    function showAlert(message, isError=false) {
        alertBox.textContent = message;
        alertBox.className = `mb-4 p-4 rounded-md text-sm font-medium ${isError ? 'bg-red-900 text-red-200 border border-red-700' : 'bg-green-900 text-green-200 border border-green-700'}`;
        alertBox.classList.remove('hidden');
        setTimeout(() => { alertBox.classList.add('hidden'); }, 4000);
    }

    async function rotateKey(agent) {
        if (!confirm(`Are you sure you want to rotate the key for ${agent}? This will immediately revoke the old key.`)) {
            return;
        }

        try {
            const response = await fetch(`/api/keys/rotate/${agent}`, {
                method: 'POST'
            });
            const data = await response.json();
            if (response.ok) {
                document.getElementById(`key-${agent}`).textContent = data.new_key;
                showAlert(`Key for ${agent} rotated successfully.`);
            } else {
                showAlert(`Error rotating key: ${data.detail}`, true);
            }
        } catch(e) {
            showAlert("Network error.", true);
        }
    }
</script>
{% endblock %}