{% extends "base.html" %}

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

{% block extra_head %}
<style>
    .oauth-consent-shell {
        min-height: calc(100vh - 96px);
        display: grid;
        place-items: center;
        padding: 24px;
        background:
            radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.10), transparent 30%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent 48%);
    }
    html[data-theme="dark"] .oauth-consent-shell {
        background:
            radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.12), transparent 30%),
            linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent 48%);
    }
    .oauth-consent-card {
        width: min(760px, 100%);
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14);
        overflow: hidden;
    }
    .dark .oauth-consent-card {
        background: rgba(15, 23, 42, 0.96);
        border-color: rgba(71, 85, 105, 0.55);
    }
    .oauth-consent-header {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 28px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    }
    html[dir="rtl"] .oauth-consent-header { flex-direction: row-reverse; text-align: right; }
    .oauth-consent-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: rgba(59, 130, 246, 0.10);
        color: rgb(37, 99, 235);
        border: 1px solid rgba(59, 130, 246, 0.22);
        flex-shrink: 0;
    }
    .oauth-consent-body {
        padding: 24px 28px 28px;
        display: grid;
        gap: 18px;
    }
    .oauth-info-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        background: rgba(248, 250, 252, 0.82);
    }
    .dark .oauth-info-grid { background: rgba(30, 41, 59, 0.64); }
    .oauth-row {
        display: grid;
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        font-size: 13px;
    }
    .oauth-label { color: rgb(100, 116, 139); font-weight: 600; }
    .dark .oauth-label { color: rgb(148, 163, 184); }
    .oauth-value {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 12px;
        word-break: break-all;
        color: rgb(15, 23, 42);
    }
    .dark .oauth-value { color: rgb(226, 232, 240); }
    html[dir="rtl"] .oauth-value { direction: ltr; text-align: left; }
    .oauth-scope-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .oauth-scope {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        border: 1px solid rgba(59, 130, 246, 0.22);
        background: rgba(59, 130, 246, 0.09);
        padding: 7px 10px;
        font-size: 12px;
        font-weight: 600;
        color: rgb(30, 64, 175);
    }
    .dark .oauth-scope { color: rgb(147, 197, 253); }
    .oauth-panel {
        border: 1px solid rgba(148, 163, 184, 0.24);
        border-radius: 12px;
        padding: 14px;
        background: rgba(248, 250, 252, 0.72);
    }
    .dark .oauth-panel { background: rgba(30, 41, 59, 0.48); }
    .oauth-actions { display: flex; gap: 10px; padding-top: 4px; }
    html[dir="rtl"] .oauth-actions { flex-direction: row-reverse; }
    .oauth-actions button { min-height: 44px; border-radius: 10px; }
    @media (max-width: 640px) {
        .oauth-consent-shell { padding: 12px; align-items: start; }
        .oauth-consent-header { padding: 20px; }
        .oauth-consent-body { padding: 18px 20px 22px; }
        .oauth-row { grid-template-columns: 1fr; gap: 2px; }
        .oauth-actions { flex-direction: column; }
        html[dir="rtl"] .oauth-actions { flex-direction: column; }
    }
</style>
{% endblock %}

{% block content %}
<div class="oauth-consent-shell" {% if lang == 'fa' %}dir="rtl"{% endif %}>
    <div class="oauth-consent-card">
        <!-- Header with Icon -->
        <div class="oauth-consent-header">
            <div class="oauth-consent-icon">
                <svg class="h-6 w-6" 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>
            <div>
                <div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">MCP Hub OAuth</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">
                    <span class="font-semibold text-blue-700 dark:text-blue-300">{{ client_name }}</span>
                    {{ t.wants_access.replace('{client_name}', '') }}
                </p>
            </div>
        </div>

        <div class="oauth-consent-body">
        <!-- Client Information -->
        <div class="oauth-info-grid">
            <div class="space-y-2 text-sm">
                <div class="oauth-row">
                    <span class="oauth-label">{{ t.client_id_label }}</span>
                    <span class="oauth-value">{{ client_id }}</span>
                </div>
                {% if redirect_uri %}
                <div class="oauth-row">
                    <span class="oauth-label">{{ t.redirect_uri_label }}</span>
                    <span class="oauth-value" title="{{ redirect_uri }}">{{ redirect_uri }}</span>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Requested Permissions -->
        {% if scopes %}
        <div>
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ t.requested_permissions }}</h3>
            <div class="oauth-scope-list">
                {% for scope in scopes %}
                <div class="oauth-scope">
                    <svg class="h-4 w-4" 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>{{ 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="lang" value="{{ lang }}" id="oauth_lang">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

            <!-- Authentication -->
            {% if session_user %}
            <!-- Session-based consent (user already logged in) -->
            <div>
                <div class="oauth-panel mb-4">
                    <div class="flex items-center gap-3 {% if lang == 'fa' %}flex-row-reverse text-right{% endif %}">
                        <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 oauth-panel">
                <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"
                       dir="ltr" {% if lang == 'fa' %}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 class="oauth-panel">
                <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"
                    dir="ltr" {% if lang == 'fa' %}style="text-align: right;"{% endif %}
                />
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                    {{ 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 {% if lang == 'fa' %}flex-row-reverse{% endif %}">
                        <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="oauth-actions">
                <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="oauth-panel">
            <div class="flex gap-2 {% if lang == 'fa' %}flex-row-reverse text-right{% endif %}">
                <svg class="h-5 w-5 text-blue-600 dark:text-blue-400 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>
</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 %}