// ==========================================
// API — Recueil de Bonnes Pratiques (backend FastAPI)
// ==========================================
const API_BASE = "/api/bonnes-pratiques";

function authHeaders() {
    const token = localStorage.getItem("fablab_token");
    return token ? { Authorization: "Bearer " + token } : {};
}

async function apiFetchJson(url, options) {
    const r = await fetch(url, options);
    if (!r.ok) {
        let detail = "Erreur serveur.";
        try { detail = (await r.json()).detail || detail; } catch (e) { /* réponse non-JSON */ }
        throw new Error(detail);
    }
    if (r.status === 204) return null;
    return await r.json();
}

// ==========================================
// ONGLETS DU MENU
// ==========================================
// Repli statique utilisé uniquement si le backend est injoignable (résilience) —
// la source de vérité est désormais l'API (table bp_tabs), pas localStorage.
const DEFAULT_TABS = [
    { id: "elec",         label: "Électronique",     icon: "⚡", href: "elec.html",        category: "elec",        pageKey: "elec" },
    { id: "code",         label: "Code Embarqué",    icon: "💻", href: "code.html",        category: "code",        pageKey: "code" },
    { id: "CAO-methodo",  label: "Organi & CAO",     icon: "🏗️", href: "CAO-methodo.html", category: "cao-methodo", pageKey: "CAO-methodo" },
    { id: "CAO-dfm",      label: "Design For Mfg",   icon: "⚙️", href: "CAO-dfm.html",     category: "dfm",         pageKey: "CAO-dfm" },
    { id: "auto",         label: "Automatique",      icon: "🤖", href: "auto.html",        category: "auto",        pageKey: "auto" },
    { id: "concep-meca",  label: "CAO / Conception", icon: "📐", href: "concep-meca.html", category: "meca",        pageKey: "concep-meca" },
    { id: "calcul-meca",  label: "Calculs Méca",     icon: "🧮", href: "calcul-meca.html", category: "rdm",         pageKey: "calcul-meca" },
    { id: "fab",          label: "Fabrication",      icon: "🏭", href: "fab.html",         category: "fab",         pageKey: "fab" },
    { id: "doc-projet",   label: "Documentation",    icon: "📂", href: "doc-projet.html",  category: "doc",         pageKey: "doc-projet" },
    { id: "gest-projet",  label: "Gestion Projet",   icon: "📊", href: "gest-projet.html", category: "projet",      pageKey: "gest-projet" },
    { id: "achats",       label: "Achats & BOM",     icon: "🛒", href: "achats.html",      category: "bom",         pageKey: "achats" },
    { id: "tests",        label: "Qualité & Tests",  icon: "✅", href: "tests.html",       category: "tests",       pageKey: "tests" },
];

async function fetchTabs() {
    try {
        const r = await fetch(`${API_BASE}/tabs`);
        if (r.ok) {
            const data = await r.json();
            if (Array.isArray(data) && data.length) return data;
        }
    } catch (e) { /* backend indisponible */ }
    return DEFAULT_TABS.map(t => ({ ...t, position: 0 }));
}

async function createTab(label, icon) {
    return apiFetchJson(`${API_BASE}/tabs`, {
        method: "POST",
        headers: { "Content-Type": "application/json", ...authHeaders() },
        body: JSON.stringify({ label, icon }),
    });
}

