@php
    $catalogsActive = request()->routeIs('admin.catalogs', 'admin.academic-periods', 'admin.classrooms');
    $usersActive = request()->routeIs('admin.users');
    $navItem = function (bool $active) {
        return $active ? 'admin-nav-link is-active' : 'admin-nav-link';
    };
@endphp

<div
    class="fixed inset-0 z-40 bg-navy/50 lg:hidden"
    x-show="sidebarOpen"
    x-cloak
    @click="sidebarOpen = false"
    aria-hidden="true"
></div>

<aside
    class="admin-sidebar fixed inset-y-0 left-0 z-50 flex h-screen w-72 flex-col transition-transform duration-200 -translate-x-full lg:translate-x-0"
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
>
    <div class="admin-sidebar-brand flex h-14 shrink-0 items-center justify-between gap-2 px-4">
        <a href="{{ route('admin.dashboard') }}" class="flex min-w-0 items-center gap-2.5" @click="sidebarOpen = false">
            <span class="mark">DT</span>
            <span class="flex min-w-0 flex-col leading-tight">
                <span class="font-heading text-sm font-semibold">{{ config('app.name') }}</span>
                <span class="truncate text-xs" style="color: var(--rail-mute)">UNAMBA · Administración</span>
            </span>
        </a>
        <button
            type="button"
            aria-label="Cerrar menú"
            @click="sidebarOpen = false"
            class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md lg:hidden"
            style="color: var(--rail-mute)"
        >
            <x-icon name="close" />
        </button>
    </div>

    <nav aria-label="Menú administrativo" class="flex-1 space-y-1 overflow-y-auto px-2.5 py-3.5">
        <a href="{{ route('admin.dashboard') }}" class="{{ $navItem(request()->routeIs('admin.dashboard')) }}" @click="sidebarOpen = false">
            <x-icon name="home" class="h-4 w-4 shrink-0" />
            <span class="truncate">Dashboard</span>
        </a>

        <div class="admin-nav-divider"></div>

        <details class="group/section" @if ($catalogsActive) open @endif>
            <summary class="admin-nav-summary">
                <span class="admin-nav-icon {{ $catalogsActive ? 'is-active' : '' }}">
                    <x-icon name="cog" class="h-4 w-4" />
                </span>
                <span class="flex-1 truncate">Catálogos</span>
                <x-icon name="chevron" class="h-4 w-4 shrink-0 transition-transform duration-200 group-open/section:rotate-180" style="color: var(--rail-mute)" />
            </summary>
            {{-- Orden de menú: periodo → ciclos → aulas → resoluciones → cursos --}}
            <ul class="mt-0.5 space-y-0.5 pb-2 pl-1.5">
                <li>
                    <a href="{{ route('admin.academic-periods') }}" class="{{ $navItem(request()->routeIs('admin.academic-periods')) }}" @click="sidebarOpen = false">
                        <x-icon name="calendar" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Periodos académicos</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.catalogs', 'campuses') }}" class="{{ $navItem(request()->routeIs('admin.catalogs') && request()->route('type') === 'campuses') }}" @click="sidebarOpen = false">
                        <x-icon name="building" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Sedes</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.catalogs', 'cycles') }}" class="{{ $navItem(request()->routeIs('admin.catalogs') && request()->route('type') === 'cycles') }}" @click="sidebarOpen = false">
                        <x-icon name="layers" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Ciclos</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.classrooms') }}" class="{{ $navItem(request()->routeIs('admin.classrooms')) }}" @click="sidebarOpen = false">
                        <x-icon name="building" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Aulas</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.catalogs', 'resolutions') }}" class="{{ $navItem(request()->routeIs('admin.catalogs') && request()->route('type') === 'resolutions') }}" @click="sidebarOpen = false">
                        <x-icon name="document" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Resoluciones</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.catalogs', 'courses') }}" class="{{ $navItem(request()->routeIs('admin.catalogs') && request()->route('type') === 'courses') }}" @click="sidebarOpen = false">
                        <x-icon name="academic" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Cursos</span>
                    </a>
                </li>
            </ul>
        </details>

        <div class="admin-nav-divider"></div>

        <details class="group/section" @if ($usersActive) open @endif>
            <summary class="admin-nav-summary">
                <span class="admin-nav-icon {{ $usersActive ? 'is-active' : '' }}">
                    <x-icon name="users" class="h-4 w-4" />
                </span>
                <span class="flex-1 truncate">Personas</span>
                <x-icon name="chevron" class="h-4 w-4 shrink-0 transition-transform duration-200 group-open/section:rotate-180" style="color: var(--rail-mute)" />
            </summary>
            <ul class="mt-0.5 space-y-0.5 pb-2 pl-1.5">
                <li>
                    <a href="{{ route('admin.users', 'administrators') }}" class="{{ $navItem(request()->routeIs('admin.users') && request()->route('type') === 'administrators') }}" @click="sidebarOpen = false">
                        <x-icon name="key" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Administradores</span>
                    </a>
                </li>
                <li>
                    <a href="{{ route('admin.users', 'teachers') }}" class="{{ $navItem(request()->routeIs('admin.users') && request()->route('type') === 'teachers') }}" @click="sidebarOpen = false">
                        <x-icon name="fingerprint" class="h-4 w-4 shrink-0" />
                        <span class="truncate">Docentes</span>
                    </a>
                </li>
            </ul>
        </details>

        <div class="admin-nav-divider"></div>

        <ul class="space-y-0.5">
            <li>
                <a href="{{ route('admin.assignments') }}" class="{{ $navItem(request()->routeIs('admin.assignments')) }}" @click="sidebarOpen = false">
                    <x-icon name="clock" class="h-4 w-4 shrink-0" />
                    <span class="truncate">Asignaciones</span>
                </a>
            </li>
            <li>
                <a href="{{ route('admin.attendance-records') }}" class="{{ $navItem(request()->routeIs('admin.attendance-records*')) }}" @click="sidebarOpen = false">
                    <x-icon name="list" class="h-4 w-4 shrink-0" />
                    <span class="truncate">Registros de asistencia</span>
                </a>
            </li>
            <li>
                <a href="{{ route('admin.reports') }}" class="{{ $navItem(request()->routeIs('admin.reports')) }}" @click="sidebarOpen = false">
                    <x-icon name="chart-bar" class="h-4 w-4 shrink-0" />
                    <span class="truncate">Reportes</span>
                </a>
            </li>
            <li>
                <a href="{{ route('admin.system-configuration') }}" class="{{ $navItem(request()->routeIs('admin.system-configuration')) }}" @click="sidebarOpen = false">
                    <x-icon name="monitor" class="h-4 w-4 shrink-0" />
                    <span class="truncate">Kiosko</span>
                </a>
            </li>
        </ul>

        <div class="admin-nav-divider"></div>

        <a href="{{ route('admin.guide') }}" class="{{ $navItem(request()->routeIs('admin.guide')) }}" @click="sidebarOpen = false">
            <x-icon name="guide" class="h-4 w-4 shrink-0" />
            <span class="truncate">Guía</span>
        </a>
    </nav>
</aside>