@php
    $plantillas = $plantillasLikert ?? \App\Models\Pregunta::plantillasLikert();
    $clavesPorcentaje = array_keys($porcentajes);

    if (isset($criteriosIniciales) && is_array($criteriosIniciales) && count($criteriosIniciales) >= 3) {
        $defaultCriterios = old('opciones', $criteriosIniciales);
    } else {
        $defaultCriterios = old('opciones', collect($plantillas['acuerdo_5']['criterios'])->values()->map(function ($texto, $i) {
            $porcentajesLineales = \App\Models\Pregunta::porcentajesLinealesLikert(5);

            return [
                'contenido' => $texto,
                'porcentaje' => $porcentajesLineales[$i] ?? '0',
            ];
        })->all());
    }

    $defaultEnunciados = old('enunciados', $enunciadosIniciales ?? [
        ['contenido' => ''],
        ['contenido' => ''],
    ]);
@endphp

<div
    x-data='{
        plantillas: @json(collect($plantillas)->map(fn ($p) => $p["criterios"])->all()),
        presets: @json(array_map("floatval", $clavesPorcentaje)),
        criterios: @json($defaultCriterios),
        enunciados: @json($defaultEnunciados),
        snap(raw) {
            return this.presets.reduce((best, p) => Math.abs(p - raw) < Math.abs(best - raw) ? p : best);
        },
        aplicarPlantilla(key) {
            const items = this.plantillas[key] || [];
            if (!items.length) return;
            const n = items.length;
            this.criterios = items.map((texto, i) => ({
                contenido: texto,
                porcentaje: String(this.snap((i / Math.max(n - 1, 1)) * 100))
            }));
        },
        addCriterio() {
            this.criterios.push({ contenido: "", porcentaje: "0" });
            this.repartirLineal();
        },
        removeCriterio(index) {
            if (this.criterios.length <= 3) return;
            this.criterios.splice(index, 1);
            this.repartirLineal();
        },
        repartirLineal() {
            const n = this.criterios.length;
            this.criterios = this.criterios.map((c, i) => ({
                ...c,
                porcentaje: String(this.snap((i / Math.max(n - 1, 1)) * 100))
            }));
        },
        addEnunciado() {
            this.enunciados.push({ id: null, contenido: "" });
        },
        removeEnunciado(index) {
            if (this.enunciados.length <= 1) return;
            this.enunciados.splice(index, 1);
        }
    }'
    class="space-y-5"
