@php
    $route = request()->route()?->getName() ?? '';

    // Definición del menú completa con permisos
    $menu = [
        'plataforma' => [
            'label' => 'Plataforma',
            'icon'  => 'server',
            'routes' => ['environments.*','types.*', 'supports.*'],
            'items' => [
                ['icon' => 'globe-alt', 'route' => 'environments.index', 'text' => 'Entornos', 'permission' => 'admin.environments.index'],
                ['icon' => 'adjustments-horizontal', 'route' => 'types.index', 'text' => 'Tipos de entorno', 'permission' => 'admin.types.index'],
                ['icon' => 'lifebuoy', 'route' => 'supports.index', 'text' => 'Tipos de soporte', 'permission' => 'admin.supports.index'],
            ]
        ],

        'usuarios' => [
            'label' => 'Usuarios',
            'icon'  => 'users',
            'routes' => ['users.*', 'roles.*', 'permissions.*'],
            'items' => [
                ['icon' => 'user', 'route' => 'users.index', 'text' => 'Usuarios', 'permission' => 'admin.users.index'],
                ['icon' => 'shield-check', 'route' => 'roles.index', 'text' => 'Roles', 'permission' => 'admin.roles.index'],
                ['icon' => 'key', 'route' => 'permissions.index', 'text' => 'Permisos', 'permission' => 'admin.permissions.index'],
            ]
        ],

        'clientes' => [
            'label' => 'Clientes',
            'icon'  => 'briefcase',
            'routes' => ['clients.*'],
            'items' => [
                ['icon' => 'building-office', 'route' => 'clients.index', 'text' => 'Clientes', 'permission' => 'admin.clients.index'],
            ]
        ],

        'licencias' => [
            'label' => 'Licencias',
            'icon'  => 'key',
            'routes' => ['products.*', 'license_tokens.*'],
            'items' => [
                ['icon' => 'cube', 'route' => 'products.index', 'text' => 'Productos', 'permission' => 'admin.products.index'],
                ['icon' => 'finger-print', 'route' => 'license_tokens.index', 'text' => 'Tokens', 'permission' => 'admin.license-tokens.index'],
            ]
        ],

        'monitorizacion' => [
            'label' => 'Monitorización',
            'icon'  => 'chart-bar',
            'routes' => ['api-logs.*'],
            'items' => [
                ['icon' => 'clipboard-document', 'route' => 'api-logs.index', 'text' => 'API Logs', 'permission' => 'admin.api-logs.index'],
            ]
        ],

        'reportes' => [
            'label' => 'Reportes',
            'icon'  => 'chart-bar',
            'routes' => ['reports.*'],
            'items' => [] // vacío por ahora
        ],
    ];
    
    // Filtrar items del menú según permisos del usuario
    foreach ($menu as $key => $group) {
        $menu[$key]['items'] = collect($group['items'])->filter(function ($item) {
            return !isset($item['permission']) || auth()->user()?->can($item['permission']);
        })->values()->toArray();
    }
    
    // Filtrar grupos vacíos
    $menu = array_filter($menu, function ($group) {
        return !empty($group['items']);
    });

    // Determinar qué sección debe abrirse
    $open = collect($menu)
    ->first(fn($g) =>
        collect($g['routes'])->contains(fn($r) => request()->routeIs($r))
    )['label'] ?? null;

@endphp

<div x-data="{ open: '{{ $open }}' }" class="space-y-5">

    {{-- Título --}}
    <div class="px-4 pt-3 pb-1">
        <img
            src="{{ Storage::url('images_static/tresipunt.png') }}"
            alt="Tresipunt Manager"
            class="h-10 w-auto opacity-90"
        >
    </div>

@foreach ($menu as $key => $group)
        <div class="px-2">

            {{-- Botón principal --}}
            <button
                @click="open = (open === '{{ $group['label'] }}') ? null : '{{ $group['label'] }}'"
                class="flex w-full items-center justify-between px-3 py-2.5
                       rounded-lg bg-white shadow-sm
                       hover:bg-gray-50 active:bg-gray-100
                       transition duration-150 border border-gray-200"
            >
                <span class="flex items-center space-x-3">
                    <x-dynamic-component
                        :component="'icon.' . $group['icon']"
                        class="w-5 h-5 text-gray-700 opacity-80"
                    />
                    <span class="font-medium text-gray-800 tracking-tight">
                        {{ $group['label'] }}
                    </span>
                </span>

                <x-icon.chevron-down
                    class="w-4 h-4 text-gray-600 transition-transform duration-300"
                    x-bind:class="{ 'rotate-180': open === '{{ $group['label'] }}' }"
                />
            </button>

            {{-- Enlaces internos --}}
            <div
                x-show="open === '{{ $group['label'] }}'"
                x-collapse
                class="mt-2 ml-4 space-y-1 border-l border-gray-200 pl-4"
            >
                @foreach ($group['items'] as $item)
                    <x-sidebar-link
                        :icon="$item['icon']"
                        :route="$item['route']"
                        :text="$item['text']"
                    />
                @endforeach
            </div>

        </div>
    @endforeach

</div>