{% extends "base.html" %}

{% block content %}
<div style="padding: 30px;">
    <h1>🔑 Registration Key Management</h1>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Generate New Key</h2>
        
        <div style="display: flex; gap: 20px; align-items: center; margin-bottom: 20px;">
            <div style="flex: 1;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Key Validity (days):</label>
                <input type="number" id="days" value="365" min="1"
                       style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">
            </div>
            <button onclick="generateKey()" class="btn btn-success" style="padding: 12px 30px; font-size: 16px;">➕ Generate Key</button>
        </div>
        
        <div id="generated-key" style="display: none; margin-top: 20px; padding: 15px; background: #d4edda; border-radius: 5px; border-left: 4px solid #28a745;">
            <h4 style="margin: 0 0 10px 0; color: #155724;">✅ Registration Key Generated:</h4>
            <p id="key-value" style="font-family: monospace; font-size: 18px; word-break: break-all; margin: 0;"></p>
        </div>
    </div>
    
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <h2 style="margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #eee;">Generated Keys</h2>
        
        <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
            <button onclick="loadKeys()" class="btn btn-accent" style="padding: 8px 20px;">🔄 Refresh</button>
        </div>
        
        {% if keys %}
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                    <thead>
                        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Key</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Created</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Expiry</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">Used</th>
                            <th style="padding: 12px; text-align: left; border-right: 1px solid #dee2e6;">PC</th>
                            <th style="padding: 12px; text-align: left;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for key in keys %}
                        <tr style="border-bottom: 1px solid #dee2e6;">
                            <td style="padding: 12px; border-right: 1px solid #dee2e6; word-break: break-all;">{{ key.key }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ key.created_date.split(' ')[0] if key.created_date else 'N/A' }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ key.expiry_date.split(' ')[0] if key.expiry_date else 'N/A' }}</td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">
                                <span style="padding: 4px 8px; border-radius: 4px; font-size: 12px; {% if key.is_used %}background: #f8d7da; color: #721c24;{% else %}background: #d4edda; color: #155724;{% endif %}">
                                    {{ 'Yes' if key.is_used else 'No' }}
                                </span>
                            </td>
                            <td style="padding: 12px; border-right: 1px solid #dee2e6;">{{ key.pc_identifier or 'N/A' }}</td>
                            <td style="padding: 12px;">
                                <button onclick="deleteKey('{{ key.key }}')" class="btn btn-sm btn-danger" style="padding: 5px 10px; font-size: 12px;">🗑️ Delete</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p style="text-align: center; padding: 40px; color: #666;">No registration keys found.</p>
        {% endif %}
    </div>
</div>

<script>
function generateKey() {
    const days = document.getElementById('days').value;
    
    fetch('/admin/keys/generate', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `days=${days}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            document.getElementById('key-value').textContent = data.key;
            document.getElementById('generated-key').style.display = 'block';
            loadKeys();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to generate key');
    });
}

function deleteKey(key) {
    if (!confirm(`Are you sure you want to delete this key?\n\n${key}\n\nThis action cannot be undone!`)) {
        return;
    }
    
    fetch('/admin/keys/delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `key=${encodeURIComponent(key)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert(data.error);
        } else {
            alert('Key deleted successfully');
            loadKeys();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Failed to delete key');
    });
}

function loadKeys() {
    window.location.reload();
}
</script>

<style>
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}
</style>
{% endblock %}