// import React, { useState, useEffect, useRef, useMemo } from "react"; // import { CheckCircle2, XCircle, Clock, LayoutGrid, ChevronLeft, ChevronRight, Loader2, X } from "lucide-react"; // --------------------------------------------------------------------------- // Programme officiel : 12 thèmes, répartition réelle 33 questions type A / 87 type C // --------------------------------------------------------------------------- const THEMES = [ { id: 1, name: "Cadre institutionnel et réglementaire", totalA: 6, totalC: 4 }, { id: 2, name: "Déontologie et conformité", totalA: 6, totalC: 4 }, { id: 3, name: "Sécurité financière (LCB-FT, embargos)", totalA: 5, totalC: 5 }, { id: 4, name: "Réglementation abus de marché", totalA: 5, totalC: 5 }, { id: 5, name: "Commercialisation d'instruments financiers", totalA: 6, totalC: 4 }, { id: 6, name: "Relations avec les clients", totalA: 5, totalC: 5 }, { id: 7, name: "Instruments financiers et crypto-actifs", totalA: 0, totalC: 10 }, { id: 8, name: "Gestion collective / compte de tiers", totalA: 0, totalC: 10 }, { id: 9, name: "Fonctionnement et organisation des marchés", totalA: 0, totalC: 10 }, { id: 10, name: "Post-marché et infrastructures de marché", totalA: 0, totalC: 10 }, { id: 11, name: "Émissions et opérations sur titres", totalA: 0, totalC: 10 }, { id: 12, name: "Bases comptables et financières", totalA: 0, totalC: 10 }, ]; const SYSTEM_PROMPT = `Tu es un générateur de questions pour un examen blanc de la Certification AMF (Autorité des Marchés Financiers), dans des conditions au moins aussi exigeantes que l'examen officiel réel. RÈGLES DE FORMAT : - Chaque question a exactement 3 propositions de réponse, une seule correcte. - Respecte strictement le nombre de questions de type A et de type C demandé pour ce lot. - Reste concis : question en une phrase, chaque proposition en moins de 15 mots, explication en une phrase courte. La réponse doit rester compacte, sans texte superflu. - Varie la position de la bonne réponse (correctIndex 0, 1 ou 2) de façon équilibrée d'une question à l'autre — ne mets pas systématiquement la bonne réponse en position 0. STYLE DES QUESTIONS (calibre la difficulté au moins au niveau de l'examen réel, ne génère jamais de question triviale) : - Type A : précises et factuelles — définitions réglementaires exactes, obligations légales d'un acteur, rôle d'une autorité, seuils et délais. Registre proche de : "Une société de gestion est tenue à certaines obligations en matière d'information : quelle proposition est exacte ?" - Type C : culture financière et technique — mécanismes de marché, calculs simples, notions économiques. Registre proche de : "Un ordre à cours limité garantit-il l'exécution ?" - Les distracteurs doivent être plausibles et proches de la bonne réponse, jamais absurdes. Utilise les pièges classiques : négation inversée, exception à une règle générale, confusion entre deux notions voisines, seuil ou délai légèrement erroné. - N'invente aucun numéro d'article réglementaire précis — reste sur le fond des règles. CONTRAINTE CRITIQUE : réponds UNIQUEMENT avec un JSON valide, sans texte avant ni après, sans balises markdown, au format : { "questions": [ { "type": "A ou C", "question": "texte de la question", "choices": ["proposition 1", "proposition 2", "proposition 3"], "correctIndex": 0, "explanation": "justification en une phrase courte, 20 mots maximum" } ] }`; function buildBatches() { const CHUNK_SIZE = 4; const batches = []; THEMES.forEach((theme) => { const items = [ ...Array(theme.totalA).fill("A"), ...Array(theme.totalC).fill("C"), ]; const numChunks = Math.ceil(items.length / CHUNK_SIZE); const chunks = Array.from({ length: numChunks }, () => []); items.forEach((t, i) => chunks[i % numChunks].push(t)); chunks.forEach((types) => { if (types.length > 0) { batches.push({ theme: theme.name, themeId: theme.id, aCount: types.filter((t) => t === "A").length, cCount: types.filter((t) => t === "C").length, }); } }); }); return batches; } async function generateBatch(batch) { const userMsg = `Thème : "${batch.theme}". Génère exactement ${batch.aCount} question(s) de type A et ${batch.cCount} question(s) de type C sur ce thème (total ${batch.aCount + batch.cCount} questions).`; const response = await fetch("/api/generate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ temperature: 0.1, messages: [ { role: "system", content: SYSTEM_PROMPT }, { role: "user", content: userMsg } ], }), }); if (!response.ok) { const errBody = await response.text().catch(() => ""); throw new Error(`HTTP ${response.status} ${response.statusText} — ${errBody.slice(0, 300)}`); } const data = await response.json(); if (data.error) { throw new Error(`API error: ${data.error.message || JSON.stringify(data.error).slice(0, 300)}`); } const text = data.choices[0].message.content; if (!text) { throw new Error(`Réponse vide ou inattendue: ${JSON.stringify(data).slice(0, 400)}`); } let clean = text.replace(/```json|```/g, "").trim(); const firstBrace = clean.indexOf("{"); const lastBrace = clean.lastIndexOf("}"); if (firstBrace !== -1 && lastBrace !== -1) { clean = clean.slice(firstBrace, lastBrace + 1); } let parsed; try { parsed = JSON.parse(clean); } catch (e) { throw new Error(`JSON invalide (${e.message}). Extrait: ${clean.slice(0, 300)}`); } if (!parsed.questions || !Array.isArray(parsed.questions)) { throw new Error(`Champ "questions" manquant. Extrait: ${clean.slice(0, 300)}`); } return parsed.questions.map((q) => shuffleChoices({ ...q, theme: batch.theme, themeId: batch.themeId })); } // Mélange l'ordre des 3 propositions pour éviter tout biais de position de la bonne réponse // (le modèle a tendance à imiter l'exemple du schéma, où la bonne réponse est en position 0) function shuffleChoices(q) { const order = [0, 1, 2]; for (let i = order.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [order[i], order[j]] = [order[j], order[i]]; } const choices = order.map((idx) => q.choices[idx]); const correctIndex = order.indexOf(q.correctIndex); return { ...q, choices, correctIndex }; } async function generateBatchWithRetry(batch, attempts = 2) { let lastErr; for (let i = 0; i < attempts; i++) { try { return await generateBatch(batch); } catch (e) { lastErr = e; } } throw lastErr; } function formatTime(totalSeconds) { const h = Math.floor(totalSeconds / 3600); const m = Math.floor((totalSeconds % 3600) / 60); const s = totalSeconds % 60; return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`; } // --------------------------------------------------------------------------- // Styles — classes CSS explicites (pas de couleurs Tailwind arbitraires) // --------------------------------------------------------------------------- function GlobalStyles() { return ( ); } function Seal({ label, tone = "ink" }) { const toneClass = tone === "success" ? "amf-seal-success" : tone === "fail" ? "amf-seal-fail" : "amf-seal-ink"; return (
{label}
); } function AMFExam() { const [screen, setScreen] = useState("start"); const [questions, setQuestions] = useState([]); const [answers, setAnswers] = useState({}); const [current, setCurrent] = useState(0); const [navOpen, setNavOpen] = useState(false); const [progress, setProgress] = useState({ done: 0, total: 0, label: "" }); const [genError, setGenError] = useState(null); const [remaining, setRemaining] = useState(7200); const [confirmSubmit, setConfirmSubmit] = useState(false); const timerRef = useRef(null); const [dbSize, setDbSize] = useState(0); const [examSize, setExamSize] = useState(120); const [generateCount, setGenerateCount] = useState(120); // Automatically keep generateCount within bounds of the selected examSize useEffect(() => { setGenerateCount(prev => Math.min(prev, examSize)); }, [examSize]); useEffect(() => { if (screen === "exam") { timerRef.current = setInterval(() => { setRemaining((r) => (r > 0 ? r - 1 : 0)); }, 1000); return () => clearInterval(timerRef.current); } }, [screen]); useEffect(() => { // Fetch database size from the server on load fetch("/api/db") .then(res => res.json()) .then(data => { if (data && Array.isArray(data.questions)) { setDbSize(data.questions.length); } }) .catch(err => console.error("Could not fetch DB info", err)); }, [screen]); // Proportional distribution calculator const calculateRequirements = (totalTarget) => { // 1. Get base floor values let allocated = 0; const reqs = {}; const remainders = []; THEMES.forEach(theme => { const scaleA = (theme.totalA * totalTarget) / 120; const scaleC = (theme.totalC * totalTarget) / 120; const floorA = Math.floor(scaleA); const floorC = Math.floor(scaleC); reqs[theme.id] = { A: floorA, C: floorC }; allocated += (floorA + floorC); remainders.push({ id: theme.id, type: 'A', value: scaleA - floorA }); remainders.push({ id: theme.id, type: 'C', value: scaleC - floorC }); }); // 2. Distribute remainders to top fractional parts to reach exact target remainders.sort((a, b) => b.value - a.value); let idx = 0; while (allocated < totalTarget && idx < remainders.length) { const item = remainders[idx]; reqs[item.id][item.type]++; allocated++; idx++; } return reqs; }; const startGeneration = async () => { setScreen("generating"); setGenError(null); // 1. Fetch the full questions database let dbQuestions = []; try { const res = await fetch("/api/db"); const data = await res.json(); dbQuestions = data.questions || []; } catch (e) { console.warn("Could not load local database", e); } // 2. Map available DB questions by Theme ID and Type (A/C) const dbMap = {}; THEMES.forEach(t => { dbMap[t.id] = { A: [], C: [] }; }); dbQuestions.forEach(q => { let matchedTheme = THEMES.find(t => t.id === q.themeId); if (!matchedTheme && q.theme) { matchedTheme = THEMES.find(t => t.name.toLowerCase().trim() === q.theme.toLowerCase().trim()); } if (matchedTheme && (q.type === 'A' || q.type === 'C')) { dbMap[matchedTheme.id][q.type].push({ ...q, themeId: matchedTheme.id }); } }); // Determine how many questions are fetched from DB vs generated const fillFromDbCount = examSize - generateCount; let filledFromDb = 0; const chosenDbQuestions = []; const requirements = calculateRequirements(examSize); // Randomly pick from DB questions if we still have budget for DB fill // Shuffle helper const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5); // Attempt to pull questions from DB for each theme/type if (fillFromDbCount > 0) { // Collect all potential DB targets const pool = []; THEMES.forEach(theme => { ['A', 'C'].forEach(type => { const list = dbMap[theme.id][type]; list.forEach(q => { pool.push({ themeId: theme.id, type, questionObj: q }); }); }); }); shuffleArray(pool); for (let item of pool) { if (filledFromDb >= fillFromDbCount) break; const req = requirements[item.themeId]; if (req[item.type] > 0) { req[item.type]--; chosenDbQuestions.push({ ...item.questionObj, theme: THEMES.find(t => t.id === item.themeId).name, themeId: item.themeId }); filledFromDb++; } } } // Now, we must generate what is left in the requirements map! const batchesToGenerate = []; THEMES.forEach(theme => { const neededA = requirements[theme.id].A; const neededC = requirements[theme.id].C; if (neededA > 0 || neededC > 0) { // Build batches of CHUNK_SIZE = 4 const items = [ ...Array(neededA).fill("A"), ...Array(neededC).fill("C"), ]; const CHUNK_SIZE = 4; const numChunks = Math.ceil(items.length / CHUNK_SIZE); const chunks = Array.from({ length: numChunks }, () => []); items.forEach((t, i) => chunks[i % numChunks].push(t)); chunks.forEach((types) => { if (types.length > 0) { batchesToGenerate.push({ theme: theme.name, themeId: theme.id, aCount: types.filter((t) => t === "A").length, cCount: types.filter((t) => t === "C").length, }); } }); } }); if (batchesToGenerate.length === 0) { shuffleArray(chosenDbQuestions); chosenDbQuestions.forEach((q, idx) => { q.id = idx + 1; }); setQuestions(chosenDbQuestions); setScreen("exam"); return; } setProgress({ done: 0, total: batchesToGenerate.length, label: "Initialisation" }); const allGen = [...chosenDbQuestions]; let idCounter = allGen.length + 1; try { for (let i = 0; i < batchesToGenerate.length; i++) { setProgress({ done: i, total: batchesToGenerate.length, label: batchesToGenerate[i].theme }); const qs = await generateBatchWithRetry(batchesToGenerate[i]); qs.forEach((q) => allGen.push({ ...q, id: idCounter++ })); } setProgress({ done: batchesToGenerate.length, total: batchesToGenerate.length, label: "Terminé" }); // Shuffle final set of 120 questions to mix DB and generated ones shuffleArray(allGen); // Re-index IDs allGen.forEach((q, idx) => { q.id = idx + 1; }); setQuestions(allGen); setScreen("exam"); } catch (e) { setGenError(`Échec de la génération — ${e.message || e}`); setScreen("start"); } }; const selectAnswer = (qId, idx) => { setAnswers((prev) => ({ ...prev, [qId]: idx })); }; const answeredCount = Object.keys(answers).length; const q = questions[current]; const results = useMemo(() => { if (screen !== "results") return null; const scored = questions.map((qq) => ({ ...qq, userAnswer: answers[qq.id], isCorrect: answers[qq.id] === qq.correctIndex, })); const aQs = scored.filter((x) => x.type === "A"); const cQs = scored.filter((x) => x.type === "C"); const aCorrect = aQs.filter((x) => x.isCorrect).length; const cCorrect = cQs.filter((x) => x.isCorrect).length; const aPct = aQs.length ? (aCorrect / aQs.length) * 100 : 0; const cPct = cQs.length ? (cCorrect / cQs.length) * 100 : 0; const passed = aPct >= 80 && cPct >= 80; const byTheme = THEMES.map((t) => { const items = scored.filter((x) => x.themeId === t.id); const correct = items.filter((x) => x.isCorrect).length; return { ...t, correct, total: items.length }; }); return { scored, aQs, cQs, aCorrect, cCorrect, aPct, cPct, passed, byTheme }; }, [screen, questions, answers]); // ---------------------------------------------------------------- START if (screen === "start") { return (

Examen blanc

Certification AMF

{dbSize > 0 && (
Générer avec l'IA : {generateCount} Piocher dans la BDD : {examSize - generateCount}
setGenerateCount(Number(e.target.value))} style={{ width: "100%", cursor: "pointer", accentColor: "#9C7A3C" }} />

Génère de nouvelles questions en complétant avec les questions existantes de votre BDD.

)} {genError &&

{genError}

} {generateCount > 0 && (

La génération des questions IA prendra environ {Math.ceil(generateCount / 4 * 4)} secondes.

)}
); } // ---------------------------------------------------------------- GENERATING if (screen === "generating") { const pct = progress.total ? Math.round((progress.done / progress.total) * 100) : 0; return (

