@php
    /** @var \App\Models\Pregunta $pregunta */
    $preview = $preview ?? false;
    $disabled = $preview ? 'disabled' : '';
    $mapaPrev = $mapaPrev ?? [];
@endphp

<div class="eva-card p-5 sm:p-6">
    <div class="flex items-center justify-between gap-3 mb-3">
        <p class="text-xs uppercase tracking-wide text-slate-400 font-semibold">
            {{ $pregunta->tipo === 'descripcion' ? 'Información' : 'Pregunta '.($index + 1) }}
            @if($pregunta->area)
                · {{ $pregunta->area->nombre }}
            @endif
        </p>
        @if($pregunta->tipo !== 'descripcion')
            <span class="eva-badge bg-slate-100 text-slate-600">{{ $pregunta->puntos }} pts</span>
        @endif
    </div>

    <div class="prose max-w-none mb-5 text-slate-800">{!! $pregunta->contenido !!}</div>

    @if($pregunta->tipo === 'seleccion_unica' || $pregunta->tipo === 'verdadero_falso')
        <div class="space-y-2">
            @foreach($pregunta->opciones as $i => $opcion)
                <label class="flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 {{ $preview ? '' : 'hover:border-teal-300 hover:bg-teal-50/40 cursor-pointer' }} transition">
                    <input type="radio" class="mt-1 text-teal-600 focus:ring-teal-500" name="pregunta_{{ $pregunta->id }}" value="{{ $opcion->id }}" {{ $disabled }} @unless($preview) required @endunless>
                    <span class="text-sm text-slate-700 eva-opcion-html">
                        <span class="font-mono me-1 text-slate-400">{{ $pregunta->etiquetaOpcion($i) }}.</span>
                        {!! $opcion->contenido !!}
                    </span>
                </label>
            @endforeach
        </div>
    @elseif($pregunta->tipo === 'likert')
        @php $items = $pregunta->likertItems; @endphp
        @if($items->isNotEmpty())
            <p class="text-sm text-slate-500 mb-4">Selecciona un nivel para cada enunciado:</p>
            <div class="overflow-x-auto rounded-xl border border-slate-200">
                <table class="min-w-full text-sm">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="text-left p-3 font-medium text-slate-600 min-w-[12rem] sticky left-0 bg-slate-50 z-10">Enunciado</th>
                            @foreach($pregunta->opciones as $opcion)
                                <th class="p-3 text-center font-medium text-slate-600 min-w-[5.5rem] align-bottom">
                                    <span class="block text-xs leading-snug">{{ strip_tags($opcion->contenido) }}</span>
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($items as $item)
                            <tr class="border-t border-slate-100">
                                <td class="p-3 text-slate-800 font-medium sticky left-0 bg-white z-10 min-w-[12rem]">{{ $item->contenido }}</td>
                                @foreach($pregunta->opciones as $opcion)
                                    @php
                                        $checked = (int) ($mapaPrev[(string) $item->id] ?? $mapaPrev[$item->id] ?? 0) === (int) $opcion->id;
                                    @endphp
                                    <td class="p-3 text-center">
                                        <label class="inline-flex items-center justify-center {{ $preview ? '' : 'cursor-pointer hover:bg-teal-50' }} p-2 rounded-lg">
                                            <input
                                                type="radio"
                                                class="text-teal-600 focus:ring-teal-500 h-4 w-4"
                                                name="pregunta_{{ $pregunta->id }}[{{ $item->id }}]"
                                                value="{{ $opcion->id }}"
                                                @checked($checked)
                                                {{ $disabled }}
                                                @unless($preview) required @endunless
                                            >
                                        </label>
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            @php
                $cols = min(5, max(3, $pregunta->opciones->count()));
                $colClass = match ($cols) {
                    3 => 'sm:grid-cols-3',
                    4 => 'sm:grid-cols-4',
                    default => 'sm:grid-cols-5',
                };
            @endphp
            <p class="text-sm text-slate-500 mb-4">Selecciona el criterio que mejor describe tu evaluación:</p>
            <div class="grid grid-cols-1 {{ $colClass }} gap-2">
                @foreach($pregunta->opciones as $i => $opcion)
                    <label class="flex flex-col items-center text-center gap-2 p-3 rounded-xl border border-slate-200 {{ $preview ? '' : 'hover:border-teal-400 hover:bg-teal-50/50 cursor-pointer' }}">
                        <input type="radio" class="sr-only" name="pregunta_{{ $pregunta->id }}" value="{{ $opcion->id }}" {{ $disabled }} @unless($preview) required @endunless>
                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-sm font-bold text-slate-700">{{ $i + 1 }}</span>
                        <span class="text-xs sm:text-sm font-medium text-slate-700 leading-snug">{{ strip_tags($opcion->contenido) }}</span>
                    </label>
                @endforeach
            </div>
        @endif
    @elseif($pregunta->tipo === 'seleccion_multiple')
        <p class="text-xs text-slate-500 mb-2">Puedes seleccionar más de una opción.</p>
        <div class="space-y-2">
            @foreach($pregunta->opciones as $i => $opcion)
                <label class="flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 {{ $preview ? '' : 'hover:border-teal-300 hover:bg-teal-50/40 cursor-pointer' }}">
                    <input type="checkbox" class="mt-1 rounded text-teal-600 focus:ring-teal-500" name="pregunta_{{ $pregunta->id }}[]" value="{{ $opcion->id }}" {{ $disabled }}>
                    <span class="text-sm text-slate-700 eva-opcion-html">
                        <span class="font-mono me-1 text-slate-400">{{ $pregunta->etiquetaOpcion($i) }}.</span>
                        {!! $opcion->contenido !!}
                    </span>
                </label>
            @endforeach
        </div>
    @elseif($pregunta->tipo === 'abierta')
        <textarea name="pregunta_{{ $pregunta->id }}" rows="5" class="w-full rounded-xl border-slate-300 focus:border-teal-500 focus:ring-teal-500" placeholder="Escribe tu respuesta con claridad..." {{ $disabled }} @unless($preview) required @endunless></textarea>
    @endif
</div>