@props(['data'])

@php
    $rawQuestions = is_array($data) ? ($data['questions'] ?? []) : [];
    $intro = $data['intro'] ?? "Vérifiez vos acquis de la journée. Les questions et les réponses sont mélangées à chaque tentative.";
    // Nombre de questions à tirer (défaut : toutes). Permet un pool > nb affiché.
    $pick = (int) ($data['pick'] ?? count($rawQuestions));

    // Normaliser : on suit la bonne réponse par son TEXTE (résiste au mélange des options).
    $pool = collect($rawQuestions)->map(function ($q) {
        $options = $q['options'] ?? [];
        $answerIdx = $q['answer'] ?? 0;
        return [
            'q' => $q['q'] ?? '',
            'options' => array_values($options),
            'correct' => $options[$answerIdx] ?? null,
            'explain' => $q['explain'] ?? '',
        ];
    })->values()->all();
@endphp

@if (count($pool))
<div x-data="quiz({{ \Illuminate\Support\Js::from($pool) }}, {{ $pick }})" x-init="build()" class="mt-8">
    <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        {{-- En-tête --}}
        <div class="flex items-center gap-3">
            <span class="flex h-10 w-10 flex-none items-center justify-center rounded-xl bg-brand-100 text-brand-700">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"/></svg>
            </span>
            <div class="flex-1">
                <h3 class="text-lg font-bold text-slate-900">Quiz de validation</h3>
                <p class="text-sm text-slate-500">{{ $intro }}</p>
            </div>
            <span class="hidden rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-500 sm:inline">
                <span x-text="quiz.length"></span> questions
            </span>
        </div>

        {{-- Questions (rendu dynamique, mélangé) --}}
        <div class="mt-6 space-y-6">
            <template x-for="(item, i) in quiz" :key="item.uid">
                <fieldset class="border-t border-slate-100 pt-5">
                    <legend class="mb-3 flex gap-2 text-sm font-semibold text-slate-900">
                        <span class="flex h-6 w-6 flex-none items-center justify-center rounded-full bg-slate-100 text-xs font-bold text-slate-600" x-text="i + 1"></span>
                        <span x-text="item.q"></span>
                    </legend>

                    <div class="space-y-2 pl-8">
                        <template x-for="(opt, j) in item.options" :key="j">
                            <label
                                class="flex cursor-pointer items-center gap-3 rounded-xl border px-4 py-2.5 text-sm transition"
                                :class="{
                                    'border-slate-200 hover:border-brand-300 hover:bg-brand-50/40': !submitted,
                                    'border-emerald-400 bg-emerald-50': submitted && opt === item.correct,
                                    'border-rose-300 bg-rose-50': submitted && answers[i] === j && opt !== item.correct,
                                    'border-slate-200 opacity-60': submitted && answers[i] !== j && opt !== item.correct,
                                }">
                                <input type="radio" :name="'q' + i" :value="j"
                                       x-model.number="answers[i]" :disabled="submitted"
                                       class="text-brand-600 focus:ring-brand-500">
                                <span class="flex-1 text-slate-700" x-text="opt"></span>
                                <template x-if="submitted && opt === item.correct">
                                    <svg class="h-5 w-5 flex-none text-emerald-600" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                                </template>
                                <template x-if="submitted && answers[i] === j && opt !== item.correct">
                                    <svg class="h-5 w-5 flex-none text-rose-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                                </template>
                            </label>
                        </template>
                    </div>

                    {{-- Explication après validation --}}
                    <div x-show="submitted && item.explain" x-cloak class="ml-8 mt-3 rounded-lg border-l-4 border-brand-300 bg-brand-50/60 px-4 py-2 text-sm text-slate-600">
                        <span class="font-semibold text-brand-700">Explication —</span> <span x-text="item.explain"></span>
                    </div>
                </fieldset>
            </template>
        </div>

        {{-- Actions --}}
        <div class="mt-6 border-t border-slate-100 pt-5">
            <template x-if="!submitted">
                <button type="button" @click="submit()"
                        :disabled="Object.keys(answers).length < quiz.length"
                        class="inline-flex items-center gap-2 rounded-full bg-brand-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition enabled:hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50">
                    Valider mes réponses
                    <span x-show="Object.keys(answers).length < quiz.length" class="text-xs font-normal opacity-80"
                          x-text="'(' + Object.keys(answers).length + '/' + quiz.length + ')'"></span>
                </button>
            </template>

            <template x-if="submitted">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div class="flex items-center gap-3">
                        <span class="flex h-12 w-12 items-center justify-center rounded-full text-sm font-extrabold"
                              :class="pct() >= 60 ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
                              x-text="pct() + '%'"></span>
                        <div>
                            <p class="font-bold text-slate-900"><span x-text="score"></span> / <span x-text="quiz.length"></span> bonnes réponses</p>
                            <p class="text-sm" :class="pct() >= 60 ? 'text-emerald-600' : 'text-amber-600'"
                               x-text="pct() >= 80 ? 'Excellent, journée maîtrisée !' : (pct() >= 60 ? 'Bien — revoyez les points manqués.' : 'À consolider : relisez la journée.')"></p>
                        </div>
                    </div>
                    <button type="button" @click="retry()"
                            class="inline-flex items-center gap-2 rounded-full border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
                        Recommencer (nouveau tirage)
                    </button>
                </div>
            </template>
        </div>
    </div>
</div>
@endif