{% extends "base.html" %}

{% block title %}API Keys - {{ project_name }}{% endblock %}

{% block content %}
{% include "components/hero_banner.html" with title="API Keys" subtitle="Manage your API authentication keys" color="primary" %}

<section class="section">
    <div class="container">
        <div class="columns">
            <!-- API Key Management -->
            <div class="column is-8">
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <h2 class="title is-4">Your API Keys</h2>
                        </div>
                    </div>
                    <div class="level-right">
                        <div class="level-item">
                            <button class="button is-primary" onclick="showGenerateForm()">
                                <span class="icon">
                                    <i class="fas fa-plus"></i>
                                </span>
                                <span>Generate New Key</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Generate API Key Form (hidden by default) -->
                <div x-data="{ showForm: false, showGenerated: false }" @refresh-api-keys.window="showGenerated = false; $nextTick(() => { htmx.ajax('GET', '{% url 'users:api_keys_list_partial' %}', { target: '#api-keys-container', swap: 'outerHTML' }); })">
                    <div class="level">
                        <div class="level-left">
                            <div class="level-item">
                                <button class="button is-primary" @click="showForm = true">
                                    <span class="icon">
                                        <i class="fas fa-plus"></i>
                                    </span>
                                    <span>Generate New Key</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- Generate API Key Form (hidden by default) -->
                    <div x-show="showForm" x-transition class="box">
                        <h3 class="title is-5">Generate New API Key</h3>
                        <form hx-post="{% url 'users:generate_api_key' %}" hx-target="#api-key-generated-partial" hx-swap="outerHTML" x-ref="generateForm">
                            {% csrf_token %}
                            <div class="field">
                                <label class="label">Key Name (Optional)</label>
                                <div class="control">
                                    <input class="input" type="text" name="name" placeholder="e.g., Production Server, Development, Mobile App">
                                </div>
                                <p class="help">Give your API key a descriptive name to help you identify it later.</p>
                            </div>
                            <div class="field is-grouped">
                                <div class="control">
                                    <button type="submit" class="button is-primary">Generate API Key</button>
                                </div>
                                <div class="control">
                                    <button type="button" class="button is-light" @click="showForm = false; $refs.generateForm.reset()">Cancel</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="api-key-generated-partial"></div>
                </div>

                <div id="api-keys-container">
                    {% include "users/api_keys_list_partial.html" with api_keys=api_keys %}
                </div>
            </div>

            <!-- Information Sidebar -->
            <div class="column is-4">
                <div class="box">
                    <h3 class="title is-5">
                        <span class="icon">
                            <i class="fas fa-info-circle"></i>
                        </span>
                        <span>API Key Information</span>
                    </h3>
                    <div class="content">
                        <p><strong>Security Notice:</strong> API keys are only shown once upon generation. Store them securely and never share them publicly.</p>
                        
                        <p><strong>Usage:</strong> Include your API key in the Authorization header:</p>
                        <pre class="has-background-light p-3"><code>Authorization: Bearer YOUR_API_KEY</code></pre>
                        
                        <p><strong>Actions:</strong></p>
                        <ul>
                            <li><strong>Regenerate:</strong> Creates a new key and deactivates the old one</li>
                            <li><strong>Revoke:</strong> Permanently deactivates the key</li>
                        </ul>
                        
                        <p>
                            <a href="{% url 'api:api_docs' %}" class="button is-link is-small">
                                <span class="icon">
                                    <i class="fas fa-book"></i>
                                </span>
                                <span>View API Documentation</span>
                            </a>
                        </p>
                    </div>
                </div>

                <div class="box">
                    <h3 class="title is-5">
                        <span class="icon">
                            <i class="fas fa-shield-alt"></i>
                        </span>
                        <span>Best Practices</span>
                    </h3>
                    <div class="content">
                        <ul>
                            <li>Use different API keys for different environments</li>
                            <li>Rotate your keys regularly</li>
                            <li>Revoke unused or compromised keys immediately</li>
                            <li>Monitor your API key usage regularly</li>
                            <li>Never commit API keys to version control</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Hidden forms for actions -->
<form id="revoke-form" style="display: none;" hx-post="{% url 'users:revoke_api_key' %}" hx-target="#api-keys-container" hx-swap="outerHTML">
    {% csrf_token %}
    <input type="hidden" name="api_key_id" id="revoke-key-id">
</form>

<form id="regenerate-form" style="display: none;" hx-post="{% url 'users:regenerate_api_key' %}" hx-target="#api-keys-container" hx-swap="outerHTML">
    {% csrf_token %}
    <input type="hidden" name="api_key_id" id="regenerate-key-id">
</form>

{% endblock %}

{% block extra_js %}
<script>
    function showGenerateForm() {
        document.getElementById('generate-form').style.display = 'block';
    }
    
    function hideGenerateForm() {
        document.getElementById('generate-form').style.display = 'none';
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        // Handle revoke button clicks
        document.querySelectorAll('.revoke-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const keyId = this.dataset.keyId;
                const keyName = this.dataset.keyName;
                
                if (confirm(`Are you sure you want to revoke the API key "${keyName}"? This action cannot be undone.`)) {
                    document.getElementById('revoke-key-id').value = keyId;
                    const form = document.getElementById('revoke-form');
                    if (!form.querySelector('button')) {
                        form.insertAdjacentHTML('beforeend', '<button type="submit" style="display: none;"></button>');
                    }
                    form.querySelector('button').click();
                }
            });
        });
        
        // Handle regenerate button clicks
        document.querySelectorAll('.regenerate-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const keyId = this.dataset.keyId;
                const keyName = this.dataset.keyName;
                
                if (confirm(`Are you sure you want to regenerate the API key "${keyName}"? The old key will be deactivated and you'll need to update your applications with the new key.`)) {
                    document.getElementById('regenerate-key-id').value = keyId;
                    const form = document.getElementById('regenerate-form');
                    if (!form.querySelector('button')) {
                        form.insertAdjacentHTML('beforeend', '<button type="submit" style="display: none;"></button>');
                    }
                    form.querySelector('button').click();
                }
            });
        });
    });
</script>
{% endblock %}