{% extends "dashboard/layout.html" %}
{% block title %}{{ _('API Keys – Dashboard') }}{% endblock %}

{% block dashboard_content %}
<div class="space-y-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-api-keys">{{ _('API Keys') }}</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ _('Manage your API keys for programmatic access') }}</p>
        </div>
        {% if api_enabled %}
        <button onclick="document.getElementById('modal-create-key').classList.remove('hidden')"
            class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 hover:shadow-xl transition-all"
            data-testid="btn-create-key">
            <i class="fa fa-plus"></i> {{ _('Create API Key') }}
        </button>
        {% endif %}
    </div>

    <!-- API not available on plan -->
    {% if not api_enabled %}
    <div class="rounded-xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 p-6 text-center" data-testid="banner-api-disabled">
        <div class="w-14 h-14 mx-auto rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center mb-4">
            <i class="fa fa-lock text-2xl text-amber-500"></i>
        </div>
        <h3 class="font-bold text-amber-800 dark:text-amber-300">{{ _('API Access Not Available') }}</h3>
        <p class="text-sm text-amber-700 dark:text-amber-400 mt-1">{{ _('API access is not included in your current plan. Upgrade to unlock the REST API.') }}</p>
        <a href="{{ full_url('/pricing') }}" class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold transition-all">
            <i class="fa fa-arrow-up"></i> {{ _('Upgrade Plan') }}
        </a>
    </div>
    {% else %}

    <!-- One-time new key reveal -->
    {% if new_key %}
    <div class="rounded-xl border-2 border-green-400 dark:border-green-600 bg-green-50 dark:bg-green-900/20 p-5" data-testid="banner-new-key">
        <div class="flex items-start gap-3 mb-3">
            <div class="w-8 h-8 rounded-lg bg-green-100 dark:bg-green-900/40 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-key text-green-600 dark:text-green-400"></i>
            </div>
            <div>
                <p class="font-bold text-green-800 dark:text-green-300">{{ _('Your new API key — save it now') }}</p>
                <p class="text-sm text-green-700 dark:text-green-400 mt-0.5">{{ _('This is the only time you will see the full key. Copy it and store it somewhere safe.') }}</p>
            </div>
        </div>
        <div class="flex items-center gap-2 bg-white dark:bg-gray-900 rounded-lg border border-green-200 dark:border-green-700 px-4 py-3">
            <code class="flex-1 font-mono text-sm text-gray-800 dark:text-gray-200 select-all break-all" id="new-key-value" data-testid="text-new-api-key">{{ new_key }}</code>
            <button onclick="navigator.clipboard.writeText(document.getElementById('new-key-value').textContent).then(()=>{this.innerHTML='<i class=\'fa fa-check text-green-500\'></i> {{ _('Copied') }}';setTimeout(()=>{this.innerHTML='<i class=\'fa fa-copy\'></i> {{ _('Copy') }}'},2000)})"
                class="flex-shrink-0 px-3 py-1.5 rounded-lg bg-green-600 hover:bg-green-700 text-white text-xs font-semibold flex items-center gap-1.5 transition-colors"
                data-testid="btn-copy-new-key">
                <i class="fa fa-copy"></i> {{ _('Copy') }}
            </button>
        </div>
    </div>
    {% endif %}

    <!-- Usage stats -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _("Today's Calls") }}</div>
            <div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white" data-testid="stat-today-usage">{{ today_usage }}</div>
            <div class="mt-1 text-xs text-gray-400">
                {% if daily_limit > 0 %}{{ _('of') }} {{ daily_limit }} {{ _('limit') }}{% else %}{{ _('Unlimited') }}{% endif %}
            </div>
        </div>
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Active Keys') }}</div>
            <div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white" data-testid="stat-active-keys">{{ keys|selectattr('is_active')|list|length }}</div>
            <div class="mt-1 text-xs text-gray-400">{{ _('of') }} {{ keys|length }} {{ _('total') }}</div>
        </div>
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Daily Limit') }}</div>
            <div class="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
                {% if daily_limit < 0 %}{{ _('∞') }}{% else %}{{ daily_limit }}{% endif %}
            </div>
            <div class="mt-1 text-xs text-gray-400">{{ plan.name if plan else _('Current plan') }}</div>
        </div>
    </div>

    <!-- API Keys table -->
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">{{ _('Your API Keys') }}</h2>
        </div>
        {% if keys %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for key in keys %}
            <div class="px-6 py-4 {% if not key.is_active %}opacity-60{% endif %}" data-testid="row-api-key">
                <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="font-semibold text-gray-900 dark:text-white">{{ key.name }}</span>
                            {% if key.is_active %}
                            <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">{{ _('Active') }}</span>
                            {% else %}
                            <span class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">{{ _('Revoked') }}</span>
                            {% endif %}
                        </div>
                        <div class="mt-1 flex items-center gap-2">
                            <code class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded" data-testid="text-api-key-prefix">{{ key.display_prefix }}••••••••••••••••</code>
                            <span class="text-xs text-gray-400 italic">{{ _('Key hidden for security') }}</span>
                        </div>
                        <div class="mt-2 flex flex-wrap gap-3 text-xs text-gray-400 dark:text-gray-500">
                            <span><i class="fa fa-calendar mr-1"></i>{{ _('Created') }}: {{ key.created_at[:10] if key.created_at else '–' }}</span>
                            <span><i class="fa fa-chart-bar mr-1"></i>{{ _('Used') }}: {{ key.usage_count }} {{ _('times') }}</span>
                            {% if key.last_used_at %}<span><i class="fa fa-clock mr-1"></i>{{ _('Last used') }}: {{ key.last_used_at[:10] }}</span>{% endif %}
                            {% if key.restriction_type != 'all' %}
                            <span><i class="fa fa-shield-halved mr-1"></i>{{ _('Restricted to') }}: {{ key.restriction_type }}</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="flex gap-2 flex-shrink-0">
                        {% if key.is_active %}
                        <form method="post" action="{{ full_url('/dashboard/api-keys/' ~ key.id ~ '/revoke') }}" data-confirm="{{ _('Revoke this API key?') }}&#10;&#10;• {{ _('All API requests using this key will immediately fail') }}&#10;• {{ _('Integrations using this key will stop working') }}">
                            <button type="submit" class="px-3 py-1.5 rounded-lg border border-amber-300 dark:border-amber-700 text-amber-700 dark:text-amber-400 text-xs font-medium hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-colors" data-testid="btn-revoke-key">
                                <i class="fa fa-ban mr-1"></i>{{ _('Revoke') }}
                            </button>
                        </form>
                        {% endif %}
                        <form method="post" action="{{ full_url('/dashboard/api-keys/' ~ key.id ~ '/delete') }}" data-confirm="{{ _('Delete this API key permanently?') }}&#10;&#10;• {{ _('The key is removed from our database entirely') }}&#10;• {{ _('Any integrations using it will stop working') }}">
                            <button type="submit" class="px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 text-xs font-medium hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" data-testid="btn-delete-key">
                                <i class="fa fa-trash mr-1"></i>{{ _('Delete') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-12 text-center" data-testid="state-no-keys">
            <div class="w-14 h-14 mx-auto rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-4">
                <i class="fa fa-key text-2xl text-gray-300 dark:text-gray-600"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400 font-medium">{{ _('No API keys yet') }}</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mt-1">{{ _('Create your first API key to get started.') }}</p>
            <button onclick="document.getElementById('modal-create-key').classList.remove('hidden')"
                class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 transition-all">
                <i class="fa fa-plus"></i>{{ _('Create API Key') }}
            </button>
        </div>
        {% endif %}
    </div>

    <!-- Docs link -->
    <div class="rounded-xl border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/20 p-5 flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <div class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-book text-indigo-600 dark:text-indigo-400"></i>
        </div>
        <div class="flex-1">
            <div class="font-semibold text-indigo-800 dark:text-indigo-300">{{ _('API Documentation') }}</div>
            <div class="text-sm text-indigo-600 dark:text-indigo-400 mt-0.5">{{ _('Explore all available endpoints, request formats, and code examples.') }}</div>
        </div>
        <a href="{{ full_url('/developers/') }}" target="_blank"
           class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow-lg shadow-indigo-500/30 transition-all flex-shrink-0">
            <i class="fa fa-arrow-up-right-from-square mr-1"></i>{{ _('View Docs') }}
        </a>
    </div>

    {% endif %}
</div>

<!-- Create Key Modal -->
{% if api_enabled %}
<div id="modal-create-key" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" data-testid="modal-create-key">
    <div class="w-full max-w-lg rounded-2xl bg-white dark:bg-gray-900 shadow-2xl border border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-gray-800">
            <h3 class="font-bold text-gray-900 dark:text-white">{{ _('Create New API Key') }}</h3>
            <button onclick="document.getElementById('modal-create-key').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                <i class="fa fa-xmark text-xl"></i>
            </button>
        </div>
        <form method="post" action="{{ full_url('/dashboard/api-keys/create') }}" class="p-6 space-y-4">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Key Name') }}</label>
                <input type="text" name="name" value="My API Key" required
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                    data-testid="input-key-name">
            </div>
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Restrictions') }}</label>
                <select name="restriction_type" id="key-restriction-type"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                    onchange="document.getElementById('restrict-ips').classList.toggle('hidden',this.value!='ip');document.getElementById('restrict-domains').classList.toggle('hidden',this.value!='domain')">
                    <option value="all">{{ _('None – Allow all requests') }}</option>
                    <option value="ip">{{ _('IP Addresses only') }}</option>
                    <option value="domain">{{ _('HTTP Referrers (domains) only') }}</option>
                </select>
            </div>
            <div id="restrict-ips" class="hidden">
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Allowed IPs') }} <span class="text-gray-400 font-normal normal-case">({{ _('one per line') }})</span></label>
                <textarea name="allowed_ips" rows="3" placeholder="192.168.1.1&#10;10.0.0.0/24"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 font-mono focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"></textarea>
            </div>
            <div id="restrict-domains" class="hidden">
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{{ _('Allowed Domains') }} <span class="text-gray-400 font-normal normal-case">({{ _('one per line') }})</span></label>
                <textarea name="allowed_domains" rows="3" placeholder="example.com&#10;app.example.com"
                    class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 font-mono focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"></textarea>
            </div>
            <p class="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg px-3 py-2">
                <i class="fa fa-triangle-exclamation mr-1"></i>{{ _('The full API key is shown only once after creation. Store it securely — it cannot be recovered.') }}
            </p>
            <div class="flex gap-3 pt-2">
                <button type="submit" class="flex-1 px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm shadow-lg shadow-indigo-500/30 transition-all" data-testid="btn-submit-create-key">
                    <i class="fa fa-key mr-1"></i>{{ _('Generate Key') }}
                </button>
                <button type="button" onclick="document.getElementById('modal-create-key').classList.add('hidden')"
                    class="px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {{ _('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}