{% extends 'base.html' %}

{% block title %}API Keys — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; }
    .container { max-width: 960px; margin: 0 auto; padding: 20px; }
    nav { background: #1a1a2e; color: white; }
    .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .card h2 { font-size: 18px; margin-bottom: 16px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
    th { background: #f8f8f8; font-weight: 600; }
    .btn { display: inline-block; padding: 8px 16px; background: #3b82f6; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; }
    .btn:hover { background: #2563eb; }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn-danger { background: #dc3545; }
    .btn-danger:hover { background: #bb2d3b; }
    .btn-outline { background: #3b82f6; border: 1px solid #3b82f6; color: white; }
    .btn-outline:hover { background: #2563eb; }
    .badge { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 12px; font-size: 12px; }
    .token { font-family: monospace; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
    .success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .info { background: #dbeafe; color: #1e40af; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .empty { text-align: center; padding: 40px; color: #888; }
    .back-link { display: inline-block; margin-bottom: 16px; color: #3b82f6; text-decoration: none; font-size: 14px; }
    .back-link:hover { text-decoration: underline; }
    .perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 12px 0; }
    .perm-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
    .perm-item input[type="checkbox"] { width: 18px; height: 18px; }
    .perm-item label { cursor: pointer; }
    .new-key-display { background: #f0f9ff; border: 1px solid #93c5fd; padding: 16px; border-radius: 6px; margin-bottom: 16px; }
    .new-key-display code { font-size: 15px; word-break: break-all; display: block; margin: 8px 0; background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #cbd5e1; }
    .new-key-display .copy-btn { display: inline-block; margin-top: 8px; padding: 6px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
    .new-key-display .copy-btn:hover { background: #2563eb; }
    .new-key-display .warning { color: #d97706; font-size: 12px; margin-top: 8px; }
    form input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
    td.text-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* MOBILE */
    @media (max-width: 640px) {
        .container { padding: 12px; }
        .perm-grid { grid-template-columns: 1fr; }
        /* Tables: card layout on mobile */
        table { display: block; }
        thead, tbody, tr, th, td { display: block; }
        thead tr { display: none; }
        tr { padding: 12px 0; border-bottom: 2px solid #e9ecef; }
        td { text-align: right; padding: 6px 12px; border: none; position: relative; padding-left: 50%; }
        td:before { content: attr(data-label); position: absolute; left: 12px; font-weight: 600; color: #666; text-align: left; }
        td.text-trunc { max-width: none; overflow: visible; text-overflow: unset; white-space: normal; overflow-wrap: break-word; word-break: break-word; }
        .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
        .btn-sm { min-height: 38px; }
    }
</style>
{% endblock %}

{% block content %}
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        <a href="{{ url_for('auth.dashboard') }}" class="back-link">&larr; Back to Dashboard</a>

        <div class="card">
            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;">
                <h2>API Keys</h2>
                <button type="button" class="btn btn-sm" data-onclick="document.getElementById('createKeyForm').style.display='block'">+ New Key</button>
            </div>

            <!-- New key just created -->
            {% if session.get('_new_api_key') %}
            <div class="new-key-display">
                <div style="font-weight:600; font-size:14px; color:#1e40af;">Your new API key (save now — you won't see it again):</div>
                <code id="newApiKey">{{ session._new_api_key }}</code>
                <button class="copy-btn" data-onclick="navigator.clipboard.writeText('{{ session._new_api_key }}'); this.textContent='Copied!'; setTimeout(() => this.textContent='Copy to clipboard', 2000);">Copy to clipboard</button>
                <div class="warning">⚠ This key will not be shown again. Store it securely.</div>
            </div>
            {% endif %}

            {% if keys %}
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Prefix</th>
                        <th>Permissions</th>
                        <th>Last Used</th>
                        <th>Created</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for key in keys %}
                    <tr>
                        <td data-label="Name">{{ key.name }}</td>
                        <td data-label="Prefix"><code class="token">{{ key.key_prefix }}...</code></td>
                        <td data-label="Permissions">
                            {% set perms = key.permissions %}
                            {% if perms.read_forms %}<span class="badge">read</span> {% endif %}
                            {% if perms.write_forms %}<span class="badge">write</span> {% endif %}
                            {% if perms.read_submissions %}<span class="badge">subs</span> {% endif %}
                            {% if perms.delete_forms %}<span class="badge" style="background:#fee2e2;color:#991b1b;">delete</span> {% endif %}
                            {% if not perms.read_forms and not perms.write_forms and not perms.read_submissions and not perms.delete_forms %}<span class="badge" style="background:#f3f4f6;">none</span>{% endif %}
                        </td>
                        <td data-label="Last Used">{{ key.last_used_at[:16] if key.last_used_at else 'Never' }}</td>
                        <td data-label="Created">{{ key.created_at[:10] }}</td>
                        <td>
                            <form method="POST" action="{{ url_for('user_settings.revoke_api_key_route', key_id=key.id) }}" style="display:inline;" data-onsubmit="return confirm('Revoke this API key? It cannot be used again.')">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <button type="submit" class="btn btn-sm btn-danger">Revoke</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="empty">
                <p>No API keys yet. Create one to access the programmatic form API.</p>
            </div>
            {% endif %}
        </div>

        <!-- Create key form (hidden by default) -->
        <div class="card" id="createKeyForm" style="display:none;">
            <h2>Create API Key</h2>
            <form method="POST" action="{{ url_for('user_settings.create_api_key') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

                <label style="font-weight:600; font-size:14px;">Name</label>
                <input type="text" name="name" placeholder="e.g. production, staging, my-agent" required>

                <label style="font-weight:600; font-size:14px; margin-top:12px; display:block;">Permissions</label>
                <div class="perm-grid">
                    <div class="perm-item">
                        <input type="checkbox" id="perm_read_forms" name="perm_read_forms" checked>
                        <label for="perm_read_forms">Read forms</label>
                    </div>
                    <div class="perm-item">
                        <input type="checkbox" id="perm_write_forms" name="perm_write_forms" checked>
                        <label for="perm_write_forms">Write forms</label>
                    </div>
                    <div class="perm-item">
                        <input type="checkbox" id="perm_read_submissions" name="perm_read_submissions" checked>
                        <label for="perm_read_submissions">Read submissions</label>
                    </div>
                    <div class="perm-item">
                        <input type="checkbox" id="perm_delete_forms" name="perm_delete_forms">
                        <label for="perm_delete_forms">Delete forms</label>
                    </div>
                </div>

                <div style="display:flex; gap:12px; margin-top:16px;">
                    <button type="submit" class="btn">Create Key</button>
                    <button type="button" class="btn" style="background:#6b7280;" data-onclick="document.getElementById('createKeyForm').style.display='none'">Cancel</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script id="data-api-keys" data-csrf="{{ csrf_token }}"></script>
<script src="/static/js/api-keys-inline.js"></script>
{% endblock %}