@php
    $modoEnfoque = $intento->cuestionario->modo_enfoque;
    $segundosRestantes = $intento->segundosRestantes();
    $preguntasIntento = $intento->cuestionario->preguntasOrdenadasPara($intento);
    $totalPreguntas = $preguntasIntento->where('tipo', '!=', 'descripcion')->count();
    $paginas = $intento->cuestionario->paginasPreguntas($preguntasIntento);
    $totalPaginas = $paginas->count();
@endphp

<x-app-layout compact :focus-mode="$modoEnfoque">
    <div class="mdl-page mdl-page-quiz-take">
        <div class="mdl-wrap">
            <div class="mdl-page-heading mb-5">
                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
                    <div class="flex items-start gap-3">
                        <x-cuestionario-icon size="lg" />
                        <div>
                            <p class="text-sm font-semibold text-[var(--eva-primary)]">Evaluación en curso</p>
                            <h1 class="mdl-page-title">{{ $intento->cuestionario->nombre }}</h1>
                            <p class="mdl-page-subtitle">
                                Código {{ $intento->cuestionario->codigo }} · Intento #{{ $intento->numero_intento }} ·
                                Duración {{ $intento->cuestionario->duracion_minutos }} min ·
                                {{ $totalPreguntas }} preguntas calificables
                                @if($modoEnfoque)
                                    · Modo enfoque activo
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div
        class="pb-8 eva-quiz-take-shell"
        x-data="quizTake({
            segundosIniciales: {{ $segundosRestantes }},
            submitUrl: {{ \Illuminate\Support\Js::from(route('intentos.submit', $intento)) }},
            autosaveUrl: {{ \Illuminate\Support\Js::from(route('intentos.autosave', $intento)) }},
            totalPreguntas: {{ $totalPreguntas }},
            totalPaginas: {{ $totalPaginas }},
            modoEnfoque: {{ $modoEnfoque ? 'true' : 'false' }},
        })"
        x-init="iniciar()"
        x-ref="quizRoot"
    >
        @if($modoEnfoque)
            <div
                x-show="focusAvisoVisible"
                x-cloak
                class="eva-quiz-focus-warning"
                role="alertdialog"
                aria-modal="true"
                aria-labelledby="eva-quiz-focus-warning-title"
            >
                <div class="eva-quiz-focus-warning-card">
                    <h2 id="eva-quiz-focus-warning-title" class="text-lg font-semibold text-slate-900">Permanece en la evaluación</h2>
                    <p class="mt-2 text-sm text-slate-600">
                        Saliste de la pestaña o minimizaste la ventana. Vuelve a concentrarte en el cuestionario;
                        la paginación y tus respuestas siguen disponibles aquí.
                    </p>
                    <button type="button" class="mdl-btn mdl-btn-primary mt-4" x-on:click="cerrarAvisoEnfoque()">
                        Continuar cuestionario
                    </button>
                </div>
            </div>
        @endif

        <div class="w-full px-3 sm:px-4 lg:px-5">
            <div class="grid lg:grid-cols-2 gap-3 mb-5">
                <div
                    class="rounded-xl border px-4 py-3 shadow-md flex items-center justify-between gap-3"
                    :class="urgente
                        ? 'border-rose-300 bg-rose-50 text-rose-900'
                        : 'border-teal-200 bg-white text-slate-800'"
                >
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide opacity-70">Tiempo restante</p>
                        <p class="text-2xl font-bold tabular-nums font-mono tracking-tight" x-text="formato"></p>
                    </div>
                    <p class="text-sm text-right opacity-80" x-show="!agotado">
                        Envío automático al llegar a 00:00.
                    </p>
                    <p class="text-sm text-right font-medium" x-show="agotado" x-cloak>
                        Tiempo agotado. Enviando…
                    </p>
                </div>
                <div class="eva-quiz-progress lg:static lg:top-auto">
                    <div class="eva-quiz-progress-label">
                        <span>Progreso del cuestionario</span>
                        <span x-text="respondidas + ' / ' + totalPreguntas"></span>
                    </div>
                    <div class="eva-quiz-progress-bar">
                        <div class="eva-quiz-progress-fill" :style="'width:' + porcentaje + '%'"></div>
                    </div>
                </div>
            </div>

            @if($modoEnfoque)
                <div class="eva-card px-4 py-3 mb-5 text-sm text-teal-950 border-teal-200 bg-teal-50/80 eva-quiz-focus-banner">
                    Modo enfoque: permanece en esta pantalla. Puedes cambiar de página del cuestionario, pero no podrás copiar el enunciado ni salir sin advertencia.
                </div>
            @endif

            <form
                method="POST"
                action="{{ route('intentos.submit', $intento) }}"
                class="space-y-5 eva-quiz-take-form"
                x-ref="formulario"
                @submit="prepararEnvio()"
                @change="contarRespuestas(); guardarProgreso()"
                @input.debounce.800ms="if ($event.target.matches('textarea[name^=pregunta_]')) { contarRespuestas(); guardarProgreso(); }"
            >
                @csrf
                <input type="hidden" name="por_tiempo" x-bind:value="agotado ? '1' : '0'">

                @include('cuestionarios.partials.presentacion-preguntas', [
                    'paginas' => $paginas,
                    'intento' => $intento,
                    'preview' => false,
                ])

                <div class="eva-card p-4 border-amber-200 bg-amber-50 text-sm text-amber-950" x-show="!paginacionActiva || pagina === totalPaginas" x-cloak>
                    Revisa tus respuestas antes de enviar. Después del envío no podrás modificarlas.
                </div>

                <div class="sticky bottom-4 z-30 flex justify-end rounded-xl border border-slate-200 bg-white/95 backdrop-blur px-4 py-3 shadow-lg eva-quiz-focus-allow" x-show="!paginacionActiva || pagina === totalPaginas" x-cloak>
                    <x-primary-button
                        class="w-full sm:w-auto px-8 py-3 text-base font-semibold"
                        x-bind:disabled="enviando || agotado"
                        onclick="return confirm('¿Enviar el cuestionario? Esta acción no se puede deshacer.')"
                    >
                        Enviar cuestionario
                    </x-primary-button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>