{% extends "base.html" %}
{% block title %}دفتر المعرفة — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-12">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-10 pb-8 border-b border-white/5">
        <div>
            <div class="flex items-center gap-3 mb-4">
                <a href="{{ url_for('study.view', report_id=report.id) }}"
                   class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-white hover:border-accent-gold transition-all duration-300">&larr;</a>
                <div class="px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-[10px] text-purple-400 font-bold uppercase tracking-wider">
                    Knowledge Notebook
                </div>
            </div>
            <h1 class="text-3xl font-extrabold luxury-text leading-tight">دفتر المعرفة</h1>
            <p class="text-slate-500 text-sm mt-2">{{ report.project_name }} — إنشاء محتوى متعدد من دراسة الجدوى عبر NotebookLM</p>
        </div>
        <div class="flex items-center gap-3 mt-6 md:mt-0">
            {% if notebook %}
            <!-- Hidden: Open in NotebookLM button -->
            <!-- <a href="{{ notebook.notebook_url }}" target="_blank"
               class="btn-luxury px-5 py-2.5 rounded-xl font-bold text-xs flex items-center gap-2 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                فتح في NotebookLM
            </a> -->
            {% endif %}
        </div>
    </div>

    <!-- Step 0: Connect Google Account (per_user mode only, if not connected) -->
    {% if nlm_mode == 'per_user' and not google_connected %}
    <div class="panel p-10 text-center mb-10" id="connectPanel">
        <div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
            <svg class="w-10 h-10" 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>
        </div>
        <h2 class="text-xl font-bold text-white mb-3">ربط حساب Google</h2>
        <p class="text-slate-400 text-sm mb-6 max-w-lg mx-auto">
            لاستخدام دفتر المعرفة، تحتاج ربط حسابك في Google مع NotebookLM.
            سيتم فتح نافذة تسجيل دخول Google — سجّل بحسابك الشخصي.
        </p>
        <button onclick="connectGoogle()" id="connectBtn"
                class="px-8 py-3 rounded-xl font-bold text-sm transition-all bg-white text-gray-800 hover:bg-gray-100 shadow-lg flex items-center gap-3 mx-auto">
            <svg class="w-5 h-5" 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>
            <span id="connectBtnText">تسجيل الدخول بحساب Google</span>
            <span id="connectBtnLoading" class="hidden">
                <svg class="animate-spin inline w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                جاري فتح نافذة تسجيل الدخول...
            </span>
        </button>
        <p class="text-[11px] text-slate-600 mt-4">ستفتح نافذة متصفح لتسجيل الدخول — أكمل التسجيل ثم ستُغلق تلقائياً</p>
        <p id="connectError" class="text-red-400 text-sm mt-4 hidden"></p>
    </div>

    {% elif (nlm_mode == 'admin_shared' or nlm_mode == 'admin_pool') and not google_connected %}
    <!-- Admin shared/pool mode but admin hasn't connected yet -->
    <div class="panel p-10 text-center mb-10">
        <div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center">
            <span class="text-4xl">⚠️</span>
        </div>
        <h2 class="text-xl font-bold text-white mb-3">الخدمة غير متاحة حالياً</h2>
        <p class="text-slate-400 text-sm mb-4 max-w-lg mx-auto">
            مدير النظام لم يقم بإعداد حسابات Google بعد. يرجى التواصل مع الإدارة لتفعيل الخدمة.
        </p>
        <div class="px-4 py-2 rounded-full bg-slate-500/10 text-slate-400 text-xs inline-block">
            الوضع الحالي: {% if nlm_mode == 'admin_shared' %}حساب مشترك (الأدمن){% else %}مجموعة حسابات (Admin Pool){% endif %}
        </div>
        {% if current_user.is_admin %}
        <div class="mt-6">
            <a href="{{ url_for('admin.nlm_accounts') }}" class="inline-block px-6 py-2 rounded-xl bg-purple-500/20 text-purple-400 font-bold text-sm hover:bg-purple-500/30 transition border border-purple-500/30">
                إدارة حسابات NotebookLM ←
            </a>
        </div>
        {% endif %}
    </div>

    {% elif not notebook %}
    <!-- Step 1: Create Notebook (if connected but no notebook) -->
    <div class="panel p-10 text-center mb-10">
        <!-- Google Connected Badge -->
        <div class="flex items-center justify-center gap-2 mb-6">
            {% if nlm_mode == 'per_user' %}
            <div class="px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-xs text-emerald-400 font-bold 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>
                حساب Google متصل ✓
            </div>
            {% else %}
            <div class="px-3 py-1.5 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs text-purple-400 font-bold 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 nlm_mode == 'admin_shared' %}حساب الأدمن متصل ✓{% else %}حسابات الأدمن متاحة ✓{% endif %}
            </div>
            {% endif %}
        </div>

        <div class="w-20 h-20 mx-auto mb-6 rounded-2xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center">
            <span class="text-4xl">📓</span>
        </div>
        <h2 class="text-xl font-bold text-white mb-3">إنشاء دفتر المعرفة</h2>
        <p class="text-slate-400 text-sm mb-6 max-w-lg mx-auto">
            سيتم إنشاء دفتر في Google NotebookLM وإضافة بيانات دراسة الجدوى كمصدر.
            بعدها يمكنك إنشاء أنواع محتوى مختلفة (صوت، فيديو، خريطة ذهنية، اختبارات، وأكثر).
        </p>
        <button onclick="createNotebook()" id="createBtn"
                class="btn-luxury px-8 py-3 rounded-xl font-bold text-sm transition-all">
            <span id="createBtnText">إنشاء الدفتر</span>
            <span id="createBtnLoading" class="hidden">
                <svg class="animate-spin inline w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                جاري الإنشاء...
            </span>
        </button>
        <p id="createError" class="text-red-400 text-sm mt-4 hidden"></p>
    </div>
    {% else %}

    <!-- Per-user mode: Check if user needs to reconnect Google -->
    {% if nlm_mode == 'per_user' and not google_connected %}
    <div class="panel p-6 mb-8 flex items-center justify-between gap-4" style="background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center">
                <svg class="w-6 h-6" 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"/>
                </svg>
            </div>
            <div>
                <h3 class="text-white font-bold">ربط حساب Google لاستخدام NotebookLM</h3>
                <p class="text-slate-400 text-sm">لإنشاء محتوى جديد، تحتاج لربط حساب Google الخاص بك</p>
            </div>
        </div>
        <button onclick="connectGoogle()" id="reconnectBtn"
                class="px-6 py-2.5 rounded-xl font-bold text-sm 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"/>
            </svg>
            <span>ربط حساب Google</span>
        </button>
        <p id="reconnectError" class="text-red-400 text-sm hidden"></p>
    </div>
    {% endif %}

    <!-- Notebook Info Bar -->
    <div class="glass rounded-2xl p-4 mb-8 flex items-center justify-between">
        <div class="flex items-center gap-3">
            <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-white">الدفتر متصل</p>
                <p class="text-xs text-slate-500">Notebook ID: {{ notebook.notebook_id[:16] }}...</p>
            </div>
        </div>
        <!-- Hidden: Open in NotebookLM link -->
        <!-- <a href="{{ notebook.notebook_url }}" target="_blank" class="text-xs text-purple-400 hover:text-purple-300 transition-colors">
            فتح في NotebookLM ↗
        </a> -->
    </div>

    <!-- Asset Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
        {% set asset_types = ["audio", "video", "mind_map", "report", "flashcards", "quiz", "infographic", "slide_deck"] %}
        {% set color_map = {
            "audio": "emerald", "video": "blue", "mind_map": "purple", "report": "slate",
            "flashcards": "amber", "quiz": "rose", "infographic": "cyan", "slide_deck": "orange"
        } %}

        {% for atype in asset_types %}
        {% set info = asset_display[atype] %}
        {% set asset = assets_map.get(atype) %}
        {% set assets_list = assets_grouped.get(atype, []) %}
        {% set color = color_map[atype] %}
        {% set status = asset.status if asset else "none" %}
        {% set has_multiple = assets_list|length > 1 %}

        <div class="asset-card group relative panel rounded-2xl p-5 transition-all duration-300 hover:border-{{ color }}-500/30"
             id="card-{{ atype }}" data-type="{{ atype }}" data-status="{{ status }}">

            <!-- Color accent top -->
            <div class="absolute top-0 inset-x-0 h-1 rounded-t-2xl bg-gradient-to-r from-{{ color }}-500/40 to-{{ color }}-500/10"></div>

            <!-- Icon + Label -->
            <div class="flex items-start justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-{{ color }}-500/10 border border-{{ color }}-500/20 flex items-center justify-center text-2xl">
                    {{ info.icon }}
                </div>
                <!-- Status badge + Multi indicator -->
                <div class="flex items-center gap-2">
                    {% if has_multiple %}
                        {% set ready_with_files = assets_list|selectattr('status', 'equalto', 'ready')|selectattr('file_path')|list %}
                        {% if ready_with_files|length > 0 %}
                        <span class="px-2 py-1 rounded-full bg-{{ color }}-500/20 text-{{ color }}-400 text-[10px] font-bold">{{ ready_with_files|length }} نسخ</span>
                        {% endif %}
                    {% endif %}
                    <div id="badge-{{ atype }}">
                        {% if status == "ready" %}
                        <span class="px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">جاهز ✓</span>
                        {% elif status == "generating" %}
                        <span class="px-2 py-1 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold animate-pulse">جاري...</span>
                        {% elif status == "failed" %}
                        <span class="px-2 py-1 rounded-full bg-red-500/10 text-red-400 text-[10px] font-bold">فشل</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            <h3 class="text-sm font-bold text-white mb-1">{{ info.label_ar }}</h3>
            <p class="text-[11px] text-slate-500 mb-4">{{ info.label_en }}</p>

            <!-- Actions - Multiple Assets Support -->
            <div class="flex flex-col gap-2" id="actions-{{ atype }}">
                {% if status == "ready" %}
                    {% if has_multiple %}
                        <!-- Multiple ready assets - compact grid layout -->
                        <div class="grid grid-cols-2 gap-1.5">
                        {% for asset_item in assets_list if asset_item.status == "ready" %}
                            {% if asset_item.file_path %}
                                <div class="flex flex-col items-center gap-1 p-1.5 rounded-lg bg-{{ color }}-500/5 border border-{{ color }}-500/10">
                                    <div class="text-[8px] text-{{ color }}-400 font-bold">نسخة {{ asset_item.asset_index }}</div>
                                    <div class="flex gap-1 w-full justify-center">
                                        <!-- View button -->
                                        {% if atype == "mind_map" %}
                                        <a href="{{ url_for('study.notebook_mindmap_view', report_id=report.id) }}?index={{ asset_item.asset_index }}"
                                           class="px-1.5 py-0.5 rounded bg-{{ color }}-500/10 text-{{ color }}-400 text-[8px] font-bold hover:bg-{{ color }}-500/20 transition-all">
                                            👁
                                        </a>
                                        {% elif atype == "quiz" %}
                                        <a href="{{ url_for('study.notebook_quiz_view', report_id=report.id) }}?index={{ asset_item.asset_index }}"
                                           class="px-1.5 py-0.5 rounded bg-{{ color }}-500/10 text-{{ color }}-400 text-[8px] font-bold hover:bg-{{ color }}-500/20 transition-all">
                                            👁
                                        </a>
                                        {% elif atype == "flashcards" %}
                                        <a href="{{ url_for('study.notebook_flashcards_view', report_id=report.id) }}?index={{ asset_item.asset_index }}"
                                           class="px-1.5 py-0.5 rounded bg-{{ color }}-500/10 text-{{ color }}-400 text-[8px] font-bold hover:bg-{{ color }}-500/20 transition-all">
                                            👁
                                        </a>
                                        {% elif atype in ("audio", "video", "report", "infographic", "slide_deck") %}
                                        <a href="{{ url_for('study.notebook_asset_view', report_id=report.id, asset_type=atype) }}?index={{ asset_item.asset_index }}"
                                           class="px-1.5 py-0.5 rounded bg-{{ color }}-500/10 text-{{ color }}-400 text-[8px] font-bold hover:bg-{{ color }}-500/20 transition-all">
                                            👁
                                        </a>
                                        {% endif %}
                                        <!-- Download -->
                                        <a href="{{ url_for('study.api_notebook_download', asset_id=asset_item.id) }}"
                                           class="px-1.5 py-0.5 rounded bg-{{ color }}-500/10 text-{{ color }}-400 text-[8px] font-bold hover:bg-{{ color }}-500/20 transition-all">
                                            ⬇
                                        </a>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                        </div>
                    {% else %}
                        <!-- Single ready asset -->
                        <!-- View button -->
                        {% if atype == "mind_map" %}
                        <a href="{{ url_for('study.notebook_mindmap_view', report_id=report.id) }}"
                           class="flex-1 text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                            👁 عرض
                        </a>
                        {% elif atype == "quiz" %}
                        <a href="{{ url_for('study.notebook_quiz_view', report_id=report.id) }}"
                           class="flex-1 text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                            👁 عرض
                        </a>
                        {% elif atype == "flashcards" %}
                        <a href="{{ url_for('study.notebook_flashcards_view', report_id=report.id) }}"
                           class="flex-1 text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                            👁 عرض
                        </a>
                        {% elif atype in ("audio", "video", "report", "infographic", "slide_deck") %}
                        <a href="{{ url_for('study.notebook_asset_view', report_id=report.id, asset_type=atype) }}"
                           class="flex-1 text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                            👁 عرض
                        </a>
                        {% endif %}
                        <!-- Download -->
                        <a href="{{ url_for('study.api_notebook_download', asset_id=asset.id) }}"
                           class="text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                            ⬇ تحميل
                        </a>
                        <!-- Regenerate -->
                        <button onclick="generateAsset('{{ atype }}')"
                                class="px-3 py-2 rounded-xl glass text-slate-400 text-xs hover:text-white transition-all" title="إعادة إنشاء">
                            ↻
                        </button>
                    {% endif %}
                {% elif status == "generating" %}
                <div class="flex-1 text-center px-3 py-2 rounded-xl bg-amber-500/5 text-amber-400/60 text-xs font-bold">
                    <svg class="animate-spin inline w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    جاري الإنشاء...
                </div>
                <button onclick="resetAsset('{{ atype }}')"
                        class="px-3 py-2 rounded-xl bg-red-500/10 text-red-400 text-xs font-bold hover:bg-red-500/20 transition-all" title="إعادة تعيين">
                    ✕ إلغاء
                </button>
                {% else %}
                <!-- Generate -->
                <button onclick="generateAsset('{{ atype }}')"
                        class="flex-1 text-center px-3 py-2 rounded-xl bg-{{ color }}-500/10 text-{{ color }}-400 text-xs font-bold hover:bg-{{ color }}-500/20 transition-all">
                    ✦ إنشاء
                </button>
                {% endif %}
            </div>

            <!-- Error message - only show if no ready assets -->
            {% if asset and asset.error_message and not has_multiple %}
            <p class="text-[10px] text-red-400 mt-2 truncate" title="{{ asset.error_message }}">{{ asset.error_message[:60] }}...</p>
            {% elif has_multiple %}
                {% set ready_with_files = assets_list|selectattr('status', 'equalto', 'ready')|selectattr('file_path')|list %}
                {% set failed_assets = assets_list|selectattr('status', 'equalto', 'failed')|list %}
                {% set pending_assets = assets_list|rejectattr('status', 'in', ['ready', 'failed'])|list %}

                {% if failed_assets and failed_assets|length == assets_list|length %}
                    <p class="text-[10px] text-red-400 mt-2 truncate">جميع النسخ فشلت. اضغط إعادة المحاولة.</p>
                {% elif ready_with_files|length == 0 and pending_assets|length > 0 %}
                    <p class="text-[10px] text-amber-400 mt-2 truncate">{{ assets_list|length }} نسخ قيد الإنشاء. جاري التحضير...</p>
                {% elif failed_assets|length > 0 and ready_with_files|length > 0 %}
                    <p class="text-[10px] text-amber-400 mt-2 truncate">{{ failed_assets|length }} نسخ فشلت. {{ ready_with_files|length }} نسخ جاهزة.</p>
                {% elif pending_assets|length > 0 and ready_with_files|length > 0 %}
                    <p class="text-[10px] text-blue-400 mt-2 truncate">{{ ready_with_files|length }} نسخ جاهزة. {{ pending_assets|length }} نسخ قيد الإنشاء.</p>
                {% endif %}
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <!-- Generate All Button -->
    <div class="mt-8 text-center">
        <button onclick="generateAll()" id="genAllBtn"
                class="glass px-8 py-3 rounded-xl text-slate-300 font-bold text-sm hover:border-accent-gold hover:text-white transition-all">
            ✦ إنشاء جميع الأنواع
        </button>
        <p class="text-[11px] text-slate-600 mt-2">سيتم إنشاء جميع أنواع المحتوى بالتتابع (قد يستغرق عدة دقائق)</p>
    </div>

    {% endif %}
