{% extends "base.html" %}

{% block content %}
<div x-data="apiKeysManager()" x-init="init()" class="space-y-6 max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold tracking-tight text-white flex items-center gap-3">
                <i class="fa-solid fa-key text-map-500"></i>
                Decart API Key Store
            </h1>
            <p class="text-sm text-slate-400 mt-1">Centralized API key management, quota tracking and Lucy VTON 3.5 distribution for LiveMirror apps</p>
        </div>
        <button @click="openAddModal()" class="px-4 py-2 rounded-xl text-sm font-medium bg-map-600 hover:bg-map-500 text-white shadow-lg shadow-map-600/30 transition flex items-center gap-2">
            <i class="fa-solid fa-plus"></i>
            <span>Add Decart API Key</span>
        </button>
    </div>

    <!-- Active Key Banner -->
    <div class="glass-panel p-6 rounded-2xl border border-map-500/40 relative overflow-hidden">
        <div class="absolute -right-10 -bottom-10 w-48 h-48 bg-map-600/10 rounded-full blur-3xl pointer-events-none"></div>
        
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 relative z-10">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-purple-500/20 text-purple-400 border border-purple-500/30 flex items-center justify-center text-2xl">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h2 class="text-base font-bold text-white">Active Decart Engine Configuration</h2>
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
                            ACTIVE
                        </span>
                    </div>
                    <p class="text-xs text-slate-400 mt-0.5">
                        Model: <span class="text-purple-300 font-mono font-semibold">RealtimeModels.LUCY_VTON_3_5</span> (lucy-vton-3.5) • WebRTC 720p 30fps
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3">
                <button @click="testKey()" :disabled="testing" class="px-4 py-2 rounded-xl text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition flex items-center gap-2">
                    <i class="fa-solid fa-bolt" :class="{ 'animate-bounce text-yellow-400': testing }"></i>
                    <span>Test Connectivity</span>
                </button>
            </div>
        </div>

        <!-- Connectivity Test Result Alert -->
        <div x-show="testResult" x-transition.opacity class="mt-4 p-3 rounded-xl border text-xs flex items-center justify-between"
             :class="testResult?.status === 'success' ? 'bg-emerald-500/10 border-emerald-500/30 text-emerald-300' : 'bg-rose-500/10 border-rose-500/30 text-rose-300'">
            <div class="flex items-center gap-2">
                <i class="fa-solid" :class="testResult?.status === 'success' ? 'fa-circle-check text-emerald-400' : 'fa-triangle-exclamation text-rose-400'"></i>
                <span x-text="testResult?.message"></span>
            </div>
            <button @click="testResult = null" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
    </div>

    <!-- API Keys List Table -->
    <div class="glass-panel rounded-2xl border border-slate-800 overflow-hidden">
        <div class="p-4 border-b border-slate-800 flex items-center justify-between">
            <h3 class="text-sm font-bold text-white">Configured Decart Credentials</h3>
            <span class="text-xs text-slate-400" x-text="keys.length + ' keys stored'"></span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-slate-900/80 text-slate-400 uppercase tracking-wider text-[10px] border-b border-slate-800">
                    <tr>
                        <th class="py-3 px-4">Key Name</th>
                        <th class="py-3 px-4">Model Engine</th>
                        <th class="py-3 px-4">API Key Token</th>
                        <th class="py-3 px-4">Daily Quota / Usage</th>
                        <th class="py-3 px-4 text-center">Status</th>
                        <th class="py-3 px-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60">
                    <template x-for="k in keys" :key="k.id">
                        <tr class="hover:bg-slate-900/40 transition">
                            <td class="py-3 px-4 font-semibold text-white">
                                <div class="flex items-center gap-2">
                                    <i class="fa-solid fa-key text-map-400"></i>
                                    <span x-text="k.name"></span>
                                </div>
                            </td>
                            <td class="py-3 px-4">
                                <span class="px-2 py-0.5 rounded bg-purple-500/10 text-purple-400 font-mono text-[11px] border border-purple-500/20" x-text="k.model_name"></span>
                            </td>
                            <td class="py-3 px-4 font-mono text-slate-400">
                                <div class="flex items-center gap-2">
                                    <span x-text="revealedKeys[k.id] ? k.raw_key : maskKey(k.raw_key)"></span>
                                    <button @click="toggleReveal(k.id)" class="text-slate-500 hover:text-slate-300">
                                        <i class="fa-solid" :class="revealedKeys[k.id] ? 'fa-eye-slash' : 'fa-eye'"></i>
                                    </button>
                                </div>
                            </td>
                            <td class="py-3 px-4">
                                <span x-text="k.usage_count + ' / ' + k.daily_quota + ' calls'"></span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider"
                                      :class="k.is_active ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-500 border border-slate-700'"
                                      x-text="k.is_active ? 'ACTIVE' : 'STANDBY'">
                                </span>
                            </td>
                            <td class="py-3 px-4 text-right space-x-2">
                                <button x-show="!k.is_active" @click="activateKey(k.id)" class="px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-map-600/20 hover:bg-map-600 text-map-400 hover:text-white border border-map-500/30 transition">
                                    Set Active
                                </button>
                                <button @click="deleteKey(k.id)" class="px-2.5 py-1 rounded-lg text-[11px] text-rose-400 hover:bg-rose-500/20 transition">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Android Integration Endpoint Doc Card -->
    <div class="glass-panel p-5 rounded-2xl border border-slate-800 space-y-3">
        <h3 class="text-xs font-bold text-white uppercase tracking-wider flex items-center gap-2">
            <i class="fa-solid fa-mobile text-cyan-400"></i>
            Android LiveMirror Client Auto-Sync Endpoint
        </h3>
        <p class="text-xs text-slate-400">The Android app automatically queries this endpoint at boot to acquire the active Decart Lucy VTON 3.5 token:</p>
        <div class="p-3 bg-slate-950 rounded-xl border border-slate-800 font-mono text-xs text-cyan-300 flex items-center justify-between">
            <span>GET /api/v1/keys/active</span>
            <button @click="navigator.clipboard.writeText('/api/v1/keys/active')" class="text-slate-500 hover:text-slate-300 text-xs">Copy</button>
        </div>
    </div>

    <!-- Add Key Modal -->
    <div x-show="modalOpen" x-transition.opacity class="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4" style="display: none;">
        <div class="glass-panel max-w-md w-full rounded-2xl p-6 space-y-4 border border-map-500/30 shadow-2xl" @click.stop>
            <div class="flex items-center justify-between border-b border-slate-800 pb-3">
                <h3 class="text-base font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-key text-map-500"></i>
                    Add Decart AI Key
                </h3>
                <button @click="modalOpen = false" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
            </div>

            <form @submit.prevent="saveKey()" class="space-y-4">
                <div>
                    <label class="text-xs font-semibold text-slate-300 block mb-1">Key Label / Description</label>
                    <input type="text" x-model="form.name" required placeholder="e.g. Decart Production Key" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                </div>
                <div>
                    <label class="text-xs font-semibold text-slate-300 block mb-1">Decart API Key Token *</label>
                    <input type="text" x-model="form.api_key" required placeholder="sk-decart-..." class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 font-mono focus:outline-none focus:border-map-500">
                </div>
                <div>
                    <label class="text-xs font-semibold text-slate-300 block mb-1">Daily Try-On Quota</label>
                    <input type="number" x-model="form.daily_quota" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3 py-2 text-xs text-slate-200 focus:outline-none focus:border-map-500">
                </div>
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" id="isActiveKey" x-model="form.is_active" class="rounded border-slate-700 text-map-600">
                    <label for="isActiveKey" class="text-xs text-slate-300">Set as immediately active primary key</label>
                </div>
                <div class="flex justify-end gap-3 pt-3 border-t border-slate-800">
                    <button type="button" @click="modalOpen = false" class="px-4 py-2 rounded-xl text-xs font-medium bg-slate-800 hover:bg-slate-700 text-slate-300">Cancel</button>
                    <button type="submit" class="px-5 py-2 rounded-xl text-xs font-medium bg-map-600 hover:bg-map-500 text-white">Save Key</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function apiKeysManager() {
    return {
        keys: {{ keys | tojson }},
        revealedKeys: {},
        modalOpen: false,
        testing: false,
        testResult: null,
        form: {
            name: 'Decart Production Key',
            api_key: '',
            daily_quota: 5000,
            is_active: true
        },

        init() {},

        maskKey(raw) {
            if (!raw) return '••••••••••••••••';
            if (raw.length <= 8) return '••••••••';
            return raw.slice(0, 4) + '••••••••' + raw.slice(-4);
        },

        toggleReveal(id) {
            this.revealedKeys[id] = !this.revealedKeys[id];
        },

        openAddModal() {
            this.form = {
                name: 'Decart Production Key',
                api_key: '',
                daily_quota: 5000,
                is_active: true
            };
            this.modalOpen = true;
        },

        async saveKey() {
            try {
                const res = await fetch('/api/v1/keys/', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(this.form)
                });
                if (res.ok) {
                    window.location.reload();
                }
            } catch(e) {
                alert('Failed to save API key');
            }
        },

        async activateKey(id) {
            try {
                await fetch(`/api/v1/keys/${id}/activate`, { method: 'PUT' });
                window.location.reload();
            } catch(e) {
                alert('Failed to activate key');
            }
        },

        async deleteKey(id) {
            if (!confirm('Are you sure you want to delete this API key?')) return;
            try {
                await fetch(`/api/v1/keys/${id}`, { method: 'DELETE' });
                this.keys = this.keys.filter(k => k.id !== id);
            } catch(e) {
                alert('Failed to delete key');
            }
        },

        async testKey() {
            this.testing = true;
            this.testResult = null;
            try {
                const res = await fetch('/api/v1/keys/test', { method: 'POST' });
                this.testResult = await res.json();
            } catch(e) {
                this.testResult = { status: 'error', message: 'Failed to communicate with Decart validation service.' };
            }
            this.testing = false;
        }
    }
}
</script>
{% endblock %}