async function updateTabApi(id, data) {
    return apiFetchJson(`${API_BASE}/tabs/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json", ...authHeaders() },
        body: JSON.stringify(data),
    });
}

async function deleteTabApi(id) {
    return apiFetchJson(`${API_BASE}/tabs/${id}`, { method: "DELETE", headers: authHeaders() });
}

async function reorderTabsApi(order) {
    return apiFetchJson(`${API_BASE}/tabs/reorder`, {
        method: "POST",
        headers: { "Content-Type": "application/json", ...authHeaders() },
        body: JSON.stringify({ order }),
    });
}

async function resetTabsApi() {
    return apiFetchJson(`${API_BASE}/tabs/reset`, { method: "POST", headers: authHeaders() });
}

function slugify(text) {
    return (text || "").toString().normalize("NFD").replace(/[̀-ͯ]/g, "")
        .toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "onglet";
}

// Clé de la page courante : le paramètre ?cat= prime (pages génériques custom.html),
// sinon le nom de fichier (pages historiques figées).
function getPageKey() {
    const cat = new URLSearchParams(window.location.search).get("cat");
    if (cat) return cat.toLowerCase();
    return window.location.pathname.split("/").pop().replace(".html", "").toLowerCase() || "index";
}

// ==========================================
// INJECTION DU HEADER ET DU MENU
// ==========================================
document.addEventListener("DOMContentLoaded", async () => {
    const tabs = await fetchTabs();

    // index.html porte son propre header/hero statique (page d'accueil) : ne pas dupliquer le bandeau ici.
    if (!document.querySelector("header")) {
        const navLinksHTML = tabs.map(t =>
            `<a href="${t.href}" class="nav-link px-3 py-2 rounded hover:bg-gray-100 font-semibold text-gray-700">${t.icon} ${t.label}</a>`
        ).join("\n            ");

        const headerHTML = `
    <header class="bg-blue-900 text-white py-6 shadow-md">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold">🛠️ Recueil de Bonnes Pratiques</h1>
                <p class="text-blue-200 mt-2">Le guide de survie interactif pour vos projets mécatroniques</p>
            </div>
            <a href="admin.html" id="btn-admin-tool" class="hidden bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg font-semibold shadow-sm transition">⚙️ Outil de Création</a>
        </div>
    </header>
    <nav class="bg-white border-b border-gray-200 sticky top-0 z-10 shadow-sm overflow-x-auto">
        <div class="container mx-auto px-4 flex space-x-2 whitespace-nowrap py-3 text-sm">
            <a href="index.html" class="nav-link px-3 py-2 rounded hover:bg-gray-100 font-semibold text-gray-700">🏠 Accueil</a>
            ${navLinksHTML}
        </div>
    </nav>`;

        document.body.insertAdjacentHTML("afterbegin", headerHTML);

        // Page active (comparaison sur nom de fichier + query string, pour distinguer les pages génériques custom.html?cat=...)
        const currentFull = (window.location.pathname.split("/").pop() || "index.html") + window.location.search;
        document.querySelectorAll(".nav-link").forEach(link => {
            if (link.getAttribute("href").toLowerCase() === currentFull.toLowerCase()) {
                link.classList.add("bg-blue-100", "text-blue-700");
            }
        });
    }

    isAdmin = await checkAdminStatus();
    if (isAdmin) {
        const btn = document.getElementById('btn-admin-tool');
        if (btn) btn.classList.remove('hidden');
    }

    await displayCustomPractices(tabs);
});

// ==========================================
// OUTIL DE CRÉATION — réservé aux administrateurs
// ==========================================
let isAdmin = false;

async function checkAdminStatus() {
    const token = localStorage.getItem('fablab_token');
    if (!token) return false;
    try {
        const r = await fetch('/api/auth/me', { headers: { Authorization: 'Bearer ' + token } });
        if (!r.ok) return false;
        const account = await r.json();
        return account.role === 'admin';
    } catch (e) { return false; /* portail hors ligne : accès refusé par défaut */ }
}

// ==========================================
// PRATIQUES PERSONNALISÉES
// ==========================================
// Cache de la dernière liste affichée sur cette page — permet à l'édition
// (openEditPracticeModal) de retrouver une règle par id sans refaire un appel réseau.
let currentPagePractices = [];

async function displayCustomPractices(tabs) {
    // Pages génériques (custom.html?cat=...) : la catégorie est directement le paramètre ?cat=.
    // Pages historiques figées (elec.html, ...) : la catégorie est résolue via la liste des onglets.
    const genericTarget = document.getElementById("custom-tab-content");
    const pageKey = getPageKey();
    const category = genericTarget ? pageKey : (tabs.find(t => t.pageKey.toLowerCase() === pageKey) || {}).category;
    if (!category) return;

    let practices = [];
    try {
        const r = await fetch(`${API_BASE}/practices?category=${encodeURIComponent(category)}`);
        if (r.ok) practices = await r.json();
    } catch (e) { /* backend indisponible */ }
    currentPagePractices = practices;

    practices.forEach(practice => {
        const target = genericTarget || document.getElementById(`custom-${practice.category}`);
        if (!target) return;
        let mediaHTML = "";
        if (practice.image_url) mediaHTML += `<div class="mt-3"><img src="/api${practice.image_url}" class="max-h-60 rounded-lg border border-gray-200 shadow-sm" alt="Illustration"></div>`;
        if (practice.link) {
            const linkText = (practice.link.includes("youtube.com") || practice.link.includes("youtu.be")) ? "📺 Voir le tutoriel Vidéo" : "🔗 Lien explicatif / Documentation";
            mediaHTML += `<div class="mt-3"><a href="${practice.link}" target="_blank" class="inline-flex items-center text-sm font-semibold text-blue-600 hover:text-blue-800 hover:underline">${linkText} →</a></div>`;
        }
        const adminControlsHTML = isAdmin ? `
                <div class="mt-3 pt-3 border-t border-amber-100 flex gap-2">
                    <button onclick="openEditPracticeModal('${practice.id}')" class="text-xs bg-blue-50 text-blue-700 hover:bg-blue-100 px-3 py-1.5 rounded font-semibold transition">✏️ Modifier</button>
                    <button onclick="deleteCustomPractice('${practice.id}')" class="text-xs bg-red-50 text-red-600 hover:bg-red-100 px-3 py-1.5 rounded font-semibold transition">🗑️ Supprimer</button>
                </div>` : "";
        target.insertAdjacentHTML("beforeend", `
            <div class="practice-card bg-white p-6 rounded-lg shadow-sm border-2 border-amber-200 my-4">
                <h3 class="text-lg font-semibold text-blue-900 mt-2 mb-2">${practice.title}</h3>
                <p class="text-sm text-gray-600 mb-4">${practice.description}</p>
                <ul class="space-y-3 mb-3">
                    <li class="flex items-start">
                        <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-blue-600 rounded border-gray-300">
                        <span>${practice.checklist}</span>
                    </li>
                </ul>
                ${mediaHTML}
                ${adminControlsHTML}
            </div>`);
    });
}

// ==========================================
// ÉDITION / SUPPRESSION D'UNE RÈGLE — directement depuis un onglet (admin)
// ==========================================
async function deleteCustomPractice(id) {
    if (!confirm('Supprimer cette règle ?')) return;
    try {
        await apiFetchJson(`${API_BASE}/practices/${id}`, { method: 'DELETE', headers: authHeaders() });
        location.reload();
    } catch (e) { alert(e.message); }
}

let epmImageBase64 = '';
let epmImageCleared = false;

function ensureEditPracticeModal() {
    if (document.getElementById('edit-practice-modal')) return;
    document.body.insertAdjacentHTML('beforeend', `
    <div id="edit-practice-modal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-lg max-w-lg w-full p-6 shadow-xl space-y-4 max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center border-b pb-3">
                <h3 class="text-lg font-bold text-blue-900">✏️ Modifier la règle</h3>
                <button onclick="closeEditPracticeModal()" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <input type="hidden" id="epm-id" value="">
            <div class="space-y-3">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Titre de la règle</label>
                    <input type="text" id="epm-title" class="w-full p-2 border rounded-lg bg-gray-50 focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Explication / Description</label>
                    <textarea id="epm-description" rows="3" class="w-full p-2 border rounded-lg bg-gray-50 focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Élément de validation (Checklist)</label>
                    <input type="text" id="epm-checklist" class="w-full p-2 border rounded-lg bg-gray-50 focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Illustration (image .jpg / .png)</label>
                    <input type="file" id="epm-image-file" accept="image/*"
                        class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <div id="epm-image-preview" class="mt-2 hidden">
                        <img id="epm-preview-img" src="" class="max-h-32 rounded border border-gray-200">
                        <button onclick="clearEpmImage()" class="text-xs text-red-500 mt-1 block hover:underline">✕ Supprimer l'image</button>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Lien (YouTube, documentation…)</label>
                    <input type="url" id="epm-link" placeholder="https://www.youtube.com/watch?v=..." class="w-full p-2 border rounded-lg bg-gray-50 focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex gap-2 pt-2">
                    <button onclick="saveEditedPractice()" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow transition">💾 Enregistrer</button>
                    <button onclick="closeEditPracticeModal()" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-lg transition">Annuler</button>
                </div>
            </div>
        </div>
    </div>`);
    document.getElementById('epm-image-file').addEventListener('change', function () {
        const file = this.files[0]; if (!file) return;
        epmImageCleared = false;
        const reader = new FileReader();
        reader.onloadend = () => {
            epmImageBase64 = reader.result;
            document.getElementById('epm-preview-img').src = reader.result;
            document.getElementById('epm-image-preview').classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    });
}

function clearEpmImage() {
    epmImageBase64 = '';
    epmImageCleared = true;
    document.getElementById('epm-image-file').value = '';
    document.getElementById('epm-image-preview').classList.add('hidden');
}

function openEditPracticeModal(id) {
    const p = currentPagePractices.find(x => x.id === id);
    if (!p) return;
    ensureEditPracticeModal();
    document.getElementById('epm-id').value = id;
    document.getElementById('epm-title').value = p.title;
    document.getElementById('epm-description').value = p.description;
    document.getElementById('epm-checklist').value = p.checklist;
    document.getElementById('epm-link').value = p.link || '';
    epmImageBase64 = '';
    epmImageCleared = false;
    document.getElementById('epm-image-file').value = '';
    const preview = document.getElementById('epm-image-preview');
    if (p.image_url) {
        document.getElementById('epm-preview-img').src = '/api' + p.image_url;
        preview.classList.remove('hidden');
    } else {
        preview.classList.add('hidden');
    }
    document.getElementById('edit-practice-modal').classList.remove('hidden');
}

function closeEditPracticeModal() {
    const m = document.getElementById('edit-practice-modal');
    if (m) m.classList.add('hidden');
}

async function saveEditedPractice() {
    const id = document.getElementById('epm-id').value;
    const title = document.getElementById('epm-title').value.trim();
    const description = document.getElementById('epm-description').value.trim();
    const checklist = document.getElementById('epm-checklist').value.trim();
    if (!title || !description || !checklist) { alert('Remplissez tous les champs obligatoires.'); return; }
    const body = { title, description, checklist, link: document.getElementById('epm-link').value.trim() };
    if (epmImageCleared) body.clear_image = true;
    else if (epmImageBase64) body.image = epmImageBase64;
    try {
        await apiFetchJson(`${API_BASE}/practices/${id}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json', ...authHeaders() },
            body: JSON.stringify(body),
        });
        closeEditPracticeModal();
        location.reload();
    } catch (e) { alert(e.message); }
}

