{% 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' and not google_connected %}
    <!-- Admin shared 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">
            الوضع الحالي: حساب مشترك (الأدمن)
        </div>
    </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">
            <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>
        </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 %}

    <!-- 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 color = color_map[atype] %}
        {% set status = asset.status if asset else "none" %}

        <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 -->
                <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>

            <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 -->
            <div class="flex items-center gap-2" id="actions-{{ atype }}">
                {% if status == "ready" %}
                <!-- 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>
                {% 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 -->
            {% if asset and asset.error_message %}
            <p class="text-[10px] text-red-400 mt-2 truncate" title="{{ asset.error_message }}">{{ asset.error_message[:60] }}...</p>
            {% 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>

<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-google', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF},
        });
        const data = await res.json();
        if (data.status === 'connected') {
            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 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 %}