{% extends "base.html" %}
{% block title %}Google OAuth Debug{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto p-8" dir="rtl">
    <h1 class="text-2xl font-bold text-white mb-6">🔍 تصحيح أخطاء Google OAuth</h1>

    <div class="bg-slate-900/70 backdrop-blur-xl p-6 rounded-2xl border border-slate-700 mb-6">
        <h2 class="text-xl font-bold text-gold-400 mb-4">التكوين الحالي</h2>
        <div id="config" class="space-y-3">
            <div class="bg-black/50 p-3 rounded-xl">
                <div class="text-slate-400 text-sm">Client ID:</div>
                <div id="clientId" class="text-white font-mono text-sm break-all">Loading...</div>
            </div>
            <div class="bg-black/50 p-3 rounded-xl">
                <div class="text-slate-400 text-sm">Redirect URI:</div>
                <div id="redirectUri" class="text-emerald-400 font-mono text-sm">Loading...</div>
            </div>
        </div>
    </div>

    <div class="bg-red-900/30 border border-red-500/50 p-6 rounded-2xl mb-6">
        <h2 class="text-xl font-bold text-red-400 mb-4">⚠️ المشكلة: خطأ 400</h2>
        <p class="text-slate-300 mb-4">
            خطأ 400 يعني أن redirect_uri غير مطابقة في Google Cloud Console.
        </p>
        <p class="text-slate-300 mb-2">يجب إضافة URI التالية <strong>بدقة</strong>:</p>
        <code class="block bg-black/50 p-3 rounded-xl text-gold-400 text-sm my-3">
            https://jadwaai.com/auth/google/callback
        </code>
        <ul class="text-slate-300 list-disc list-inside space-y-1 mt-4">
            <li>لا توجد مسافة في البداية أو النهاية</li>
            <li>لا يوجد slash (/) في النهاية</li>
            <li>يجب استخدام https://</li>
            <li>ليس هناك www. في البداية</li>
        </ul>
    </div>

    <div class="bg-slate-900/70 backdrop-blur-xl p-6 rounded-2xl border border-slate-700 mb-6">
        <h2 class="text-xl font-bold text-gold-400 mb-4">خطوات الإصلاح</h2>
        <ol class="text-slate-300 space-y-3 list-decimal list-inside">
            <li>اذهب إلى <a href="https://console.cloud.google.com/apis/credentials" target="_blank" class="text-gold-400 underline">console.cloud.google.com/apis/credentials</a></li>
            <li>اختر المشروع الذي يحتوي على OAuth 2.0 Client ID</li>
            <li>اضغط على "OAuth 2.0 Client ID"</li>
            <li>في قسم "Authorized redirect URIs"، أضف:
                <code class="block bg-black/50 p-2 rounded text-emerald-400 text-sm mt-2 mr-4">
                    https://jadwaai.com/auth/google/callback
                </code>
            </li>
            <li>اضغط "Save"</li>
            <li>انتظر 2-5 دقائق</li>
        </ol>
    </div>

    <div class="bg-slate-900/70 backdrop-blur-xl p-6 rounded-2xl border border-slate-700 mb-6">
        <h2 class="text-xl font-bold text-gold-400 mb-4">اختبار</h2>
        <a href="{{ url_for('auth.google_login') }}" target="_self"
           class="inline-block bg-gradient-to-r from-gold-400 to-gold-600 text-gray-900 font-bold py-3 px-6 rounded-xl hover:from-gold-300 hover:to-gold-500 transition">
            اختبار تسجيل الدخول بـ Google
        </a>
        <div id="testResult" class="mt-4"></div>
    </div>

    <div class="bg-slate-900/70 backdrop-blur-xl p-6 rounded-2xl border border-slate-700">
        <h2 class="text-xl font-bold text-gold-400 mb-4">سجل الأخطاء الأخير</h2>
        <pre id="errorLog" class="bg-black/50 p-4 rounded-xl text-red-400 text-xs overflow-auto max-h-64">
لا توجد أخطاء معروضة هنا. تحقق من سجلات الخادم للحصول على التفاصيل الكاملة.
        </pre>
    </div>
</div>

<script>
// Load config from API
fetch('/auth/test-google-oauth-config')
    .then(r => r.json())
    .then(data => {
        document.getElementById('clientId').textContent = data.client_id_preview || 'Not set';
        document.getElementById('redirectUri').textContent = data.redirect_uri || 'Not set';
    })
    .catch(err => {
        document.getElementById('testResult').innerHTML = '<div class="text-red-400">خطأ: ' + err.message + '</div>';
    });
</script>
{% endblock %}