// ==========================================
// TEMPLATES
// ==========================================
// Templates statiques fournis avec le site (fichiers réels dans templates/, pas en base).
const DEFAULT_TEMPLATES = [
    { id: "default-fiche-test", name: "Fiche de Test", description: "Gabarit Word pour documenter un protocole de test.", fileName: "Fiche_de_Test_Template.docx", fileUrl: "templates/Fiche_de_Test_Template.docx", pages: ["CAO-methodo", "CAO-dfm"] },
    { id: "default-suivi-nc", name: "Suivi Non-Conformités", description: "Gabarit Excel pour le suivi des non-conformités.", fileName: "Suivi_Non_Conformites.xlsx", fileUrl: "templates/Suivi_Non_Conformites.xlsx", pages: ["CAO-methodo", "CAO-dfm"] },
];

// Icône selon extension
function templateIcon(fileName) {
    const ext = (fileName || '').split('.').pop().toLowerCase();
    const icons = { pdf: '📄', docx: '📝', doc: '📝', xlsx: '📊', xls: '📊', csv: '📋', pptx: '📑', ppt: '📑' };
    return icons[ext] || '📎';
}

// Templates visibles pour une page donnée : gabarits statiques du site + templates ajoutés via l'Outil de Création (API).
async function getVisibleTemplates(pageKey) {
    const defaults = DEFAULT_TEMPLATES.filter(t => t.pages.includes(pageKey));
    let custom = [];
    try {
        const r = await fetch(`${API_BASE}/templates?page=${encodeURIComponent(pageKey)}`);
        if (r.ok) {
            const data = await r.json();
            custom = data.map(t => ({
                id: t.id, name: t.name, description: t.description,
                fileName: t.file_name, fileUrl: '/api' + t.download_url,
            }));
        }
    } catch (e) { /* backend indisponible */ }
    return [...defaults, ...custom];
}

