{% extends "base.html" %}

{% block title %}{% if api_key_configured %}{{ t('login.title_login') }}{% else %}{{ t('login.title_setup') }}{% endif %}{% endblock %}

{% block head %}
<style>
    /* Theme-based logo switching */
    [data-theme="dark"] .omlx-logo-light { display: none !important; }
    [data-theme="dark"] .omlx-logo-dark { display: inline !important; }
    :root:not([data-theme="dark"]) .omlx-logo-dark { display: none !important; }

    /* Login page dark mode */
    [data-theme="dark"] body { background-color: #1d1d20 !important; color: #efefef !important; }
    [data-theme="dark"] .bg-white { background-color: #1d1d20 !important; }
    [data-theme="dark"] .bg-neutral-100 { background-color: #2d2d32 !important; }
    [data-theme="dark"] .bg-neutral-50 { background-color: #252529 !important; }
    [data-theme="dark"] .from-neutral-100 { --tw-gradient-from: #252529 !important; }
    [data-theme="dark"] .border-neutral-200 { border-color: #3f3f46 !important; }
    [data-theme="dark"] .text-neutral-500 { color: #71717a !important; }
    [data-theme="dark"] .text-neutral-400 { color: #52525b !important; }
    [data-theme="dark"] .text-neutral-700 { color: #a1a1aa !important; }
    [data-theme="dark"] .placeholder-neutral-400::placeholder { color: #52525b !important; }
    [data-theme="dark"] input { background-color: #252529 !important; color: #efefef !important; border-color: #3f3f46 !important; }
    [data-theme="dark"] input:focus { box-shadow: 0 0 0 2px rgba(255,255,255,0.1) !important; }
    [data-theme="dark"] button.bg-neutral-900 { background-color: #e5e5e5 !important; color: #18181b !important; }
    [data-theme="dark"] button.hover\:bg-neutral-800:hover { background-color: #d4d4d8 !important; }
    [data-theme="dark"] button.bg-neutral-900 span { color: #18181b !important; }
    [data-theme="dark"] button.bg-neutral-900 svg { color: #18181b !important; }
    [data-theme="dark"] .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4) !important; }
    [data-theme="dark"] ::selection { background-color: #3f3f46; color: #efefef; }
    [data-theme="dark"] input[type="checkbox"] { background-color: #252529 !important; border-color: #3f3f46 !important; }
    [data-theme="dark"] input[type="checkbox"]:checked { background-color: #e5e5e5 !important; border-color: #e5e5e5 !important; }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-white relative overflow-hidden px-4" x-data="loginForm({{ 'true' if api_key_configured else 'false' }})">
    <!-- Background Effects -->
    <div class="absolute inset-0 bg-grain pointer-events-none z-0"></div>
    <div class="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-gradient-to-b from-neutral-100 to-transparent rounded-full blur-3xl -z-10 opacity-50"></div>

    <div class="w-full max-w-sm relative z-10">
        <!-- Logo and Title -->
        <div class="text-center mb-10 animate-fade-in-up">
            <div class="flex flex-col items-center justify-center mb-3">
                <img src="/admin/static/logo-light.svg" alt="oMLX" class="w-16 h-16 omlx-logo-light mb-3">
                <img src="/admin/static/logo-dark.svg" alt="oMLX" class="w-16 h-16 omlx-logo-dark mb-3" style="display:none;">
                <span class="text-4xl font-extrabold tracking-tight">oMLX</span>
            </div>
        </div>

        <!-- Setup Card (when no API key configured) -->
        <template x-if="!apiKeyConfigured">
            <div class="bg-white rounded-3xl shadow-xl border border-neutral-200 p-8 card-hover animate-fade-in-up" style="animation-delay: 0.1s;">
                <div class="mb-6 text-center">
                    <h2 class="text-lg font-bold text-neutral-900 mb-1">{{ t('login.setup.heading') }}</h2>
                    <p class="text-xs text-neutral-500">{{ t('login.setup.description') }}</p>
                </div>

                <form @submit.prevent="setup">
                    <!-- Error Message -->
                    <div x-show="error" x-cloak
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:leave="transition ease-in duration-150"
                         class="mb-6 p-4 bg-neutral-50 border border-neutral-200 rounded-xl">
                        <p class="text-sm text-neutral-700" x-text="error"></p>
                    </div>

                    <!-- API Key Input -->
                    <div class="mb-4">
                        <label for="setup_api_key" class="block text-xs font-bold uppercase tracking-wider text-neutral-500 mb-3">
                            {{ t('login.setup.label_api_key') }}
                        </label>
                        <div class="flex gap-1.5">
                            <input
                                :type="showSetupKey ? 'text' : 'password'"
                                id="setup_api_key"
                                x-model="apiKey"
                                placeholder="{{ t('login.setup.placeholder_new') }}"
                                class="flex-1 px-4 py-3 border border-neutral-200 rounded-xl text-sm
                                       placeholder-neutral-400 focus:ring-2 focus:ring-neutral-900
                                       focus:border-transparent transition-all duration-200"
                                :disabled="loading"
                                required
                            >
                            <button type="button" @click="showSetupKey = !showSetupKey"
                                    class="px-2.5 py-3 text-neutral-400 bg-neutral-50
                                           border border-neutral-200 rounded-xl hover:bg-neutral-100
                                           hover:text-neutral-600 transition-colors"
                                    :disabled="loading"
                                    title="{{ t('settings.auth.toggle_visibility_tooltip') }}">
                                <template x-if="!showSetupKey">
                                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                </template>
                                <template x-if="showSetupKey">
                                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
                                </template>
                            </button>
                            <button type="button" @click="generateRandomKey()"
                                    class="px-2.5 py-3 text-neutral-400 bg-neutral-50
                                           border border-neutral-200 rounded-xl hover:bg-neutral-100
                                           hover:text-neutral-600 transition-colors"
                                    :disabled="loading"
                                    title="{{ t('login.setup.generate_tooltip') }}">
                                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg>
                            </button>
                        </div>
                    </div>

                    <!-- Confirm API Key Input -->
                    <div class="mb-2">
                        <label for="setup_api_key_confirm" class="block text-xs font-bold uppercase tracking-wider text-neutral-500 mb-3">
                            {{ t('login.setup.label_confirm') }}
                        </label>
                        <input
                            :type="showSetupKey ? 'text' : 'password'"
                            id="setup_api_key_confirm"
                            x-model="apiKeyConfirm"
                            placeholder="{{ t('login.setup.placeholder_confirm') }}"
                            class="w-full px-4 py-3 border border-neutral-200 rounded-xl text-sm
                                   placeholder-neutral-400 focus:ring-2 focus:ring-neutral-900
                                   focus:border-transparent transition-all duration-200"
                            :disabled="loading"
                            required
                        >
                    </div>

                    <!-- Validation Hints -->
                    <p class="text-[11px] text-neutral-400 mb-6">{{ t('login.setup.validation_hint') }}</p>

                    <!-- Submit Button -->
                    <button
                        type="submit"
                        class="w-full py-3.5 px-6 bg-neutral-900 text-white text-sm font-semibold
                               rounded-xl hover:bg-neutral-800 focus:outline-none focus:ring-2
                               focus:ring-neutral-900 focus:ring-offset-2 transition-all duration-200
                               transform hover:scale-[1.02] active:scale-[0.98]
                               disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
                        :disabled="loading"
                    >
                        <span x-show="!loading">{{ t('login.setup.button_set') }}</span>
                        <span x-show="loading" class="flex items-center justify-center">
                            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            {{ t('login.setup.button_setting_up') }}
                        </span>
                    </button>
                </form>
            </div>
        </template>

        <!-- Login Card (when API key is configured) -->
        <template x-if="apiKeyConfigured">
            <div class="bg-white rounded-3xl shadow-xl border border-neutral-200 p-8 card-hover animate-fade-in-up" style="animation-delay: 0.1s;">
                <form @submit.prevent="login">
                    <!-- Error Message -->
                    <div x-show="error" x-cloak
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:leave="transition ease-in duration-150"
                         class="mb-6 p-4 bg-neutral-50 border border-neutral-200 rounded-xl">
                        <p class="text-sm text-neutral-700" x-text="error"></p>
                    </div>

                    <!-- API Key Input -->
                    <div class="mb-6">
                        <label for="api_key" class="block text-xs font-bold uppercase tracking-wider text-neutral-500 mb-3">
                            {{ t('login.login.label_api_key') }}
                        </label>
                        <input
                            type="password"
                            id="api_key"
                            x-model="apiKey"
                            placeholder="{{ t('login.login.placeholder') }}"
                            class="w-full px-4 py-3 border border-neutral-200 rounded-xl text-sm
                                   placeholder-neutral-400 focus:ring-2 focus:ring-neutral-900
                                   focus:border-transparent transition-all duration-200"
                            :disabled="loading"
                            required
                        >
                    </div>

                    <!-- Remember Me -->
                    <div class="mb-6 flex items-center justify-center gap-2">
                        <input
                            type="checkbox"
                            id="remember"
                            x-model="remember"
                            class="h-4 w-4 rounded border-neutral-300 text-neutral-900
                                   focus:ring-neutral-900 focus:ring-offset-0 cursor-pointer"
                            :disabled="loading"
                        >
                        <label for="remember" class="text-xs text-neutral-500 cursor-pointer select-none">
                            {{ t('login.login.remember') }}
                        </label>
                    </div>

                    <!-- Submit Button -->
                    <button
                        type="submit"
                        class="w-full py-3.5 px-6 bg-neutral-900 text-white text-sm font-semibold
                               rounded-xl hover:bg-neutral-800 focus:outline-none focus:ring-2
                               focus:ring-neutral-900 focus:ring-offset-2 transition-all duration-200
                               transform hover:scale-[1.02] active:scale-[0.98]
                               disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
                        :disabled="loading"
                    >
                        <span x-show="!loading">{{ t('login.login.button_sign_in') }}</span>
                        <span x-show="loading" class="flex items-center justify-center">
                            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            {{ t('login.login.button_signing_in') }}
                        </span>
                    </button>
                </form>
            </div>
        </template>

        <!-- Footer -->
        <p class="mt-8 text-center text-xs text-neutral-400 animate-fade-in-up" style="animation-delay: 0.2s;">
            {{ t('app.tagline') }}
        </p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function loginForm(apiKeyConfigured) {
        return {
            apiKeyConfigured: apiKeyConfigured,
            apiKey: '',
            apiKeyConfirm: '',
            remember: false,
            error: '',
            loading: false,
            showSetupKey: false,

            generateRandomKey() {
                const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
                const rand = Array.from(crypto.getRandomValues(new Uint8Array(16)))
                    .map(b => chars[b % chars.length]).join('');
                const key = 'omlx-' + rand;
                this.apiKey = key;
                this.apiKeyConfirm = key;
                this.showSetupKey = true;
            },

            async login() {
                this.error = '';
                this.loading = true;

                try {
                    const response = await fetch('/admin/api/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ api_key: this.apiKey, remember: this.remember }),
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        window.location.href = '/admin/dashboard';
                    } else {
                        this.error = data.detail || data.message || window.t('login.error.invalid_api_key');
                    }
                } catch (err) {
                    this.error = window.t('login.error.connect_failed');
                    console.error('Login error:', err);
                } finally {
                    this.loading = false;
                }
            },

            async setup() {
                this.error = '';

                // Client-side validation
                if (this.apiKey.length < 4) {
                    this.error = window.t('login.error.min_length');
                    return;
                }
                if (/\s/.test(this.apiKey)) {
                    this.error = window.t('login.error.no_whitespace');
                    return;
                }
                if (this.apiKey !== this.apiKeyConfirm) {
                    this.error = window.t('login.error.mismatch');
                    return;
                }

                this.loading = true;

                try {
                    const response = await fetch('/admin/api/setup-api-key', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            api_key: this.apiKey,
                            api_key_confirm: this.apiKeyConfirm,
                        }),
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        window.location.href = '/admin/dashboard';
                    } else {
                        this.error = data.detail || data.message || window.t('login.error.setup_failed');
                    }
                } catch (err) {
                    this.error = window.t('login.error.connect_failed');
                    console.error('Setup error:', err);
                } finally {
                    this.loading = false;
                }
            }
        }
    }
</script>
{% endblock %}