{% extends "base.html" %}
{% block title %}لوحة الإدارة{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
            <span class="text-gold-400">&#9670;</span> لوحة الإدارة
        </h1>
        <div class="flex gap-3">
            <a href="{{ url_for('admin.plans') }}" class="bg-emerald-500/10 text-emerald-400 px-4 py-2 rounded-lg text-sm hover:bg-emerald-500/20 transition">الخطط</a>
            <a href="{{ url_for('admin.video_providers') }}" class="bg-rose-500/10 text-rose-400 px-4 py-2 rounded-lg text-sm hover:bg-rose-500/20 transition">Video AI</a>
            <a href="{{ url_for('admin.ai_config') }}" class="bg-purple-500/10 text-purple-400 px-4 py-2 rounded-lg text-sm hover:bg-purple-500/20 transition">AI Models</a>
            <a href="{{ url_for('admin.notebooklm_settings') }}" class="bg-blue-500/10 text-blue-400 px-4 py-2 rounded-lg text-sm hover:bg-blue-500/20 transition">NotebookLM</a>
            <a href="{{ url_for('admin.nlm_accounts') }}" class="bg-indigo-500/10 text-indigo-400 px-4 py-2 rounded-lg text-sm hover:bg-indigo-500/20 transition">NLM Accounts</a>
            <a href="{{ url_for('admin.prompts') }}" class="bg-indigo-500/10 text-indigo-400 px-4 py-2 rounded-lg text-sm hover:bg-indigo-500/20 transition">Prompts</a>
            <a href="{{ url_for('admin.analytics') }}" class="bg-gold-500/10 text-gold-400 px-4 py-2 rounded-lg text-sm hover:bg-gold-500/20 transition">Analytics</a>
            <a href="{{ url_for('admin.courses') }}" class="bg-blue-500/10 text-blue-400 px-4 py-2 rounded-lg text-sm hover:bg-blue-500/20 transition">الدورات</a>
            <a href="{{ url_for('admin.course_categories') }}" class="bg-teal-500/10 text-teal-400 px-4 py-2 rounded-lg text-sm hover:bg-teal-500/20 transition">التصنيفات</a>
            <a href="{{ url_for('admin.trainers') }}" class="bg-cyan-500/10 text-cyan-400 px-4 py-2 rounded-lg text-sm hover:bg-cyan-500/20 transition">المدربين</a>
            <a href="{{ url_for('admin.certificate_templates') }}" class="bg-amber-500/10 text-amber-400 px-4 py-2 rounded-lg text-sm hover:bg-amber-500/20 transition">قوالب الشهادات</a>
            <a href="{{ url_for('admin.tickets') }}" class="bg-pink-500/10 text-pink-400 px-4 py-2 rounded-lg text-sm hover:bg-pink-500/20 transition">التذاكر</a>
            <a href="{{ url_for('admin.organizations') }}" class="bg-violet-500/10 text-violet-400 px-4 py-2 rounded-lg text-sm hover:bg-violet-500/20 transition">المنظمات</a>
            <a href="{{ url_for('admin.sponsors') }}" class="bg-fuchsia-500/10 text-fuchsia-400 px-4 py-2 rounded-lg text-sm hover:bg-fuchsia-500/20 transition">الرعاة</a>
            <a href="{{ url_for('admin.society_projects') }}" class="bg-purple-500/10 text-purple-400 px-4 py-2 rounded-lg text-sm hover:bg-purple-500/20 transition">مشاريع المجتمع</a>
            <a href="{{ url_for('admin.activity_logs') }}" class="bg-orange-500/10 text-orange-400 px-4 py-2 rounded-lg text-sm hover:bg-orange-500/20 transition">سجل النشاطات</a>
        </div>
    </div>

    <!-- System Settings Card -->
    <div class="glass p-6 rounded-2xl mb-8">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-lg font-bold text-white flex items-center gap-2">
                    <span class="text-gold-400">&#9881;</span> إعدادات النظام
                </h2>
                <p class="text-xs text-slate-400 mt-1">التحكم في ميزات النظام العامة</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Registration Toggle -->
            <div class="flex items-center justify-between p-4 bg-black/20 rounded-xl">
                <div>
                    <div class="text-sm">
                        <span class="text-slate-400">التسجيل الجديد:</span>
                        <span class="{% if registration_enabled %}text-emerald-400{% else %}text-red-400{% endif %} font-bold mr-2">
                            {% if registration_enabled %}مفعل{% else %}معطل{% endif %}
                        </span>
                    </div>
                </div>
                <form method="POST" action="{{ url_for('admin.toggle_registration') }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="enabled" value="{% if not registration_enabled %}true{% else %}false{% endif %}">
                    <button type="submit" class="px-3 py-1 rounded-lg text-xs font-medium transition {% if registration_enabled %}bg-red-500/20 text-red-400 hover:bg-red-500/30{% else %}bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30{% endif %}">
                        {% if registration_enabled %}تعطيل{% else %}تفعيل{% endif %}
                    </button>
                </form>
            </div>

            <!-- Saudi-Only Access Toggle -->
            <div class="flex items-center justify-between p-4 bg-black/20 rounded-xl">
                <div>
                    <div class="text-sm">
                        <span class="text-slate-400">تقييد الوصول للسعودية:</span>
                        <span class="{% if saudi_only %}text-red-400{% else %}text-slate-500{% endif %} font-bold mr-2">
                            {% if saudi_only %}مفعل{% else %}معطل{% endif %}
                        </span>
                    </div>
                    <p class="text-[10px] text-slate-500 mt-1">حظر الوصول من خارج المملكة</p>
                </div>
                <form method="POST" action="{{ url_for('admin.toggle_saudi_only') }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="enabled" value="{% if not saudi_only %}true{% else %}false{% endif %}">
                    <button type="submit" class="px-3 py-1 rounded-lg text-xs font-medium transition {% if saudi_only %}bg-red-500/20 text-red-400 hover:bg-red-500/30{% else %}bg-slate-700 text-slate-300 hover:bg-slate-600{% endif %}">
                        {% if saudi_only %}تعطيل{% else %}تفعيل{% endif %}
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Organization & Sponsor Management Cards -->
    <div class="grid grid-cols-1 md:grid-cols-6 gap-4 mb-8">
        <a href="{{ url_for('admin.organizations') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#127970;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">المنظمات</div>
            <div class="text-[10px] text-slate-500 mt-1">إدارة المنظمات والشركات</div>
        </a>
        <a href="{{ url_for('admin.sponsors') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#127881;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">الرعاة</div>
            <div class="text-[10px] text-slate-500 mt-1">إدارة ملفات الرعاة</div>
        </a>
        <a href="{{ url_for('admin.ad_accounts') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#128179;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">حسابات الإعلانات</div>
            <div class="text-[10px] text-slate-500 mt-1">إدارة حسابات المنصات والمحفظة</div>
        </a>
        <a href="{{ url_for('admin.ad_budgets') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#128176;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">ميزانيات المستخدمين</div>
            <div class="text-[10px] text-slate-500 mt-1">تخصيص ميزانيات إعلانية للمستخدمين</div>
        </a>
        <a href="{{ url_for('admin.ad_review') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#128203;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">مراجعة الحملات</div>
            <div class="text-[10px] text-slate-500 mt-1">اعتماد أو رفض الحملات الإعلانية</div>
        </a>
        <a href="{{ url_for('admin.ad_analytics') }}" class="glass p-5 rounded-2xl hover:bg-white/5 transition group">
            <div class="text-2xl mb-2">&#128200;</div>
            <div class="text-white font-bold text-sm group-hover:text-gold-400 transition">إحصائيات الإعلانات</div>
            <div class="text-[10px] text-slate-500 mt-1">تحليلات شاملة لجميع الحملات</div>
        </a>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-gold-400 mb-2">{{ users_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest">المستخدمون</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-emerald-400 mb-2">{{ reports_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest">التقارير</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-blue-400 mb-2">{{ subs_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest">اشتراكات نشطة</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-purple-400 mb-2">{{ orgs_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest">منظمة</div>
        </div>
        <div class="glass p-6 rounded-2xl text-center">
            <div class="text-3xl font-bold text-fuchsia-400 mb-2">{{ sponsors_count }}</div>
            <div class="text-xs font-mono text-slate-400 uppercase tracking-widest">راعي</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="glass p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-white">آخر المستخدمين</h2>
                <a href="{{ url_for('admin.users') }}" class="text-xs text-gold-400 hover:text-gold-300">عرض الكل →</a>
            </div>
            <div class="space-y-3">
                {% for user in recent_users %}
                <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                    <div>
                        <div class="text-white text-sm font-medium">{{ user.name }}</div>
                        <div class="text-xs text-slate-500">{{ user.email }}</div>
                    </div>
                    <div class="text-xs text-slate-400">{{ user.created_at.strftime('%m/%d') }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
        <div class="glass p-6 rounded-2xl">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-bold text-white">آخر التقارير</h2>
                <a href="{{ url_for('admin.reports') }}" class="text-xs text-gold-400 hover:text-gold-300">عرض الكل →</a>
            </div>
            <div class="space-y-3">
                {% for report in recent_reports %}
                <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                    <div>
                        <div class="text-white text-sm font-medium">{{ report.project_name[:40] }}</div>
                        <div class="text-xs text-slate-500">{{ report.user.name if report.user else 'N/A' }}</div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-xs px-2 py-0.5 rounded-full {% if report.verdict == 'GO' %}bg-emerald-500/20 text-emerald-400{% elif report.verdict == 'NO-GO' %}bg-red-500/20 text-red-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ report.verdict or 'N/A' }}</span>
                        <span class="text-xs text-slate-400">{{ report.created_at.strftime('%m/%d') }}</span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Security Section -->
    <div class="glass p-6 rounded-2xl mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-white flex items-center gap-2">
                <span class="text-red-400">&#128737;</span> سجل الأمان
                {% if pending_sponsors > 0 %}
                <span class="bg-yellow-500/20 text-yellow-400 px-3 py-1 rounded-full text-xs">طلب رعاية: {{ pending_sponsors }}</span>
                {% endif %}
            </h2>
            <a href="{{ url_for('admin.activity_logs') }}" class="text-xs text-gold-400 hover:text-gold-300">عرض الكل →</a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="p-4 bg-red-500/10 rounded-xl border border-red-500/20">
                <div class="text-2xl font-bold text-red-400">{{ failed_logins_24h }}</div>
                <div class="text-xs text-slate-400 mt-1">محاولات دخول فاشلة</div>
            </div>
            <div class="p-4 bg-blue-500/10 rounded-xl border border-blue-500/20">
                <div class="text-2xl font-bold text-blue-400">{{ recent_logins|length }}</div>
                <div class="text-xs text-slate-400 mt-1">تسجيلات دخول ناجحة</div>
            </div>
            <div class="p-4 bg-emerald-500/10 rounded-xl border border-emerald-500/20">
                <div class="text-2xl font-bold text-emerald-400">{{ recent_transactions|length }}</div>
                <div class="text-xs text-slate-400 mt-1">معاملات مالية</div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Recent Logins -->
            <div>
                <h3 class="text-sm font-bold text-slate-300 mb-3">آخر تسجيلات الدخول</h3>
                <div class="space-y-2">
                    {% for log in recent_logins %}
                    <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                        <div class="flex items-center gap-3">
                            <span class="{% if log.status == 'failed' %}text-red-400{% else %}text-emerald-400{% endif %}">
                                {% if log.status == 'failed' %}&#10006;{% else %}&#10003;{% endif %}
                            </span>
                            <div>
                                <div class="text-white text-sm">{{ log.user.name if log.user else 'Unknown' }}</div>
                                <div class="text-xs text-slate-500">
                                    {{ log.details.get('email', 'N/A') if log.details else 'N/A' }}
                                    {% if log.country %}
                                    <span class="text-slate-400 mr-2">({{ log.country }}{% if log.city %}, {{ log.city }}{% endif %})</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="text-xs text-slate-500">{{ log.created_at.strftime('%H:%M') }}</div>
                    </div>
                    {% else %}
                    <div class="text-slate-500 text-sm p-3">لا توجد تسجيلات دخول</div>
                    {% endfor %}
                </div>
            </div>

            <!-- Recent Transactions -->
            <div>
                <h3 class="text-sm font-bold text-slate-300 mb-3">آخر المعاملات المالية</h3>
                <div class="space-y-2">
                    {% for log in recent_transactions %}
                    <div class="flex items-center justify-between p-3 bg-black/20 rounded-xl">
                        <div>
                            <div class="text-white text-sm">{{ log.action }}</div>
                            <div class="text-xs text-slate-500">
                                {{ log.user.email if log.user else 'Unknown' }}
                                {% if log.country %}
                                <span class="text-slate-400 mr-2">({{ log.country }}{% if log.city %}, {{ log.city }}{% endif %})</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="text-xs text-slate-500">{{ log.created_at.strftime('%m/%d %H:%M') }}</div>
                    </div>
                    {% else %}
                    <div class="text-slate-500 text-sm p-3">لا توجد معاملات</div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}