function renderTemplateListInto(container, visible) {
    if (visible.length === 0) {
        container.innerHTML = '<p class="text-gray-400 italic">Aucun template disponible pour cette section.<br>Ajoutez-en via l\'Outil de Création.</p>';
        return;
    }
    container.innerHTML = visible.map(t => `
        <div class="flex items-center justify-between bg-gray-50 border border-gray-100 rounded-lg p-2 gap-2">
            <div class="flex items-start gap-2 flex-1 min-w-0">
                <span class="text-lg">${templateIcon(t.fileName)}</span>
                <div class="min-w-0">
                    <p class="font-semibold text-gray-800 truncate">${t.name}</p>
                    ${t.description ? `<p class="text-gray-500 text-xs mt-0.5 truncate">${t.description}</p>` : ''}
                </div>
            </div>
            <a href="${t.fileUrl}" download class="shrink-0 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold px-3 py-1.5 rounded transition">⬇️ DL</a>
        </div>`).join('');
}

// ==========================================
// RECHERCHE IN-PAGE
// ==========================================
function filterPagePractices() {
    const input = document.getElementById('search-bar');
    if (!input) return;
    const query = input.value.toLowerCase();
    let visible = 0;
    document.querySelectorAll('.practice-card').forEach(card => {
        const match = card.innerText.toLowerCase().includes(query);
        card.style.display = match ? '' : 'none';
        if (match) visible++;
    });
    const noResults = document.getElementById('no-results');
    if (noResults) noResults.classList.toggle('hidden', visible > 0 || query === '');
}

