@php
    $defaultOpciones = $pregunta->opciones->map(fn ($o) => [
        'contenido' => $o->contenido,
        'porcentaje' => $o->porcentajeParaSelector(),
    ])->values()->all();

    if (count($defaultOpciones) < 2) {
        $defaultOpciones = [
            ['contenido' => '', 'porcentaje' => '100'],
            ['contenido' => '', 'porcentaje' => '0'],
        ];
    }

    $opcionesOld = old('opciones', $defaultOpciones);
    $respuestaVf = old('respuesta_vf', optional($pregunta->opciones->firstWhere('es_correcta', true))->contenido === 'Falso' ? 'falso' : 'verdadero');
    $porcentajeCorrectaVf = old('porcentaje_correcta_vf', (string) (0 + (float) optional($pregunta->opciones->firstWhere('es_correcta', true))->porcentaje ?? 100));
    $porcentajeIncorrectaVf = old('porcentaje_incorrecta_vf', (string) (0 + (float) optional($pregunta->opciones->firstWhere('es_correcta', false))->porcentaje ?? 0));
@endphp

<x-app-layout compact>
    <x-page :title="'Editar pregunta · ' . $tipos[$pregunta->tipo]" :breadcrumbs="[['label' => 'Inicio', 'url' => route('dashboard')], ['label' => 'Cuestionarios', 'url' => route('cuestionarios.index')], ['label' => $cuestionario->nombre, 'url' => route('cuestionarios.show', $cuestionario)], ['label' => 'Editar pregunta']]">
        <div class="eva-form-page-wide">
            <form
                method="POST"
                action="{{ route('preguntas.update', [$cuestionario, $pregunta]) }}"
                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', $pregunta->curricular_modo)) }},
                    temaId: {{ \Illuminate\Support\Js::from(old('tema_id', $pregunta->tema_id)) }},
                    enunciadoIds: {{ \Illuminate\Support\Js::from(old('enunciado_ids', $pregunta->enunciados->pluck('id')->all())) }},
                    evidenciaIds: {{ \Illuminate\Support\Js::from(old('evidencia_ids', $pregunta->evidencias->pluck('id')->all())) }},
                    curricular: {{ \Illuminate\Support\Js::from($curricularOpciones) }},
                })"
            >
                @csrf
                @method('PUT')

                @include('preguntas._configuracion_curricular')

                @if($pregunta->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', $pregunta->option_format) === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif

                @if($cuestionario->esSaber() && $pregunta->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', $pregunta->area_id) == $area->id)>{{ $area->nombre }} (0–100)</option>
                            @endforeach
                        </select>
                        <x-input-error :messages="$errors->get('area_id')" class="mt-2" />
                    </div>
                @endif

                <div>
                    <x-input-label value="{{ $pregunta->tipo === 'likert' ? 'Título / instrucción del bloque' : 'Enunciado (editor enriquecido)' }}" />
                    @if($pregunta->tipo === 'likert')
                        <p class="text-xs text-slate-500 mt-1 mb-2">Los enunciados de la matriz se editan en la sección inferior.</p>
                    @endif
                    <input type="hidden" name="contenido" id="contenido" value="{{ old('contenido', $pregunta->contenido) }}">
                    <div id="editor" class="mt-2 bg-white min-h-[180px]"></div>
                </div>

                @if($pregunta->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', $pregunta->puntos)" />
                    </div>
                @endif

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

                @if($pregunta->tipo === 'likert')
                    @include('preguntas._likert_criterios', [
                        'plantillasLikert' => $plantillasLikert,
                        'porcentajes' => $porcentajes,
                        'criteriosIniciales' => $opcionesOld,
                        'enunciadosIniciales' => $pregunta->likertItems->map(fn ($item) => [
                            'id' => $item->id,
                            'contenido' => $item->contenido,
                        ])->values()->all() ?: [['contenido' => ''], ['contenido' => '']],
                    ])
                @endif

                @if($pregunta->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($respuestaVf==='verdadero')> Verdadero</label>
                                <label class="inline-flex items-center gap-2"><input type="radio" name="respuesta_vf" value="falso" @checked($respuestaVf==='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($porcentajeCorrectaVf == $valor || abs((float)$porcentajeCorrectaVf - (float)$valor) < 0.01)>{{ $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($porcentajeIncorrectaVf == $valor || abs((float)$porcentajeIncorrectaVf - (float)$valor) < 0.01)>{{ $etiqueta }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="flex gap-3">
                    <x-primary-button>Actualizar 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>