>
    <div class="rounded-xl border border-teal-100 bg-teal-50/60 p-4 space-y-2">
        <x-input-label value="Matriz Likert (estilo formulario)" />
        <p class="text-xs text-slate-600">
            Agrupa varios enunciados en un solo punto. Las columnas son la escala compartida
            y cada fila es un enunciado que el estudiante califica.
        </p>
    </div>

    {{-- Enunciados (filas) --}}
    <div class="space-y-3">
        <div class="flex items-center justify-between gap-3">
            <div>
                <x-input-label value="Enunciados (filas)" />
                <p class="text-xs text-slate-500">Cada enunciado aparecerá como una fila de la matriz.</p>
            </div>
            <button type="button" @click="addEnunciado()" class="text-sm text-teal-700 whitespace-nowrap">+ Agregar enunciado</button>
        </div>

                    <template x-for="(enunciado, index) in enunciados" :key="'e-' + index">
            <div class="flex gap-2 items-start">
                <span class="mt-2 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600" x-text="index + 1"></span>
                <div class="flex-1">
                    <input type="hidden" :name="'enunciados[' + index + '][id]'" :value="enunciado.id || ''">
                    <input
                        type="text"
                        :name="'enunciados[' + index + '][contenido]'"
                        x-model="enunciado.contenido"
                        class="w-full rounded-md border-slate-300"
                        placeholder="Ej. El docente explica con claridad"
                        maxlength="500"
                        required
                    >
                </div>
                <button type="button" class="mt-2 text-rose-600 text-sm" @click="removeEnunciado(index)" x-show="enunciados.length > 1">✕</button>
            </div>
        </template>
        <x-input-error :messages="$errors->get('enunciados')" class="mt-1" />
        <x-input-error :messages="$errors->get('enunciados.*.contenido')" class="mt-1" />
    </div>

    {{-- Escala (columnas) --}}
    <div class="space-y-3 border-t border-slate-100 pt-4">
        <div class="flex flex-col sm:flex-row gap-3 sm:items-end">
            <div class="flex-1">
                <x-input-label for="plantilla_likert" value="Escala compartida (columnas)" />
                <select id="plantilla_likert" class="mt-1 block w-full rounded-md border-slate-300" @change="aplicarPlantilla($event.target.value)">
                    <option value="">Usar plantilla de escala…</option>
                    @foreach($plantillas as $key => $plantilla)
                        <option value="{{ $key }}">{{ $plantilla['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <button type="button" @click="repartirLineal()" class="px-3 py-2 rounded-lg border border-slate-300 text-sm bg-white hover:bg-slate-50">
                Repartir % lineal (0→100)
            </button>
            <button type="button" @click="addCriterio()" class="px-3 py-2 rounded-lg border border-teal-200 text-sm text-teal-800 bg-teal-50 hover:bg-teal-100">
                + Criterio
            </button>
        </div>

        <template x-for="(criterio, index) in criterios" :key="'c-' + index">
            <div class="rounded-xl border border-slate-200 p-3 flex flex-col sm:flex-row gap-3 sm:items-center">
                <div class="sm:w-10 text-center">
                    <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-sm font-semibold text-slate-600" x-text="index + 1"></span>
                </div>
                <div class="flex-1">
                    <input
                        type="text"
                        :name="'opciones[' + index + '][contenido]'"
                        x-model="criterio.contenido"
                        class="w-full rounded-md border-slate-300"
                        placeholder="Etiqueta de la columna (ej. De acuerdo)"
                        required
                    >
                </div>
                <div class="sm:w-40">
                    <label class="text-xs text-slate-500">Calificación %</label>
                    <select
                        :name="'opciones[' + index + '][porcentaje]'"
                        x-model="criterio.porcentaje"
                        class="mt-1 block w-full rounded-md border-slate-300 text-sm"
                        required
                    >
                        @foreach($porcentajes as $valor => $etiqueta)
                            <option value="{{ $valor }}">{{ $etiqueta }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="button" class="text-rose-600 text-sm" @click="removeCriterio(index)" x-show="criterios.length > 3">✕</button>
            </div>
        </template>
        <x-input-error :messages="$errors->get('opciones')" class="mt-2" />
    </div>

    {{-- Vista previa --}}
    <div class="rounded-xl border border-dashed border-slate-300 bg-slate-50/80 p-4 overflow-x-auto">
        <p class="text-xs uppercase tracking-wide text-slate-400 mb-3">Vista previa de la matriz</p>
        <table class="min-w-full text-sm border-collapse">
            <thead>
                <tr>
                    <th class="text-left p-2 text-slate-500 font-medium min-w-[10rem]">Enunciado</th>
                    <template x-for="(criterio, ci) in criterios" :key="'ph-' + ci">
                        <th class="p-2 text-center text-slate-600 font-medium min-w-[5.5rem] align-bottom">
                            <span class="block text-[11px] leading-tight" x-text="criterio.contenido || ('Nivel ' + (ci + 1))"></span>
                        </th>
                    </template>
                </tr>
            </thead>
            <tbody>
                <template x-for="(enunciado, ei) in enunciados" :key="'pr-' + ei">
                    <tr class="border-t border-slate-200">
                        <td class="p-2 text-slate-700" x-text="enunciado.contenido || ('Enunciado ' + (ei + 1))"></td>
                        <template x-for="(criterio, ci) in criterios" :key="'pc-' + ei + '-' + ci">
                            <td class="p-2 text-center">
                                <span class="inline-block h-4 w-4 rounded-full border border-slate-300"></span>
                            </td>
                        </template>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>