{% extends "base.html" %}
{% block title %}اختبار — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-6 border-b border-white/5">
        <div>
            <div class="flex items-center gap-3 mb-3">
                {% if not shared %}
                <a href="{{ url_for('study.notebook_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>
                {% endif %}
                <div class="px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-[10px] text-orange-400 font-bold uppercase tracking-wider">
                    Quiz
                </div>
            </div>
            <h1 class="text-2xl font-black text-white" id="quizTitle">❓ اختبار</h1>
            <p class="text-slate-500 text-sm mt-1">{{ report.project_name }}</p>
        </div>
        <div class="flex items-center gap-3 mt-4 md:mt-0">
            {% include "study/_share_btn.html" %}
            <div class="glass rounded-xl px-4 py-2 text-center">
                <div class="text-[10px] text-slate-500 uppercase tracking-wider">النتيجة</div>
                <div class="text-lg font-black text-white" id="scoreDisplay">0 / 0</div>
            </div>
            <div class="glass rounded-xl px-4 py-2 text-center">
                <div class="text-[10px] text-slate-500 uppercase tracking-wider">التقدم</div>
                <div class="text-lg font-black text-white" id="progressDisplay">0%</div>
            </div>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="w-full h-2 rounded-full bg-white/5 mb-8 overflow-hidden">
        <div id="progressBar" class="h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-400 transition-all duration-500" style="width: 0%"></div>
    </div>

    <!-- Questions Container -->
    <div id="questionsContainer"></div>

    <!-- Results Panel (hidden initially) -->
    <div id="resultsPanel" class="hidden mt-8">
        <div class="panel p-8 rounded-2xl text-center">
            <div class="text-6xl mb-4" id="resultsEmoji"></div>
            <h2 class="text-2xl font-black text-white mb-2" id="resultsTitle"></h2>
            <p class="text-slate-400 mb-6" id="resultsSubtitle"></p>

            <div class="flex justify-center gap-6 mb-8">
                <div class="glass rounded-xl px-6 py-4 text-center">
                    <div class="text-3xl font-black text-emerald-400" id="finalCorrect">0</div>
                    <div class="text-[11px] text-slate-500 mt-1">إجابة صحيحة</div>
                </div>
                <div class="glass rounded-xl px-6 py-4 text-center">
                    <div class="text-3xl font-black text-red-400" id="finalWrong">0</div>
                    <div class="text-[11px] text-slate-500 mt-1">إجابة خاطئة</div>
                </div>
                <div class="glass rounded-xl px-6 py-4 text-center">
                    <div class="text-3xl font-black text-amber-400" id="finalPercent">0%</div>
                    <div class="text-[11px] text-slate-500 mt-1">النسبة</div>
                </div>
            </div>

            <div class="flex justify-center gap-3">
                <button onclick="resetQuiz()" class="btn-luxury px-6 py-3 rounded-xl font-bold text-sm transition-all">
                    ↺ إعادة الاختبار
                </button>
                <a href="{{ url_for('study.notebook_view', report_id=report.id) }}"
                   class="glass px-6 py-3 rounded-xl text-slate-400 font-bold text-sm hover:text-white transition-all">
                    ← العودة
                </a>
            </div>
        </div>
    </div>
</div>

<script>
const QUIZ = {{ quiz_data | safe }};
let answered = {};
let score = 0;

function init() {
    if (QUIZ.title) {
        document.getElementById('quizTitle').textContent = '❓ ' + QUIZ.title;
    }

    const container = document.getElementById('questionsContainer');
    container.innerHTML = '';
    answered = {};
    score = 0;
    updateProgress();

    document.getElementById('resultsPanel').classList.add('hidden');

    QUIZ.questions.forEach((q, qi) => {
        const card = document.createElement('div');
        card.id = 'q-' + qi;
        card.className = 'panel p-6 rounded-2xl mb-6 transition-all duration-300';
        card.innerHTML = buildQuestion(q, qi);
        container.appendChild(card);
    });
}

