@props(['title' => null, 'heading' => null, 'description' => null])
@php
    $user = auth()->user();
    $workspace = $currentWorkspace ?? null;
    $isOrg = $workspace?->isOrganization() ?? false;
    $verified = $user->hasVerifiedEmail();
    $nav = [
        ['route' => 'dashboard', 'icon' => 'home', 'label' => __('Inicio'), 'show' => $verified],
        ['route' => 'applications', 'icon' => 'squares', 'label' => __('Mis aplicaciones'), 'show' => $verified],
        ['route' => 'workspace.show', 'icon' => $isOrg ? 'building' : 'user', 'label' => __('Mi espacio'), 'show' => $verified],
        ['route' => 'members.index', 'icon' => 'users', 'label' => __('Miembros'), 'show' => $verified && $isOrg && $user->can('viewMembers', $workspace)],
        ['route' => 'invitations.index', 'icon' => 'envelope', 'label' => __('Invitaciones'), 'show' => $verified && $isOrg && $user->can('viewInvitations', $workspace)],
        ['route' => 'settings.edit', 'icon' => 'cog', 'label' => __('Configuración'), 'show' => $verified && $isOrg && $user->can('update', $workspace)],
    ];
@endphp
<x-layouts.html :title="$title ?? $heading">
    <div class="min-h-full" x-data="{ menu: false }">
        {{-- Barra superior --}}
        <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/90 backdrop-blur">
            <div class="flex h-16 items-center gap-3 px-4 sm:px-6">
                <button type="button" class="-ml-1 rounded-lg p-2 text-slate-500 hover:bg-slate-100 lg:hidden" x-on:click="menu = true" aria-label="{{ __('Abrir menú') }}">
                    <x-icon name="menu" class="size-6" />
                </button>
                <a href="{{ route('dashboard') }}" class="hidden shrink-0 sm:block lg:w-56">
                    <x-logo />
                </a>
                @if ($workspace && $verified)
                    <x-workspace-switcher :current="$workspace" :memberships="$switcherMemberships ?? collect()" />
                @endif
                <div class="ml-auto">
                    <x-user-menu :user="$user" />
                </div>
            </div>
        </header>

        <div class="flex">
            {{-- Menú lateral (fijo en escritorio, deslizante en móvil) --}}
            <div x-show="menu" x-cloak class="fixed inset-0 z-40 bg-slate-900/40 lg:hidden" x-on:click="menu = false" aria-hidden="true"></div>
            <nav aria-label="{{ __('Menú principal') }}"
                class="fixed inset-y-0 left-0 z-50 w-64 -translate-x-full overflow-y-auto border-r border-slate-200 bg-white px-3 py-4 transition-transform lg:sticky lg:top-16 lg:z-auto lg:h-[calc(100vh-4rem)] lg:translate-x-0"
                x-bind:class="menu ? 'translate-x-0' : '-translate-x-full'">
                <div class="mb-4 flex items-center justify-between px-2 lg:hidden">
                    <x-logo />
                    <button type="button" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" x-on:click="menu = false" aria-label="{{ __('Cerrar menú') }}">
                        <x-icon name="x" class="size-5" />
                    </button>
                </div>
                <ul class="space-y-1">
                    @foreach ($nav as $item)
                        @if ($item['show'])
                            <li>
                                <x-nav-link :href="route($item['route'])" :icon="$item['icon']" :active="request()->routeIs($item['route'])">{{ $item['label'] }}</x-nav-link>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <div class="mt-6 border-t border-slate-100 pt-4">
                    <ul class="space-y-1">
                        <li><x-nav-link :href="route('profile.edit')" icon="user" :active="request()->routeIs('profile.*')">{{ __('Mi perfil') }}</x-nav-link></li>
                        @can('platform-admin')
                            <li><x-nav-link :href="route('admin.dashboard')" icon="shield">{{ __('Administración') }}</x-nav-link></li>
                        @endcan
                    </ul>
                </div>
            </nav>

            <main id="contenido" class="min-w-0 flex-1 px-4 py-6 sm:px-6 lg:px-10 lg:py-8">
                <div class="mx-auto max-w-5xl">
                    <x-flash />
                    @if ($heading)
                        <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
                            <div class="min-w-0">
                                <h1 class="text-2xl font-semibold tracking-tight text-slate-900">{{ $heading }}</h1>
                                @if ($description)
                                    <p class="mt-1 text-sm text-slate-500">{{ $description }}</p>
                                @endif
                            </div>
                            @isset($actions)
                                <div class="flex items-center gap-2">{{ $actions }}</div>
                            @endisset
                        </div>
                    @endif
                    {{ $slot }}
                </div>
            </main>
        </div>
    </div>
</x-layouts.html>