</div>

<style>
/* Fix multi-asset button layout */
.asset-card {
    min-height: 180px;
    overflow: visible;
}

.asset-card .grid {
    gap: 0.5rem;
}

.asset-card .grid > div {
    min-width: 0;
}

/* Responsive grid for multi-assets */
@media (max-width: 640px) {
    .asset-card .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Ensure buttons don't overflow */
.asset-card a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

<script>
const REPORT_ID = {{ report.id }};
const CSRF = '{{ csrf_token() }}';
const ASSET_TYPES = ["audio", "video", "mind_map", "report", "flashcards", "quiz", "infographic", "slide_deck"];

async function connectGoogle() {
    const btn = document.getElementById('connectBtn');
    const btnText = document.getElementById('connectBtnText');
    const btnLoad = document.getElementById('connectBtnLoading');
    const errEl = document.getElementById('connectError');

    btn.disabled = true;
    btnText.classList.add('hidden');
    btnLoad.classList.remove('hidden');
    errEl.classList.add('hidden');

    try {
        const res = await fetch('/study/api/notebook/connect-with-oauth', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
        });
        const data = await res.json();
        if (data.status === 'connected') {
            location.reload();
        } else if (data.error === 'google_auth_required') {
            // User needs to login with Google first
            errEl.innerHTML = `يجب تسجيل الدخول بحساب Google أولاً. <a href="/auth/google/login" class="underline text-blue-400">سجل الدخول هنا</a>`;
            errEl.classList.remove('hidden');
        } else {
            errEl.textContent = data.message || data.error || 'فشل الربط';
            errEl.classList.remove('hidden');
        }
    } catch (e) {
        errEl.textContent = 'خطأ في الاتصال: ' + e.message;
        errEl.classList.remove('hidden');
    }
    btn.disabled = false;
    btnText.classList.remove('hidden');
    btnLoad.classList.add('hidden');
}

