{% extends "base.html" %}
{% block title %}إعدادات NotebookLM — Admin{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="mb-8">
        <a href="{{ url_for('admin.index') }}" class="text-xs text-slate-400 hover:text-gold-400 transition">&#8592; لوحة الإدارة</a>
        <h1 class="text-2xl font-bold text-white mt-2 flex items-center gap-3">
            <span class="text-2xl">📓</span> إعدادات دفتر المعرفة (NotebookLM)
        </h1>
        <p class="text-slate-400 text-sm mt-1">التحكم في طريقة ربط حسابات Google لإنتاج المحتوى</p>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div class="mb-4 p-3 rounded-xl text-sm {% if category == 'success' %}bg-emerald-500/20 text-emerald-400{% else %}bg-red-500/20 text-red-400{% endif %}">{{ message }}</div>
    {% endfor %}
    {% endif %}
    {% endwith %}

    <!-- Enable/Disable Toggle -->
    <div class="glass rounded-2xl p-6 mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-lg font-bold text-white">تفعيل NotebookLM</h2>
                <p class="text-xs text-slate-500 mt-1">تفعيل أو تعطيل ميزة دفتر المعرفة لجميع المستخدمين</p>
            </div>
            <form method="POST" action="{{ url_for('admin.toggle_notebooklm') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="px-5 py-2 rounded-xl text-sm font-bold transition-all
                    {% if enabled %}bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30{% else %}bg-red-500/20 text-red-400 hover:bg-red-500/30{% endif %}">
                    {% if enabled %}مفعّل ✓{% else %}معطّل ✕{% endif %}
                </button>
            </form>
        </div>
    </div>

    <!-- Mode Selection -->
    <div class="glass rounded-2xl p-6 mb-6">
        <h2 class="text-lg font-bold text-white mb-4">وضع الحسابات</h2>
        <p class="text-xs text-slate-500 mb-6">اختر كيف يتم ربط حسابات Google لإنتاج المحتوى عبر NotebookLM</p>

        <form method="POST" action="{{ url_for('admin.set_notebooklm_mode') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

                <!-- Admin Shared Mode -->
                <label class="cursor-pointer">
                    <input type="radio" name="mode" value="admin_shared" class="hidden peer"
                           {% if mode == 'admin_shared' %}checked{% endif %}>
                    <div class="p-5 rounded-2xl border-2 transition-all
                        peer-checked:border-gold-500/50 peer-checked:bg-gold-500/5
                        border-white/10 hover:border-white/20">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-xl bg-gold-500/10 flex items-center justify-center text-xl">👑</div>
                            <div>
                                <h3 class="text-sm font-bold text-white">حساب مشترك (الأدمن)</h3>
                                <p class="text-[10px] text-slate-500">Admin Shared</p>
                            </div>
                        </div>
                        <ul class="text-xs text-slate-400 space-y-1.5 mr-2">
                            <li>• حساب Google واحد يديره مدير النظام</li>
                            <li>• جميع المستخدمين يستخدمون نفس الحساب</li>
                            <li>• لا يحتاج المستخدم تسجيل دخول Google</li>
                            <li>• أسهل في الإعداد والإدارة</li>
                        </ul>
                    </div>
                </label>

                <!-- Per User Mode -->
                <label class="cursor-pointer">
                    <input type="radio" name="mode" value="per_user" class="hidden peer"
                           {% if mode == 'per_user' %}checked{% endif %}>
                    <div class="p-5 rounded-2xl border-2 transition-all
                        peer-checked:border-blue-500/50 peer-checked:bg-blue-500/5
                        border-white/10 hover:border-white/20">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center text-xl">👤</div>
                            <div>
                                <h3 class="text-sm font-bold text-white">حساب منفصل لكل مستخدم</h3>
                                <p class="text-[10px] text-slate-500">Per User</p>
                            </div>
                        </div>
                        <ul class="text-xs text-slate-400 space-y-1.5 mr-2">
                            <li>• كل مستخدم يسجل دخوله بحسابه الخاص</li>
                            <li>• الدفاتر تُنشأ في حساب المستخدم</li>
                            <li>• خصوصية أعلى — كل مستخدم يملك بياناته</li>
                            <li>• يحتاج المستخدم ربط حسابه مرة واحدة</li>
                        </ul>
                    </div>
                </label>
            </div>

            <button type="submit" class="bg-gold-500 text-black px-6 py-2 rounded-lg font-bold text-sm hover:bg-gold-400 transition">
                حفظ الوضع
            </button>
        </form>
    </div>

    <!-- Admin Account Connection (only shown in admin_shared mode) -->
    {% if mode == 'admin_shared' %}
    <div class="glass rounded-2xl p-6">
        <h2 class="text-lg font-bold text-white mb-4">حساب Google المشترك</h2>
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                {% if admin_connected %}
                <div class="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center">
                    <span class="text-emerald-400 text-lg">✓</span>
                </div>
                <div>
                    <p class="text-sm font-bold text-emerald-400">الحساب متصل</p>
                    <p class="text-xs text-slate-500">حساب Google الخاص بالأدمن مربوط ويعمل</p>
                </div>
                {% else %}
                <div class="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center">
                    <span class="text-red-400 text-lg">✕</span>
                </div>
                <div>
                    <p class="text-sm font-bold text-red-400">غير متصل</p>
                    <p class="text-xs text-slate-500">يجب ربط حساب Google لتفعيل الخدمة</p>
                </div>
                {% endif %}
            </div>
            <form method="POST" action="{{ url_for('admin.connect_admin_notebooklm') }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="px-5 py-2.5 rounded-xl text-sm font-bold transition-all bg-white text-gray-800 hover:bg-gray-100 shadow-lg flex items-center gap-2">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
                        <path 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" fill="#4285F4"/>
                        <path 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" fill="#34A853"/>
                        <path 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" fill="#FBBC05"/>
                        <path 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" fill="#EA4335"/>
                    </svg>
                    {{ 'إعادة ربط' if admin_connected else 'ربط حساب Google' }}
                </button>
            </form>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}