{% 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-amber-500/10 border border-amber-500/20 text-[10px] text-amber-400 font-bold uppercase tracking-wider">
                    Flashcards
                </div>
            </div>
            <h1 class="text-2xl font-black text-white" id="fcTitle">📝 بطاقات تعليمية</h1>
            <p class="text-slate-500 text-sm mt-1">{{ report.project_name }}</p>
        </div>
        <div class="flex items-center gap-4 mt-4 md:mt-0">
            <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"><span id="currentIdx">1</span> / <span id="totalCards">0</span></div>
            </div>
            <div class="flex gap-2">
                {% include "study/_share_btn.html" %}
                <button onclick="toggleMode()" id="modeBtn" class="glass px-4 py-2 rounded-xl text-slate-400 text-xs hover:text-white transition-all">
                    ⇄ عرض الكل
                </button>
            </div>
        </div>
    </div>

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

    <!-- Single Card View -->
    <div id="singleView">
        <div class="flex justify-center mb-8">
            <div id="flashcard" onclick="flipCard()" class="relative cursor-pointer select-none" style="width: 100%; max-width: 560px; height: 320px; perspective: 1000px;">
                <div id="cardInner" class="relative w-full h-full transition-transform duration-500" style="transform-style: preserve-3d;">
                    <!-- Front -->
                    <div class="absolute inset-0 rounded-2xl p-8 flex flex-col items-center justify-center text-center border border-amber-500/20 bg-gradient-to-br from-amber-500/5 to-orange-500/5" style="backface-visibility: hidden;">
                        <div class="text-[10px] text-amber-400/60 uppercase tracking-wider mb-4 font-bold">السؤال</div>
                        <p id="cardFront" class="text-lg font-bold text-white leading-relaxed"></p>
                        <div class="text-[10px] text-slate-600 mt-6">اضغط للقلب</div>
                    </div>
                    <!-- Back -->
                    <div class="absolute inset-0 rounded-2xl p-8 flex flex-col items-center justify-center text-center border border-emerald-500/20 bg-gradient-to-br from-emerald-500/5 to-teal-500/5" style="backface-visibility: hidden; transform: rotateY(180deg);">
                        <div class="text-[10px] text-emerald-400/60 uppercase tracking-wider mb-4 font-bold">الإجابة</div>
                        <p id="cardBack" class="text-lg font-bold text-emerald-200 leading-relaxed"></p>
                        <div class="text-[10px] text-slate-600 mt-6">اضغط للقلب</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Navigation -->
        <div class="flex items-center justify-center gap-4">
            <button onclick="prevCard()" id="prevBtn" class="glass w-12 h-12 rounded-xl flex items-center justify-center text-slate-400 hover:text-white text-xl transition-all">→</button>
            <button onclick="shuffleCards()" class="glass px-5 py-3 rounded-xl text-slate-400 text-xs hover:text-white transition-all">🔀 خلط</button>
            <button onclick="nextCard()" id="nextBtn" class="glass w-12 h-12 rounded-xl flex items-center justify-center text-slate-400 hover:text-white text-xl transition-all">←</button>
        </div>

        <!-- Keyboard hint -->
        <p class="text-center text-[10px] text-slate-600 mt-4">استخدم الأسهم ← → للتنقل، مسافة للقلب</p>
    </div>

    <!-- Grid View -->
    <div id="gridView" class="hidden">
        <div id="gridContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"></div>
    </div>
</div>

<script>
const DATA = {{ flashcards_data | safe }};
let cards = [...DATA.cards];
let currentIndex = 0;
let isFlipped = false;
let isGridMode = false;

function init() {
    if (DATA.title) document.getElementById('fcTitle').textContent = '📝 ' + DATA.title;
    document.getElementById('totalCards').textContent = cards.length;
    showCard();
    buildGrid();
}

function showCard() {
    if (!cards.length) return;
    const card = cards[currentIndex];
    document.getElementById('cardFront').textContent = card.front;
    document.getElementById('cardBack').textContent = card.back;
    document.getElementById('currentIdx').textContent = currentIndex + 1;

    // Reset flip
    isFlipped = false;
    document.getElementById('cardInner').style.transform = '';

    // Progress
    const pct = ((currentIndex + 1) / cards.length) * 100;
    document.getElementById('progressBar').style.width = pct + '%';
}

function flipCard() {
    isFlipped = !isFlipped;
    document.getElementById('cardInner').style.transform = isFlipped ? 'rotateY(180deg)' : '';
}

function nextCard() {
    if (currentIndex < cards.length - 1) {
        currentIndex++;
        showCard();
    }
}

function prevCard() {
    if (currentIndex > 0) {
        currentIndex--;
        showCard();
    }
}

function shuffleCards() {
    for (let i = cards.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [cards[i], cards[j]] = [cards[j], cards[i]];
    }
    currentIndex = 0;
    showCard();
}

function toggleMode() {
    isGridMode = !isGridMode;
    document.getElementById('singleView').classList.toggle('hidden', isGridMode);
    document.getElementById('gridView').classList.toggle('hidden', !isGridMode);
    document.getElementById('modeBtn').textContent = isGridMode ? '⇄ بطاقة واحدة' : '⇄ عرض الكل';
}

function buildGrid() {
    const container = document.getElementById('gridContainer');
    container.innerHTML = '';
    cards.forEach((card, i) => {
        const div = document.createElement('div');
        div.className = 'panel p-5 rounded-2xl cursor-pointer hover:border-amber-500/20 transition-all group';
        div.onclick = () => { toggleGridCard(i); };
        div.innerHTML = `
            <div class="text-[10px] text-amber-400/60 uppercase tracking-wider mb-2 font-bold">بطاقة ${i + 1}</div>
            <p class="text-sm font-bold text-white mb-3 leading-relaxed">${escapeHtml(card.front)}</p>
            <div id="grid-back-${i}" class="hidden mt-3 pt-3 border-t border-white/5">
                <div class="text-[10px] text-emerald-400/60 uppercase tracking-wider mb-1 font-bold">الإجابة</div>
                <p class="text-sm text-emerald-300/80 leading-relaxed">${escapeHtml(card.back)}</p>
            </div>
            <div id="grid-hint-${i}" class="text-[10px] text-slate-600 mt-2 group-hover:text-slate-400 transition-all">اضغط لإظهار الإجابة</div>
        `;
        container.appendChild(div);
    });
}

function toggleGridCard(i) {
    const back = document.getElementById('grid-back-' + i);
    const hint = document.getElementById('grid-hint-' + i);
    const isHidden = back.classList.contains('hidden');
    back.classList.toggle('hidden');
    hint.textContent = isHidden ? 'اضغط لإخفاء الإجابة' : 'اضغط لإظهار الإجابة';
}

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

// Keyboard navigation
document.addEventListener('keydown', (e) => {
    if (isGridMode) return;
    if (e.key === 'ArrowLeft') nextCard();
    else if (e.key === 'ArrowRight') prevCard();
    else if (e.key === ' ') { e.preventDefault(); flipCard(); }
});

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