{% extends "sqladmin/details.html" %}

{% block content %}
{{ super() }}

<div class="card mt-3">
    <div class="card-header">
        <h5>API Key Actions</h5>
    </div>
    <div class="card-body">
        <button type="button" class="btn btn-warning me-2" onclick="regenerateApiKey({{ model.id }})">
            <i class="fa fa-refresh"></i> Regenerate API Key
        </button>
        <button type="button" class="btn btn-info" onclick="viewApiKey({{ model.id }})">
            <i class="fa fa-eye"></i> View API Key (if just created)
        </button>
        
        <div id="apiKeyResult" class="mt-3" style="display: none;">
            <div class="alert alert-warning">
                <h6>⚠️ Important: Save this key immediately!</h6>
                <p>This key will only be shown once and cannot be retrieved later.</p>
                <div class="input-group">
                    <input type="text" id="apiKeyValue" class="form-control" readonly>
                    <button class="btn btn-primary" onclick="copyApiKey()">
                        <i class="fa fa-copy"></i> Copy
                    </button>
                </div>
                <small id="apiKeyMessage" class="text-muted mt-2 d-block"></small>
            </div>
        </div>
    </div>
</div>

<script>
async function regenerateApiKey(keyId) {
    if (!confirm('Are you sure you want to regenerate this API key? The old key will stop working immediately!')) {
        return;
    }
    
    try {
        const response = await fetch(`/apiservice/admin/api-keys/${keyId}/regenerate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('apiKeyValue').value = data.api_key;
            document.getElementById('apiKeyMessage').textContent = data.message;
            document.getElementById('apiKeyResult').style.display = 'block';
            
            alert('✅ API Key regenerated successfully!\n\nNew Key: ' + data.api_key + '\n\nPlease copy and save it now!');
        } else {
            alert('❌ Error: ' + (data.message || 'Failed to regenerate API key'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

async function viewApiKey(keyId) {
    try {
        const response = await fetch(`/apiservice/admin/api-keys/${keyId}/view`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('apiKeyValue').value = data.api_key;
            document.getElementById('apiKeyMessage').textContent = data.message;
            document.getElementById('apiKeyResult').style.display = 'block';
            
            alert('✅ API Key retrieved!\n\nKey: ' + data.api_key + '\n\nPlease copy and save it now!');
        } else {
            alert('ℹ️ ' + data.message);
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

function copyApiKey() {
    const input = document.getElementById('apiKeyValue');
    input.select();
    document.execCommand('copy');
    alert('✅ API Key copied to clipboard!');
}
</script>
{% endblock %}