@php
    $opcionesOld = old('opciones', [
        ['contenido' => '', 'porcentaje' => $tipo === 'seleccion_unica' ? '100' : ($tipo === 'likert' ? '0' : '50')],
        ['contenido' => '', 'porcentaje' => '0'],
        ['contenido' => '', 'porcentaje' => '0'],
    ]);
    if ($tipo === 'likert' && count($opcionesOld) < 3) {
        $opcionesOld[] = ['contenido' => '', 'porcentaje' => '0'];
    }
@endphp

<x-app-layout compact>
    <x-page :title="'Nueva pregunta · ' . $tipos[$tipo]" :breadcrumbs="[['label' => 'Inicio', 'url' => route('dashboard')], ['label' => 'Banco de preguntas', 'url' => route('banco.index')], ['label' => 'Nueva pregunta']]">
        <x-slot name="subtitle">Misma estructura que en cuestionarios. El código se asigna al guardar.</x-slot>
        <div class="eva-form-page-wide space-y-4">
            <div class="flex flex-wrap gap-2">
                @foreach($tipos as $key => $label)
                    <a
                        href="{{ route('banco.preguntas.create', ['tipo' => $key]) }}"
                        class="px-3 py-1.5 rounded-full text-sm border {{ $tipo === $key ? 'bg-teal-700 text-white border-teal-700' : 'bg-white text-slate-600 border-slate-200' }}"
                    >{{ $label }}</a>
                @endforeach
            </div>

            <form
                method="POST"
                action="{{ route('banco.preguntas.store') }}"
                class="eva-form-card space-y-5"
                x-data="curricularFormState({
                    gradoId: {{ \Illuminate\Support\Js::from(old('grado_id', '')) }},
                    cursoId: {{ \Illuminate\Support\Js::from(old('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="grid md:grid-cols-3 gap-4">
                    <div>
                        <x-input-label for="tipo_prueba" value="Tipo de prueba" />
                        <select id="tipo_prueba" name="tipo_prueba" class="block mt-1 w-full rounded-md border-slate-300" required>
                            @foreach(\App\Models\Cuestionario::TIPOS as $valor => $etiqueta)
                                <option value="{{ $valor }}" @selected(old('tipo_prueba', 'evaluacion') === $valor)>{{ $etiqueta }}</option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('tipo_prueba')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="grado_id" value="Grado" />
                        <select id="grado_id" name="grado_id" class="block mt-1 w-full rounded-md border-slate-300" x-model="gradoId" @change="onGradoChange()" required>
                            <option value="">Selecciona…</option>
                            @foreach($grados as $grado)
                                <option value="{{ $grado->id }}">{{ $grado->nombre }}</option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('grado_id')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="curso_id" value="Curso" />
                        <select id="curso_id" name="curso_id" class="block mt-1 w-full rounded-md border-slate-300" x-model="cursoId" @change="onCursoChange()" required>
                            <option value="">Selecciona…</option>
                            @foreach($cursos as $curso)
                                <option value="{{ $curso->id }}" data-grado="{{ $curso->grado_id }}" x-show="!gradoId || gradoId == '{{ $curso->grado_id }}'">
                                    {{ $curso->nombre }}
                                </option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('curso_id')" class="mt-2" />
                    </div>
                </div>

                @include('preguntas._configuracion_curricular')

                @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)' }}" />
                    <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)" />
                    </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 value="% si elige la correcta" />
                                <select 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 value="% si elige la incorrecta" />
                                <select 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.</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('banco.index') }}" 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>