{% extends "base.html" %}

{% block title %}{{ t.page_title }}{% endblock %}

{% block content %}
<div class="auth-container px-4">
    <div class="auth-card w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8">
        <!-- Header with Icon -->
        <div class="text-center mb-6">
            <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-purple-100 dark:bg-purple-900 mb-4">
                <svg class="h-10 w-10 text-purple-600 dark:text-purple-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t.auth_required }}</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <span class="font-semibold text-purple-600 dark:text-purple-400">{{ client_name }}</span>
                {{ t.wants_access.replace('{client_name}', '') }}
            </p>
        </div>

        <!-- Client Information -->
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
            <div class="space-y-2 text-sm" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">{{ t.client_id_label }}</span>
                    <span class="font-mono text-gray-900 dark:text-white text-xs">{{ client_id }}</span>
                </div>
                {% if redirect_uri %}
                <div class="flex justify-between">
                    <span class="text-gray-600 dark:text-gray-400">{{ t.redirect_uri_label }}</span>
                    <span class="font-mono text-xs text-gray-900 dark:text-white truncate ml-2" title="{{ redirect_uri }}">
                        {{ redirect_uri[:40] }}...
                    </span>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Requested Permissions -->
        {% if scopes %}
        <div class="mb-6" {% if lang == 'fa' %}dir="rtl"{% endif %}>
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ t.requested_permissions }}</h3>
            <div class="space-y-2">
                {% for scope in scopes %}
                <div class="permission-badge flex items-center p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                    <svg class="h-5 w-5 text-purple-600 dark:text-purple-400 {% if lang == 'fa' %}ml-3{% else %}mr-3{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm font-medium text-gray-900 dark:text-white">{{ scope }}</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Authorization Form -->
        <form method="POST" action="/oauth/authorize/confirm" id="authForm" class="space-y-4">
            <!-- Hidden fields -->
            <input type="hidden" name="client_id" value="{{ client_id }}">
            <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
            <input type="hidden" name="response_type" value="{{ response_type }}">
            <input type="hidden" name="code_challenge" value="{{ code_challenge }}">
            <input type="hidden" name="code_challenge_method" value="{{ code_challenge_method }}">
            {% if scope %}
            <input type="hidden" name="scope" value="{{ scope }}">
            {% endif %}
            {% if state %}
            <input type="hidden" name="state" value="{{ state }}">
            {% endif %}
            {% if resource %}
            <input type="hidden" name="resource" value="{{ resource }}">
            {% endif %}
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

            <!-- Authentication -->
            {% if session_user %}
            <!-- Session-based consent (user already logged in) -->
            <div {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <div class="bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-3">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        <div>
                            <p class="font-medium text-green-800 dark:text-green-300">
                                {% if lang == 'fa' %}وارد شده به عنوان{% else %}Logged in as{% endif %}
                            </p>
                            <p class="text-sm text-green-700 dark:text-green-400">
                                {{ session_user.name or session_user.email or 'User' }}
                                {% if session_user.email %}
                                <span class="text-green-600 dark:text-green-500">({{ session_user.email }})</span>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="api_key" value="__session__" id="session_marker">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {% if lang == 'fa' %}
                    یا <a href="#" onclick="showApiKeyInput()" class="text-blue-600 dark:text-blue-400 hover:underline">با کلید API وارد شوید</a>
                    {% else %}
                    Or <a href="#" onclick="showApiKeyInput()" class="text-blue-600 dark:text-blue-400 hover:underline">enter an API key instead</a>
                    {% endif %}
                </p>
            </div>

            <!-- Hidden API key input (shown when user clicks "enter an API key instead") -->
            <div id="api-key-section" class="hidden" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <label for="api_key_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    {{ t.enter_api_key }}
                </label>
                <input type="password" id="api_key_input" name="api_key_manual"
                       class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                       placeholder="{{ t.api_key_placeholder }}" autocomplete="off"
                       {% if lang == 'fa' %}dir="ltr" style="text-align: right;"{% endif %}>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">{{ t.api_key_note }}</p>
            </div>

            {% else %}
            <!-- API key mode (no active session) -->
            <div {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <label for="api_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    {{ t.enter_api_key }}
                </label>
                <input
                    type="password"
                    id="api_key"
                    name="api_key"
                    required
                    placeholder="{{ t.api_key_placeholder }}"
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
                    autocomplete="off"
                    {% if lang == 'fa' %}dir="ltr" style="text-align: right;"{% endif %}
                />
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                    {{ t.api_key_note }}
                </p>

                {% if return_url %}
                <!-- Social login link -->
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-sm text-gray-600 dark:text-gray-400">
                        {% if lang == 'fa' %}
                        یا با حساب کاربری وارد شوید:
                        {% else %}
                        Or log in with your account:
                        {% endif %}
                    </p>
                    <div class="flex gap-2 mt-2">
                        <a href="/auth/github?next={{ return_url | urlencode }}"
                           class="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded-lg transition-colors">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
                            GitHub
                        </a>
                        <a href="/auth/google?next={{ return_url | urlencode }}"
                           class="inline-flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 text-gray-700 text-sm rounded-lg border border-gray-300 transition-colors">
                            <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
                            Google
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="flex gap-3 pt-4" {% if lang == 'fa' %}dir="rtl"{% endif %}>
                <button
                    type="submit"
                    name="action"
                    value="approve"
                    class="btn-primary flex-1 px-6 py-3 text-white font-semibold rounded-lg"
                >
                    {{ t.approve }}
                </button>
                <button
                    type="submit"
                    name="action"
                    value="deny"
                    class="btn-secondary flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg"
                >
                    {{ t.deny }}
                </button>
            </div>
        </form>

        <!-- Security Notice -->
        <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg" {% if lang == 'fa' %}dir="rtl"{% endif %}>
            <div class="flex {% if lang == 'fa' %}flex-row-reverse{% endif %}">
                <svg class="h-5 w-5 text-blue-600 dark:text-blue-400 {% if lang == 'fa' %}mr-2{% else %}mr-2{% endif %} flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <p class="text-xs text-blue-800 dark:text-blue-300">
                    <strong>{{ t.security_note }}</strong> {{ t.security_message }}
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function showApiKeyInput() {
        // Switch from session mode to API key input mode
        document.getElementById('api-key-section').classList.remove('hidden');
        // Remove the __session__ hidden input
        var hiddenInput = document.getElementById('session_marker');
        if (hiddenInput) hiddenInput.remove();
        // Make the manual input the actual api_key field
        var manualInput = document.getElementById('api_key_input');
        if (manualInput) {
            manualInput.name = 'api_key';
            manualInput.required = true;
            manualInput.focus();
        }
    }

    // Client-side validation
    document.getElementById('authForm').addEventListener('submit', function(e) {
        var action = e.submitter.value;

        if (action === 'approve') {
            // Session-based consent — no API key validation needed
            var sessionInput = document.getElementById('session_marker');
            if (sessionInput) {
                return true;
            }

            var apiKeyEl = document.getElementById('api_key') || document.getElementById('api_key_input');
            var apiKey = apiKeyEl ? apiKeyEl.value : '';

            if (!apiKey || apiKey.length < 10) {
                e.preventDefault();
                var lang = '{{ lang }}';
                var message = lang === 'fa'
                    ? 'لطفاً یک API Key معتبر وارد کنید'
                    : 'Please enter a valid API key';
                alert(message);
                return false;
            }

            if (!apiKey.startsWith('cmp_') && !apiKey.startsWith('ckm_') && !apiKey.startsWith('mhu_')) {
                var lang2 = '{{ lang }}';
                var msg = lang2 === 'fa'
                    ? 'فرمت API Key غیرمعمول به نظر می‌رسد. ادامه می‌دهید؟'
                    : 'The API key format looks unusual. Continue anyway?';
                if (!window.confirm(msg)) {
                    e.preventDefault();
                    return false;
                }
            }
        }
    });

    // Focus effect for API key input (if present)
    var apiKeyInput = document.getElementById('api_key');
    if (apiKeyInput) {
        apiKeyInput.addEventListener('focus', function() {
            this.parentElement.classList.add('ring-2', 'ring-purple-200');
        });
        apiKeyInput.addEventListener('blur', function() {
            this.parentElement.classList.remove('ring-2', 'ring-purple-200');
        });
    }
</script>
{% endblock %}