@php
    $opcionesOld = old('opciones', [
        ['contenido' => '', 'porcentaje' => $tipo === 'seleccion_unica' ? '100' : '50'],
        ['contenido' => '', 'porcentaje' => '0'],
    ]);
@endphp

<x-app-layout compact>
    <x-page :title="'Nueva pregunta · ' . $tipos[$tipo]" :breadcrumbs="[['label' => 'Inicio', 'url' => route('dashboard')], ['label' => 'Cuestionarios', 'url' => route('cuestionarios.index')], ['label' => $cuestionario->nombre, 'url' => route('cuestionarios.show', $cuestionario)], ['label' => 'Nueva pregunta']]">
        <div class="eva-form-page-wide">
            <form
                method="POST"
                action="{{ route('preguntas.store', $cuestionario) }}"
                class="eva-form-card space-y-5"
                x-data="curricularFormState({
                    gradoId: {{ \Illuminate\Support\Js::from((string) ($cuestionario->grado_id ?? '')) }},
                    cursoId: {{ \Illuminate\Support\Js::from((string) ($cuestionario->curso_id ?? '')) }},
                    curricularModo: {{ \Illuminate\Support\Js::from(old('curricular_modo', '')) }},
                    temaId: {{ \Illuminate\Support\Js::from(old('tema_id', '')) }},
                    enunciadoIds: {{ \Illuminate\Support\Js::from(old('enunciado_ids', [])) }},
                    evidenciaIds: {{ \Illuminate\Support\Js::from(old('evidencia_ids', [])) }},
                    curricular: {{ \Illuminate\Support\Js::from($curricularOpciones) }},
                })"
            >
                @csrf
                <input type="hidden" name="tipo" value="{{ $tipo }}">

                <div class="rounded-xl bg-slate-50 border border-slate-200 px-4 py-3 text-sm">
                    Cuestionario: <strong>{{ $cuestionario->nombre }}</strong> · Código <span class="font-mono">{{ $cuestionario->codigo }}</span>
                    · <span class="font-medium">{{ $cuestionario->tipoLabel() }}</span>
                    @if($cuestionario->grado || $cuestionario->curso)
                        · {{ $cuestionario->grado?->nombre }} / {{ $cuestionario->curso?->nombre }}
                    @endif
                </div>

                @include('preguntas._configuracion_curricular')

                @if($cuestionario->esSaber() && $tipo !== 'descripcion')
                    <div>
                        <x-input-label for="area_id" value="Área SABER" />
                        <select id="area_id" name="area_id" class="block mt-1 w-full rounded-md border-slate-300" required>
                            <option value="">Selecciona el área…</option>
                            @foreach($cuestionario->areas as $area)
                                <option value="{{ $area->id }}" @selected(old('area_id') == $area->id)>{{ $area->nombre }} (0–100)</option>
                            @endforeach
                        </select>
                        <p class="text-xs text-slate-500 mt-1">La nota del área se calcula sobre 100 puntos a partir de las preguntas asignadas.</p>
                        <x-input-error :messages="$errors->get('area_id')" class="mt-2" />
                    </div>
                @endif

                @if($tipo === 'seleccion_unica')
                    <div>
                        <x-input-label for="option_format" value="Formato de opciones" />
                        <select id="option_format" name="option_format" class="block mt-1 w-full rounded-md border-slate-300" required>
                            @foreach($formatos as $key => $label)
                                <option value="{{ $key }}" @selected(old('option_format', 'numeracion') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div>
                    <x-input-label value="{{ $tipo === 'likert' ? 'Título / instrucción del bloque' : 'Enunciado (editor enriquecido)' }}" />
                    @if($tipo === 'likert')
                        <p class="text-xs text-slate-500 mt-1 mb-2">Ej.: “Califica los siguientes aspectos del curso.” Los enunciados van abajo en la matriz.</p>
                    @endif
                    <input type="hidden" name="contenido" id="contenido" value="{{ old('contenido') }}">
                    <div id="editor" class="mt-2 bg-white min-h-[180px]"></div>
                    <x-input-error :messages="$errors->get('contenido')" class="mt-2" />
                </div>

                @if($tipo !== 'descripcion')
                    <div>
                        <x-input-label for="puntos" value="Puntos de la pregunta" />
                        <x-text-input id="puntos" name="puntos" type="number" step="0.01" min="0" class="block mt-1 w-40" :value="old('puntos', 1)" />
                        <p class="text-xs text-slate-500 mt-1">
                            @if($tipo === 'likert')
                                Se aplica el promedio del % de todos los enunciados sobre estos puntos.
                            @else
                                El porcentaje de cada respuesta se aplica sobre estos puntos.
                            @endif
                        </p>
                    </div>
                @endif

                @if(in_array($tipo, ['seleccion_unica', 'seleccion_multiple']))
                    @include('preguntas._opciones_porcentaje', [
                        'opcionesOld' => $opcionesOld,
                        'unica' => $tipo === 'seleccion_unica',
                        'porcentajes' => $porcentajes,
                    ])
                @endif

                @if($tipo === 'likert')
                    @include('preguntas._likert_criterios', [
                        'plantillasLikert' => $plantillasLikert,
                        'porcentajes' => $porcentajes,
                    ])
                @endif

                @if($tipo === 'verdadero_falso')
                    <div class="space-y-4 rounded-xl border border-slate-200 p-4">
                        <div>
                            <x-input-label value="Respuesta correcta" />
                            <div class="mt-2 flex gap-4">
                                <label class="inline-flex items-center gap-2"><input type="radio" name="respuesta_vf" value="verdadero" @checked(old('respuesta_vf', 'verdadero')==='verdadero')> Verdadero</label>
                                <label class="inline-flex items-center gap-2"><input type="radio" name="respuesta_vf" value="falso" @checked(old('respuesta_vf')==='falso')> Falso</label>
                            </div>
                        </div>
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <x-input-label for="porcentaje_correcta_vf" value="% si elige la correcta" />
                                <select id="porcentaje_correcta_vf" name="porcentaje_correcta_vf" class="block mt-1 w-full rounded-md border-slate-300">
                                    @foreach($porcentajes as $valor => $etiqueta)
                                        @if((float)$valor >= 0)
                                            <option value="{{ $valor }}" @selected(old('porcentaje_correcta_vf', '100') == $valor)>{{ $etiqueta }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <x-input-label for="porcentaje_incorrecta_vf" value="% si elige la incorrecta" />
                                <select id="porcentaje_incorrecta_vf" name="porcentaje_incorrecta_vf" class="block mt-1 w-full rounded-md border-slate-300">
                                    @foreach($porcentajes as $valor => $etiqueta)
                                        <option value="{{ $valor }}" @selected(old('porcentaje_incorrecta_vf', '0') == $valor)>{{ $etiqueta }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                @endif

                @if($tipo === 'abierta')
                    <p class="text-sm text-slate-500">El estudiante escribirá su respuesta. La calificación será manual por el docente.</p>
                @endif

                @if($tipo === 'descripcion')
                    <p class="text-sm text-slate-500">Este bloque solo muestra información; no se califica.</p>
                @endif

                <div class="flex gap-3">
                    <x-primary-button>Guardar pregunta</x-primary-button>
                    <a href="{{ route('cuestionarios.show', $cuestionario) }}" class="px-4 py-2.5 rounded-xl border text-sm">Cancelar</a>
                </div>
            </form>
        </div>
    </x-page>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (window.initQuillEditor) {
                window.initQuillEditor('#editor', { input: '#contenido' });
            }
        });
    </script>
    @endpush
</x-app-layout>