function buildQuestion(q, qi) {
    const total = QUIZ.questions.length;
    let html = `
        <div class="flex items-start justify-between mb-4">
            <div class="flex items-center gap-3">
                <span class="w-8 h-8 rounded-lg bg-orange-500/10 flex items-center justify-center text-orange-400 text-sm font-black">${qi + 1}</span>
                <span class="text-[11px] text-slate-500">السؤال ${qi + 1} من ${total}</span>
            </div>
            <div id="q-status-${qi}"></div>
        </div>
        <h3 class="text-base font-bold text-white mb-5 leading-relaxed">${escapeHtml(q.question)}</h3>
        <div class="space-y-3" id="q-options-${qi}">
    `;

    q.answerOptions.forEach((opt, oi) => {
        html += `
            <button onclick="selectAnswer(${qi}, ${oi})"
                    id="opt-${qi}-${oi}"
                    class="w-full text-right px-4 py-3 rounded-xl border border-white/5 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/10 text-slate-300 text-sm transition-all duration-200 flex items-center gap-3 group">
                <span class="w-7 h-7 rounded-lg bg-white/5 flex items-center justify-center text-[11px] text-slate-500 font-bold group-hover:bg-white/10 transition-all flex-shrink-0">${String.fromCharCode(65 + oi)}</span>
                <span class="flex-1">${escapeHtml(opt.text)}</span>
            </button>
        `;
    });

    html += '</div>';

    // Hint
    if (q.hint) {
        html += `
            <div class="mt-4">
                <button onclick="toggleHint(${qi})" class="text-[11px] text-amber-400/60 hover:text-amber-400 transition-all flex items-center gap-1">
                    💡 <span id="hint-toggle-${qi}">إظهار التلميح</span>
                </button>
                <div id="hint-${qi}" class="hidden mt-2 px-4 py-2 rounded-xl bg-amber-500/5 border border-amber-500/10 text-amber-300/80 text-xs leading-relaxed">
                    ${escapeHtml(q.hint)}
                </div>
            </div>
        `;
    }

    // Rationale area (shown after answer)
    html += `<div id="rationale-${qi}" class="hidden mt-4 px-4 py-3 rounded-xl text-xs leading-relaxed"></div>`;

    return html;
}

function selectAnswer(qi, oi) {
    if (answered[qi] !== undefined) return; // already answered

    answered[qi] = oi;
    const q = QUIZ.questions[qi];
    const selected = q.answerOptions[oi];
    const isCorrect = selected.isCorrect;

    if (isCorrect) score++;

    // Update option styles
    q.answerOptions.forEach((opt, i) => {
        const btn = document.getElementById('opt-' + qi + '-' + i);
        btn.disabled = true;
        btn.classList.remove('hover:bg-white/[0.05]', 'hover:border-white/10');
        btn.style.cursor = 'default';

        if (opt.isCorrect) {
            btn.className = 'w-full text-right px-4 py-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 text-emerald-300 text-sm transition-all duration-200 flex items-center gap-3';
            btn.querySelector('span:first-child').className = 'w-7 h-7 rounded-lg bg-emerald-500/20 flex items-center justify-center text-[11px] text-emerald-400 font-bold flex-shrink-0';
        } else if (i === oi && !isCorrect) {
            btn.className = 'w-full text-right px-4 py-3 rounded-xl border border-red-500/30 bg-red-500/10 text-red-300 text-sm transition-all duration-200 flex items-center gap-3';
            btn.querySelector('span:first-child').className = 'w-7 h-7 rounded-lg bg-red-500/20 flex items-center justify-center text-[11px] text-red-400 font-bold flex-shrink-0';
        } else {
            btn.className = 'w-full text-right px-4 py-3 rounded-xl border border-white/5 bg-white/[0.01] text-slate-600 text-sm transition-all duration-200 flex items-center gap-3';
        }
    });

    // Status badge
    const statusEl = document.getElementById('q-status-' + qi);
    if (isCorrect) {
        statusEl.innerHTML = '<span class="px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">✓ صحيح</span>';
    } else {
        statusEl.innerHTML = '<span class="px-2 py-1 rounded-full bg-red-500/10 text-red-400 text-[10px] font-bold">✗ خطأ</span>';
    }

    // Show rationale
    const rationaleEl = document.getElementById('rationale-' + qi);
    rationaleEl.classList.remove('hidden');
    if (isCorrect) {
        rationaleEl.className = 'mt-4 px-4 py-3 rounded-xl text-xs leading-relaxed bg-emerald-500/5 border border-emerald-500/10 text-emerald-300/80';
    } else {
        rationaleEl.className = 'mt-4 px-4 py-3 rounded-xl text-xs leading-relaxed bg-red-500/5 border border-red-500/10 text-red-300/80';
    }
    rationaleEl.innerHTML = '<span class="font-bold">' + (isCorrect ? '✓ أحسنت!' : '✗ إجابة خاطئة') + '</span> — ' + escapeHtml(selected.rationale);

    // Card highlight
    const card = document.getElementById('q-' + qi);
    if (isCorrect) {
        card.style.borderColor = 'rgba(16, 185, 129, 0.15)';
    } else {
        card.style.borderColor = 'rgba(239, 68, 68, 0.15)';
    }

    updateProgress();

    // Check if all answered
    if (Object.keys(answered).length === QUIZ.questions.length) {
        setTimeout(showResults, 600);
    } else {
        // Scroll to next unanswered
        const nextQ = QUIZ.questions.findIndex((_, i) => answered[i] === undefined);
        if (nextQ >= 0) {
            setTimeout(() => {
                document.getElementById('q-' + nextQ).scrollIntoView({ behavior: 'smooth', block: 'center' });
            }, 400);
        }
    }
}