Génération de l'examen

{progress.label || "Préparation…"}

{progress.done}/{progress.total} lots générés

); } // ---------------------------------------------------------------- EXAM if (screen === "exam" && q) { return (

Examen blanc AMF

Question {current + 1} / {questions.length}

{formatTime(remaining)}
Type {q.type} {q.theme}

{q.question}

{q.choices.map((choice, idx) => { const userSelected = answers[q.id] === idx; const hasAnswered = answers[q.id] !== undefined; const isCorrect = idx === q.correctIndex; let cls = ""; if (hasAnswered) { if (isCorrect) { cls = "amf-choice-correct"; } else if (userSelected) { cls = "amf-choice-wrong"; } else { cls = "amf-choice-neutral"; } } else if (userSelected) { cls = "selected"; } return ( ); })}
{answers[q.id] !== undefined && (

Explication : {q.explanation}

{current < questions.length - 1 && ( )}
)}

{answeredCount} / {questions.length} répondues

{navOpen && (
setNavOpen(false)}>
e.stopPropagation()}>

Plan de l'examen

{questions.map((qq, idx) => { const answered = answers[qq.id] !== undefined; const isCurrent = idx === current; return ( ); })}
)} {confirmSubmit && (

Terminer l'examen ?

{answeredCount} question(s) répondue(s) sur {questions.length}.

{answeredCount < questions.length && (

{questions.length - answeredCount} question(s) sans réponse seront comptées comme incorrectes.

)}
)}
); } // ---------------------------------------------------------------- RESULTS if (screen === "results" && results) { return ; } return null; } function Row({ label, value }) { return (
{label} {value}
); } function ResultsScreen({ results }) { const { scored, aCorrect, cCorrect, aQs, cQs, aPct, cPct, passed, byTheme } = results; const [filter, setFilter] = useState("errors"); const shown = filter === "errors" ? scored.filter((s) => !s.isCorrect) : scored; return (

Résultat

{passed ? "Admis" : "Ajourné"}

Seuil requis : 80% sur chaque bloc, sans compensation.

Détail par thème

{byTheme.map((t) => { const pct = t.total ? Math.round((t.correct / t.total) * 100) : 0; return (
{t.id}. {t.name} {t.correct}/{t.total}
= 80 ? "amf-fill-success" : "amf-fill-fail"} style={{ height: "100%", width: `${pct}%` }} />
); })}

Correction détaillée

{shown.length === 0 &&

Aucune erreur sur cette sélection.

} {shown.map((s) => (
{s.isCorrect ? : } Type {s.type} {s.theme}

{s.question}

{s.choices.map((c, idx) => { const isCorrectChoice = idx === s.correctIndex; const isUserChoice = idx === s.userAnswer; const cls = isCorrectChoice ? "amf-choice-correct" : isUserChoice ? "amf-choice-wrong" : "amf-choice-neutral"; return (
{c} {isUserChoice && !isCorrectChoice && (votre réponse)}
); })}

{s.explanation}

))}
); } function ScoreCard({ label, correct, total, pct }) { const ok = pct >= 80; return (

{label}

{Math.round(pct)}% {correct}/{total}

Seuil requis : 80%

); }