@foreach($nodos as $nodo)
    <div class="rounded-lg border bg-white {{ $nodo['depth'] > 0 ? 'border-slate-100 ml-3 md:ml-5' : 'border-slate-200' }}"
         x-data="{ abierto: true, editar: false, addItem: false, addSub: false }">

        {{-- Header de categoría --}}
        <div class="flex items-center gap-2 px-3 py-1.5 {{ $nodo['depth'] > 0 ? 'bg-slate-50/50' : 'bg-slate-50/80' }} rounded-t-lg cursor-pointer"
             @click="abierto = !abierto">
            <span class="text-[10px] text-slate-400 shrink-0 w-3 text-center" x-text="abierto ? '▾' : '▸'"></span>

            <span class="text-xs font-semibold text-slate-700 truncate flex-1 min-w-0">
                {{ $nodo['nombre'] }}
                @if($nodo['es_raiz'])
                    <span class="text-[9px] text-slate-400 font-normal ml-0.5">(raíz)</span>
                @endif
            </span>

            {{-- Badges --}}
            <span class="inline-flex items-center gap-1 shrink-0">
                @if($nodo['ponderacion'] !== null)
                    <span class="text-[9px] font-mono px-1 py-0.5 rounded bg-slate-100 text-slate-600">{{ number_format($nodo['ponderacion'], 1) }}%</span>
                @endif
                <span class="text-[9px] px-1 py-0.5 rounded {{ $nodo['agregacion'] === 'promedio_ponderado' ? 'bg-blue-50 text-blue-600' : 'bg-green-50 text-green-600' }}">
                    {{ $nodo['agregacion'] === 'promedio_ponderado' ? 'Pond.' : 'Simple' }}
                </span>
            </span>

            {{-- Acciones header --}}
            <div class="flex items-center gap-0.5 shrink-0" @click.stop>
                <button type="button" @click.stop="editar = !editar"
                        class="p-1 text-[10px] text-slate-400 hover:text-[var(--eva-primary)] rounded hover:bg-slate-100 transition-colors"
                        :class="editar ? 'text-[var(--eva-primary)] bg-[var(--eva-primary-soft)]' : ''" title="Editar categoría">✎</button>
                @unless($nodo['es_raiz'])
                    <form method="post" action="{{ route('aula.grade-categories.destroy', [$curso, $nodo['id']]) }}"
                          onsubmit="return confirm('¿Eliminar categoría? Los ítems pasarán al padre.');" class="inline" @click.stop>
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="p-1 text-[10px] text-slate-400 hover:text-red-500 rounded hover:bg-red-50 transition-colors" title="Eliminar">✕</button>
                    </form>
                @endunless
            </div>
        </div>

        {{-- Form editar categoría --}}
        <div x-show="editar" x-cloak x-transition.opacity
             class="px-3 py-2 border-t border-slate-100 bg-[var(--eva-primary-soft)]/30">
            <form method="post" action="{{ route('aula.grade-categories.update', [$curso, $nodo['id']]) }}" class="flex flex-wrap items-end gap-2">
                @csrf
                @method('PUT')
                @unless($nodo['es_raiz'])
                    <div class="flex-1 min-w-[8rem]">
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Nombre</label>
                        <input type="text" name="nombre" value="{{ $nodo['nombre'] }}" required maxlength="255"
                               class="w-full eva-input text-xs py-1">
                    </div>
                @endunless
                <div>
                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Peso %</label>
                    <input type="number" name="ponderacion" value="{{ $nodo['ponderacion'] }}" step="0.01" min="0"
                           class="w-16 eva-input text-xs py-1">
                </div>
                <div>
                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Agregación</label>
                    <select name="agregacion" class="eva-input text-xs py-1">
                        <option value="promedio_ponderado" @selected($nodo['agregacion'] === 'promedio_ponderado')">Ponderado</option>
                        <option value="promedio" @selected($nodo['agregacion'] === 'promedio')">Simple</option>
                    </select>
                </div>
                <button type="submit" class="mdl-btn mdl-btn-primary text-[11px] py-1 px-3">Guardar</button>
            </form>
        </div>

        {{-- Contenido colapsable --}}
        <div x-show="abierto" x-cloak x-transition.opacity>
            {{-- Ítems --}}
            @if(!empty($nodo['items']))
                <div class="px-3 pb-1.5">
                    <table class="w-full text-[11px]">
                        <thead>
                            <tr class="text-[9px] uppercase tracking-wider text-slate-400 font-semibold">
                                <th class="text-left py-1 pr-1 w-5"></th>
                                <th class="text-left py-1 font-semibold">Actividad</th>
                                <th class="text-left py-1 font-semibold">Categoría / Peso</th>
                                <th class="w-6"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($nodo['items'] as $item)
                                <tr class="border-t border-slate-100/80 group"
                                    x-data="{ ed: false }">
                                    <td class="py-1.5 pr-1">
                                        <x-mdl-icon :tipo="match($item['tipo']) { 'tarea' => 'tarea', 'foro' => 'foro', 'taller' => 'taller', default => 'grade' }" size="xs" class="text-slate-400" />
                                    </td>
                                    <td class="py-1.5">
                                        <span class="text-slate-700 font-medium">{{ $item['titulo'] }}</span>
                                        @if(!empty($item['es_manual']))
                                            <span class="text-[8px] uppercase tracking-wide px-1 py-0.5 rounded bg-amber-100 text-amber-700 font-semibold ml-1">Manual</span>
                                        @endif
                                    </td>
                                    <td class="py-1.5 text-slate-500">
                                        @if(!empty($item['es_manual']))
                                            <span x-show="!ed" class="text-slate-400 text-[10px]">{{ $item['ponderacion'] ?? '—' }}</span>
                                        @else
                                            {{-- Mover ítem de actividad --}}
                                            <form method="post" action="{{ route('aula.grade-items.update', [$curso, $item['id']]) }}" class="inline-flex items-center gap-1.5">
                                                @csrf @method('PUT')
                                                <select name="categoria_id" onchange="this.form.submit()"
                                                        class="rounded border-slate-200 text-[10px] py-0.5 px-1 focus:border-[var(--eva-primary)] focus:ring-[var(--eva-primary)] bg-transparent">
                                                    @foreach($flatCategories as $cat)
                                                        <option value="{{ $cat['id'] }}" @selected($cat['id'] === $nodo['id'])>
                                                            {{ str_repeat('— ', $cat['depth']) }}{{ $cat['nombre'] }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <input type="hidden" name="ponderacion" value="{{ $item['ponderacion'] }}">
                                            </form>
                                        @endif
                                    </td>
                                    <td class="py-1.5 text-right">
                                        @if(!empty($item['es_manual']))
                                            <button type="button" @click="ed = !ed"
                                                    class="text-slate-300 hover:text-[var(--eva-primary)] transition-colors text-[10px]"
                                                    :class="ed ? 'text-[var(--eva-primary)]' : ''">✎</button>
                                        @endif
                                    </td>
                                </tr>
                                {{-- Fila de edición inline para ítem manual --}}
                                @if(!empty($item['es_manual']))
                                    <tr x-show="ed" x-cloak x-transition.opacity class="bg-amber-50/40">
                                        <td colspan="4" class="px-2 py-2">
                                            <form method="post" action="{{ route('aula.grade-items.update', [$curso, $item['id']]) }}" class="flex flex-wrap items-end gap-2">
                                                @csrf @method('PUT')
                                                <div class="flex-1 min-w-[8rem]">
                                                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Título</label>
                                                    <input type="text" name="titulo" value="{{ $item['titulo'] }}" required maxlength="255"
                                                           class="w-full eva-input text-xs py-1">
                                                </div>
                                                <div>
                                                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Máx.</label>
                                                    <input type="number" name="puntaje_max" value="{{ $item['puntaje_max'] ?? $item['max'] ?? ($escalaMaxima ?? $curso->escalaMaxima()) }}" step="any" min="0.01"
                                                           class="w-16 eva-input text-xs py-1">
                                                </div>
                                                <div>
                                                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Categoría</label>
                                                    <select name="categoria_id" class="eva-input text-xs py-1">
                                                        @foreach($flatCategories as $cat)
                                                            <option value="{{ $cat['id'] }}" @selected($cat['id'] === $nodo['id'])>
                                                                {{ str_repeat('— ', $cat['depth']) }}{{ $cat['nombre'] }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Peso %</label>
                                                    <input type="number" name="ponderacion" value="{{ $item['ponderacion'] }}" step="0.01" min="0"
                                                           class="w-16 eva-input text-xs py-1">
                                                </div>
                                                <div class="flex gap-1.5">
                                                    <button type="submit" class="mdl-btn mdl-btn-primary text-[11px] py-1 px-2.5">Guardar</button>
                                                </div>
                                            </form>
                                            <form method="post" action="{{ route('aula.grade-items.destroy', [$curso, $item['id']]) }}"
                                                  onsubmit="return confirm('¿Eliminar ítem?');" class="mt-1.5">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="text-[10px] text-red-500 hover:underline">Eliminar ítem</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

            {{-- Acciones --}}
            <div class="px-3 pb-2 flex items-center gap-3 border-t border-slate-100/60 pt-1.5">
                <button type="button" @click="addItem = !addItem"
                        class="text-[10px] text-[var(--eva-primary)] hover:underline font-medium"
                        :class="addItem ? 'underline' : ''">
                    <span x-text="addItem ? 'Cancelar' : '+ Ítem manual'"></span>
                </button>
                @unless($nodo['es_raiz'])
                    <button type="button" @click="addSub = !addSub"
                            class="text-[10px] text-[var(--eva-primary)] hover:underline font-medium"
                            :class="addSub ? 'underline' : ''">
                        <span x-text="addSub ? 'Cancelar' : '+ Subcategoría'"></span>
                    </button>
                @endunless
            </div>

            {{-- Form agregar ítem manual --}}
            <div x-show="addItem" x-cloak x-transition.opacity class="px-3 pb-2">
                <form method="post" action="{{ route('aula.grade-items.manual.store', $curso) }}"
                      class="flex flex-wrap items-end gap-2 p-2.5 rounded-lg border border-dashed border-amber-200 bg-amber-50/50">
                    @csrf
                    <input type="hidden" name="categoria_id" value="{{ $nodo['id'] }}">
                    <div class="flex-1 min-w-[10rem]">
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Nombre del ítem</label>
                        <input type="text" name="titulo" required maxlength="255" placeholder="Ej. Trabajo extra, participación…"
                               class="w-full eva-input text-xs py-1">
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Máx.</label>
                        <input type="number" name="puntaje_max" value="{{ $escalaMaxima ?? $curso->escalaMaxima() }}" step="any" min="0.01"
                               class="w-16 eva-input text-xs py-1">
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Peso %</label>
                        <input type="number" name="ponderacion" step="0.01" min="0"
                               class="w-16 eva-input text-xs py-1">
                    </div>
                    <button type="submit" class="mdl-btn mdl-btn-primary text-[11px] py-1 px-3">Crear</button>
                </form>
            </div>

            {{-- Form agregar subcategoría --}}
            <div x-show="addSub" x-cloak x-transition.opacity class="px-3 pb-2">
                <form method="post" action="{{ route('aula.grade-categories.store', $curso) }}"
                      class="flex flex-wrap items-end gap-2 p-2.5 rounded-lg border border-dashed border-slate-300 bg-slate-50/50">
                    @csrf
                    <input type="hidden" name="parent_id" value="{{ $nodo['id'] }}">
                    <div class="flex-1 min-w-[10rem]">
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Nombre subcategoría</label>
                        <input type="text" name="nombre" required maxlength="255"
                               class="w-full eva-input text-xs py-1">
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Peso %</label>
                        <input type="number" name="ponderacion" step="0.01" min="0"
                               class="w-16 eva-input text-xs py-1">
                    </div>
                    <div>
                        <label class="block text-[9px] uppercase tracking-wide text-slate-500 font-semibold mb-0.5">Agregación</label>
                        <select name="agregacion" class="eva-input text-xs py-1">
                            <option value="promedio_ponderado">Ponderado</option>
                            <option value="promedio">Simple</option>
                        </select>
                    </div>
                    <button type="submit" class="mdl-btn mdl-btn-primary text-[11px] py-1 px-3">Crear</button>
                </form>
            </div>

            {{-- Hijos recursivos --}}
            @if(!empty($nodo['children']))
                <div class="px-3 pb-2 space-y-1.5">
                    @include('aula.partials.calificaciones-config-nodo', [
                        'nodos' => $nodo['children'],
                        'flatCategories' => $flatCategories,
                        'curso' => $curso,
                        'escalaMaxima' => $escalaMaxima ?? null,
                    ])
                </div>
            @endif
        </div>
    </div>
@endforeach