// ==========================================
// QUIZ
// ==========================================
let currentQuizQuestions = [];
let currentQuestionIndex = 0;
let score = 0;
let currentQuizPageKey = null;

async function openQuiz(pageKey) {
    ensureQuizModal();
    const key = pageKey || getPageKey();
    let questions = [];
    try {
        const r = await fetch(`${API_BASE}/quiz?page=${encodeURIComponent(key)}`);
        if (r.ok) questions = await r.json();
    } catch (e) { /* backend indisponible */ }
    if (!questions.length) {
        alert(`Aucun quiz configuré pour cette page (clé : "${key}").`);
        return;
    }
    currentQuizQuestions = questions.map(q => ({
        question: q.question,
        answers: q.answers.map(a => ({ text: a.text, isCorrect: a.is_correct, rationale: a.rationale })),
    })).sort(() => Math.random() - 0.5);
    currentQuestionIndex = 0; score = 0;
    currentQuizPageKey = key;
    document.getElementById("modal-quizz").classList.remove("hidden");
    const tabs = await fetchTabs();
    const tab = tabs.find(t => t.pageKey === key);
    document.getElementById("quiz-title").textContent = `Quiz : ${tab ? tab.label : key.toUpperCase()}`;
    displayQuestion();
}

function closeQuiz() { document.getElementById("modal-quizz").classList.add("hidden"); }