async function createNotebook() {
    const btn = document.getElementById('createBtn');
    const btnText = document.getElementById('createBtnText');
    const btnLoad = document.getElementById('createBtnLoading');
    const errEl = document.getElementById('createError');

    btn.disabled = true;
    btnText.classList.add('hidden');
    btnLoad.classList.remove('hidden');
    errEl.classList.add('hidden');

    try {
        const res = await fetch(`/study/api/notebook/create/${REPORT_ID}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
        });
        const data = await res.json();
        if (data.status === 'created' || data.status === 'exists') {
            location.reload();
        } else {
            errEl.textContent = data.error || 'حدث خطأ';
            errEl.classList.remove('hidden');
        }
    } catch (e) {
        errEl.textContent = 'خطأ في الاتصال: ' + e.message;
        errEl.classList.remove('hidden');
    }
    btn.disabled = false;
    btnText.classList.remove('hidden');
    btnLoad.classList.add('hidden');
}

async function generateAsset(assetType) {
    const card = document.getElementById(`card-${assetType}`);
    const badge = document.getElementById(`badge-${assetType}`);
    const actions = document.getElementById(`actions-${assetType}`);

    // Set generating state
    badge.innerHTML = '<span class="px-2 py-1 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold animate-pulse">جاري...</span>';
    actions.innerHTML = `
        <div class="flex-1 text-center px-3 py-2 rounded-xl bg-amber-500/5 text-amber-400/60 text-xs font-bold">
            <svg class="animate-spin inline w-3 h-3 mr-1" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
            جاري الإنشاء...
        </div>`;

    try {
        const res = await fetch(`/study/api/notebook/generate/${REPORT_ID}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
            body: JSON.stringify({type: assetType}),
        });
        const data = await res.json();

        if (data.status === 'ready') {
            badge.innerHTML = '<span class="px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">جاهز ✓</span>';
            actions.innerHTML = `
                <a href="/study/api/notebook/download/${data.asset_id}" class="flex-1 text-center px-3 py-2 rounded-xl bg-emerald-500/10 text-emerald-400 text-xs font-bold hover:bg-emerald-500/20 transition-all">⬇ تحميل</a>
                <button onclick="generateAsset('${assetType}')" class="px-3 py-2 rounded-xl glass text-slate-400 text-xs hover:text-white transition-all" title="إعادة إنشاء">↻</button>`;
        } else {
            badge.innerHTML = '<span class="px-2 py-1 rounded-full bg-red-500/10 text-red-400 text-[10px] font-bold">فشل</span>';
            actions.innerHTML = `
                <button onclick="generateAsset('${assetType}')" class="flex-1 text-center px-3 py-2 rounded-xl bg-red-500/10 text-red-400 text-xs font-bold hover:bg-red-500/20 transition-all">↻ إعادة المحاولة</button>`;
        }
    } catch (e) {
        badge.innerHTML = '<span class="px-2 py-1 rounded-full bg-red-500/10 text-red-400 text-[10px] font-bold">خطأ</span>';
        actions.innerHTML = `
            <button onclick="generateAsset('${assetType}')" class="flex-1 text-center px-3 py-2 rounded-xl bg-red-500/10 text-red-400 text-xs font-bold hover:bg-red-500/20 transition-all">↻ إعادة المحاولة</button>`;
    }
}

async function resetAsset(assetType) {
    const badge = document.getElementById(`badge-${assetType}`);
    const actions = document.getElementById(`actions-${assetType}`);
    badge.innerHTML = '<span class="px-2 py-1 rounded-full bg-slate-500/10 text-slate-400 text-[10px] font-bold">إعادة تعيين...</span>';

    try {
        const res = await fetch(`/study/api/notebook/reset-asset/${REPORT_ID}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
            body: JSON.stringify({type: assetType}),
        });
        const data = await res.json();
        if (data.status === 'reset') {
            location.reload();
        } else {
            alert(data.error || 'حدث خطأ');
        }
    } catch (e) {
        alert('خطأ في الاتصال: ' + e.message);
    }
}

async function generateAll() {
    const btn = document.getElementById('genAllBtn');
    btn.disabled = true;
    btn.textContent = 'جاري إنشاء جميع الأنواع...';

    for (const assetType of ASSET_TYPES) {
        const card = document.getElementById(`card-${assetType}`);
        const status = card?.dataset?.status;
        if (status === 'ready') continue;
        await generateAsset(assetType);
    }

    btn.disabled = false;
    btn.textContent = '✦ إنشاء جميع الأنواع';
}
</script>
{% endblock %}