function toggleHint(qi) {
    const hintEl = document.getElementById('hint-' + qi);
    const toggleEl = document.getElementById('hint-toggle-' + qi);
    if (hintEl.classList.contains('hidden')) {
        hintEl.classList.remove('hidden');
        toggleEl.textContent = 'إخفاء التلميح';
    } else {
        hintEl.classList.add('hidden');
        toggleEl.textContent = 'إظهار التلميح';
    }
}

function updateProgress() {
    const total = QUIZ.questions.length;
    const answeredCount = Object.keys(answered).length;
    const percent = total > 0 ? Math.round((answeredCount / total) * 100) : 0;

    document.getElementById('progressBar').style.width = percent + '%';
    document.getElementById('progressDisplay').textContent = percent + '%';
    document.getElementById('scoreDisplay').textContent = score + ' / ' + total;
}

function showResults() {
    const total = QUIZ.questions.length;
    const percent = Math.round((score / total) * 100);

    document.getElementById('finalCorrect').textContent = score;
    document.getElementById('finalWrong').textContent = total - score;
    document.getElementById('finalPercent').textContent = percent + '%';

    let emoji, title, subtitle;
    if (percent >= 90) {
        emoji = '🏆';
        title = 'ممتاز!';
        subtitle = 'أداء رائع، لديك فهم عميق لدراسة الجدوى.';
    } else if (percent >= 70) {
        emoji = '🌟';
        title = 'جيد جداً!';
        subtitle = 'أداء جيد، مع مراجعة بسيطة ستصل للامتياز.';
    } else if (percent >= 50) {
        emoji = '💪';
        title = 'جيد';
        subtitle = 'أداء مقبول، حاول مراجعة الدراسة وإعادة الاختبار.';
    } else {
        emoji = '📚';
        title = 'تحتاج مراجعة';
        subtitle = 'راجع دراسة الجدوى بتمعن ثم أعد الاختبار.';
    }

    document.getElementById('resultsEmoji').textContent = emoji;
    document.getElementById('resultsTitle').textContent = title;
    document.getElementById('resultsSubtitle').textContent = subtitle;

    const panel = document.getElementById('resultsPanel');
    panel.classList.remove('hidden');
    panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function resetQuiz() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    setTimeout(init, 300);
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

init();
</script>
{% endblock %}