function displayQuestion() {
    const q = currentQuizQuestions[currentQuestionIndex];
    document.getElementById("quiz-progress").textContent = `Question ${currentQuestionIndex+1}/${currentQuizQuestions.length} — Score : ${score}/${currentQuestionIndex}`;
    document.getElementById("btn-next-quiz").classList.add("hidden");
    const shuffled = [...q.answers].sort(() => Math.random() - 0.5);
    document.getElementById("quiz-body").innerHTML = `
        <p class="font-semibold text-gray-800 text-base">${q.question}</p>
        <div id="answers-container" class="space-y-2 mt-3">
            ${shuffled.map(a => `
                <button onclick="submitAnswer(this, ${a.isCorrect}, \`${a.rationale.replace(/`/g,"'")}\`)"
                    class="answer-btn w-full text-left px-4 py-3 rounded-lg border border-gray-200 bg-gray-50 hover:bg-blue-50 hover:border-blue-400 text-sm transition font-medium">
                    ${a.text}
                </button>`).join('')}
        </div>
        <div id="quiz-feedback" class="hidden mt-3 p-3 rounded text-sm font-medium"></div>`;
}

function submitAnswer(btn, isCorrect, rationale) {
    document.querySelectorAll(".answer-btn").forEach(b => { b.disabled = true; b.classList.remove("hover:bg-blue-50","hover:border-blue-400"); });
    const fb = document.getElementById("quiz-feedback");
    fb.classList.remove("hidden");
    if (isCorrect) {
        btn.classList.add("bg-green-100","border-green-500","text-green-800");
        fb.className = "mt-3 p-3 rounded text-sm font-medium bg-green-50 text-green-800 border border-green-200";
        fb.innerHTML = `✅ <strong>Correct !</strong> ${rationale}`;
        score++;
    } else {
        btn.classList.add("bg-red-100","border-red-500","text-red-800");
        fb.className = "mt-3 p-3 rounded text-sm font-medium bg-red-50 text-red-800 border border-red-200";
        fb.innerHTML = `❌ <strong>Incorrect.</strong> ${rationale}`;
    }
    document.getElementById("quiz-progress").textContent = `Question ${currentQuestionIndex+1}/${currentQuizQuestions.length} — Score : ${score}/${currentQuestionIndex+1}`;
    const nb = document.getElementById("btn-next-quiz");
    nb.textContent = currentQuestionIndex < currentQuizQuestions.length-1 ? "Question suivante ➡️" : "Voir le résultat 🏁";
    nb.classList.remove("hidden");
}

function nextQuestion() {
    currentQuestionIndex++;
    if (currentQuestionIndex < currentQuizQuestions.length) {
        displayQuestion();
    } else {
        const pct = Math.round(score / currentQuizQuestions.length * 100);
        const emoji = pct >= 80 ? '🏆' : pct >= 50 ? '👍' : '📖';
        const msg = pct >= 80 ? 'Excellent !' : pct >= 50 ? 'Pas mal !' : 'À retravailler.';
        document.getElementById("quiz-body").innerHTML = `
            <div class="text-center py-6 space-y-4">
                <p class="text-5xl">${emoji}</p>
                <p class="text-2xl font-bold text-gray-800">${msg}</p>
                <p class="text-gray-600">Score final : <strong class="text-blue-700">${score}/${currentQuizQuestions.length}</strong> (${pct}%)</p>
                <button onclick="openQuiz('${currentQuizPageKey}')" class="mt-4 bg-indigo-600 text-white px-5 py-2 rounded-lg font-semibold hover:bg-indigo-700 transition">🔁 Rejouer</button>
            </div>`;
        document.getElementById("btn-next-quiz").classList.add("hidden");
        document.getElementById("quiz-progress").textContent = "Quiz terminé";
    }
}

// ==========================================
// UTILITAIRES
// ==========================================
function toggleModal(id) { document.getElementById(id).classList.toggle('hidden'); }

// ==========================================
// MODALES QUIZ / TEMPLATES — injectées à la demande (accueil uniquement désormais)
// ==========================================
function ensureQuizModal() {
    if (document.getElementById('modal-quizz')) return;
    document.body.insertAdjacentHTML('beforeend', `
    <div id="modal-quizz" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full p-6 shadow-xl space-y-4">
            <div class="flex justify-between items-center border-b pb-3">
                <h3 class="text-xl font-bold text-indigo-900 flex items-center gap-2">🧠 <span id="quiz-title">Validation des connaissances</span></h3>
                <button onclick="closeQuiz()" class="text-gray-400 hover:text-gray-600 text-2xl font-bold">&times;</button>
            </div>
            <div id="quiz-body" class="space-y-4 max-h-[60vh] overflow-y-auto pr-2"></div>
            <div class="flex justify-between items-center border-t pt-3 text-xs">
                <span id="quiz-progress" class="text-gray-500 font-medium">Question 1 sur ?</span>
                <button id="btn-next-quiz" onclick="nextQuestion()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded shadow transition hidden">Question suivante ➡️</button>
            </div>
        </div>
    </div>`);
}

function ensureTemplateModal() {
    if (document.getElementById('modal-template')) return;
    document.body.insertAdjacentHTML('beforeend', `
    <div id="modal-template" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6 shadow-xl space-y-4">
            <div class="flex justify-between items-center border-b pb-2">
                <h3 id="template-modal-heading" class="text-lg font-bold text-green-900">📂 Templates disponibles</h3>
                <button onclick="toggleModal('modal-template')" class="text-gray-400 hover:text-gray-600 text-xl font-bold">&times;</button>
            </div>
            <div id="template-modal-list" class="space-y-2 text-xs max-h-80 overflow-y-auto"></div>
        </div>
    </div>`);
}

async function showTemplatesModalForDomain(pageKey) {
    ensureTemplateModal();
    const tabs = await fetchTabs();
    const tab = tabs.find(t => t.pageKey === pageKey);
    const heading = document.getElementById('template-modal-heading');
    if (heading) heading.textContent = `📂 Templates — ${tab ? tab.label : pageKey}`;
    renderTemplateListInto(document.getElementById('template-modal-list'), await getVisibleTemplates(pageKey));
    document.getElementById('modal-template').classList.remove('hidden');
}

// ==========================================
// SÉLECTEUR DE DOMAINE — page d'accueil
// ==========================================
function ensureDomainPickerModal() {
    if (document.getElementById('domain-picker-modal')) return;
    document.body.insertAdjacentHTML('beforeend', `
    <div id="domain-picker-modal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-6 shadow-xl space-y-4 max-h-[80vh] overflow-y-auto">
            <div class="flex justify-between items-center border-b pb-2">
                <h3 id="domain-picker-title" class="text-lg font-bold text-blue-900">Choisir un domaine</h3>
                <button onclick="closeDomainPicker()" class="text-gray-400 hover:text-gray-600 text-xl font-bold">&times;</button>
            </div>
            <div id="domain-picker-list" class="space-y-2"></div>
        </div>
    </div>`);
}

async function openDomainPicker(mode) {
    ensureDomainPickerModal();
    const tabs = await fetchTabs();
    document.getElementById('domain-picker-title').textContent = mode === 'quiz' ? '🧠 Choisir un domaine pour le quiz' : '📂 Choisir un domaine pour les templates';
    document.getElementById('domain-picker-list').innerHTML = tabs.map(t => `
        <button onclick="selectDomain('${t.pageKey}','${mode}')" class="w-full text-left flex items-center gap-3 bg-gray-50 hover:bg-blue-50 border border-gray-100 hover:border-blue-300 rounded-lg px-3 py-2.5 transition">
            <span class="text-xl">${t.icon}</span>
            <span class="font-semibold text-gray-800 text-sm">${t.label}</span>
        </button>`).join('');
    document.getElementById('domain-picker-modal').classList.remove('hidden');
}

function closeDomainPicker() {
    const m = document.getElementById('domain-picker-modal');
    if (m) m.classList.add('hidden');
}

function selectDomain(pageKey, mode) {
    closeDomainPicker();
    if (mode === 'quiz') openQuiz(pageKey);
    else showTemplatesModalForDomain(pageKey);
}