App Shell

@props([
    'title' => 'Reports',
    'org' => 'Helio Labs',
    'user' => null,
    'nav' => null,
])

@php
    $user ??= ['name' => 'Sam Okafor', 'email' => 'sam@heliolabs.dev', 'initials' => 'SO'];

    // Each group is collapsible; `open` controls its initial expanded state.
    $nav ??= [
        [
            'heading' => 'General',
            'open' => true,
            'items' => [
                ['label' => 'Dashboard', 'icon' => 'grid', 'href' => '#', 'current' => true],
                ['label' => 'Reports', 'icon' => 'chart', 'href' => '#'],
                ['label' => 'Calendar', 'icon' => 'calendar', 'href' => '#'],
            ],
        ],
        [
            'heading' => 'Projects',
            'open' => true,
            'items' => [
                ['label' => 'Active', 'icon' => 'folder', 'href' => '#', 'badge' => '6'],
                ['label' => 'Archived', 'icon' => 'archive', 'href' => '#'],
                ['label' => 'Templates', 'icon' => 'layers', 'href' => '#'],
            ],
        ],
        [
            'heading' => 'Administration',
            'open' => false,
            'items' => [
                ['label' => 'Members', 'icon' => 'users', 'href' => '#'],
                ['label' => 'Billing', 'icon' => 'card', 'href' => '#'],
                ['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
            ],
        ],
    ];

    // Trusted, developer-authored icon paths rendered inside menu buttons (escaped
    // output would mangle the SVG markup). Never feed user input through this map.
    $icons = [
        'grid' => '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
        'chart' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
        'calendar' => '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
        'folder' => '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
        'archive' => '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
        'layers' => '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
        'users' => '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
        'card' => '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
        'settings' => '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
    ];

    // Same groups as $nav, with each item's icon key resolved to raw SVG shape
    // markup, so the mobile sidebar part can render icons without knowing this
    // page's icon map.
    $mobileNav = collect($nav)->map(fn ($group) => [
        'heading' => $group['heading'],
        'items' => collect($group['items'])->map(fn ($item) => [
            ...$item,
            'icon' => $icons[$item['icon']] ?? null,
        ])->all(),
    ])->all();
@endphp

<x-ui.section data-surface="admin" space="none" class="h-svh" {{ $attributes }}>
    <x-ui.skip-link />
    <div class="flex h-svh w-full overflow-hidden">
        {{-- Sidebar with collapsible nav GROUPS. --}}
        <x-ui.sidebar class="max-md:hidden">
            <x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
                <a href="#" x-show="expanded" class="flex min-w-0 items-center gap-2">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-sm font-semibold text-primary-foreground" aria-hidden="true">H</span>
                    <span class="truncate text-sm font-semibold leading-tight">{{ __($org) }}</span>
                </a>
                <x-ui.sidebar.trigger class="shrink-0" />
            </x-ui.sidebar.header>

            <x-ui.sidebar.content>
                @foreach ($nav as $group)
                    <x-ui.sidebar.group x-data="{ open: {{ $group['open'] ? 'true' : 'false' }} }">
                        {{-- Collapsible group header — only interactive while the rail is expanded. --}}
                        <button
                            type="button"
                            x-show="expanded"
                            @click="open = ! open"
                            x-bind:aria-expanded="open ? 'true' : 'false'"
                            class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
                        >
                            <span class="truncate">{{ __($group['heading']) }}</span>
                            <svg class="ms-auto size-4 shrink-0 transition-transform" x-bind:class="open ? 'rotate-90' : 'rtl:-scale-x-100'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                        </button>
                        <x-ui.sidebar.menu x-show="! expanded || open" x-collapse>
                            @foreach ($group['items'] as $item)
                                <x-ui.sidebar.menu-item>
                                    <x-ui.sidebar.menu-button :href="$item['href']" :active="$item['current'] ?? false" x-bind:class="expanded || 'justify-center'" :title="__($item['label'])">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$item['icon']] ?? '' !!}</svg>
                                        <span x-show="expanded" class="truncate">{{ __($item['label']) }}</span>
                                        @isset($item['badge'])
                                            <x-ui.badge variant="secondary" x-show="expanded" class="ms-auto">{{ $item['badge'] }}</x-ui.badge>
                                        @endisset
                                    </x-ui.sidebar.menu-button>
                                </x-ui.sidebar.menu-item>
                            @endforeach
                        </x-ui.sidebar.menu>
                    </x-ui.sidebar.group>
                @endforeach
            </x-ui.sidebar.content>

            <x-ui.sidebar.footer>
                <x-ui.sidebar.separator />
                <div class="flex items-center gap-2 rounded-md p-2" x-bind:class="expanded || 'justify-center'">
                    <x-ui.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" />
                    <span x-show="expanded" class="flex min-w-0 flex-col">
                        <span class="truncate text-sm font-medium leading-tight">{{ $user['name'] }}</span>
                        <span class="truncate text-sm text-muted-foreground">{{ $user['email'] }}</span>
                    </span>
                </div>
            </x-ui.sidebar.footer>
        </x-ui.sidebar>

        {{-- Slim breadcrumb bar + scrollable main column. --}}
        <x-ui.sidebar.inset id="main-content" class="min-w-0">
            {{-- Mobile navigation: the desktop sidebar is hidden below `md`, so a hamburger opens the full nav in a start-side sheet. --}}
            <x-ui.sidebar.mobile :nav="$mobileNav" :label="$org" id="app-shell-03-mobile-nav" />

            <header class="flex h-12 shrink-0 items-center gap-4 border-b border-border bg-background px-4 sm:px-6">
                <x-ui.breadcrumb class="min-w-0 flex-1">
                    <x-ui.breadcrumb.list>
                        <x-ui.breadcrumb.item class="max-sm:hidden">
                            <x-ui.breadcrumb.link href="#">{{ __($org) }}</x-ui.breadcrumb.link>
                        </x-ui.breadcrumb.item>
                        <x-ui.breadcrumb.separator class="max-sm:hidden" />
                        <x-ui.breadcrumb.item class="max-sm:hidden">
                            <x-ui.breadcrumb.link href="#">{{ __('Analytics') }}</x-ui.breadcrumb.link>
                        </x-ui.breadcrumb.item>
                        <x-ui.breadcrumb.separator class="max-sm:hidden" />
                        <x-ui.breadcrumb.item>
                            <x-ui.breadcrumb.page>{{ __($title) }}</x-ui.breadcrumb.page>
                        </x-ui.breadcrumb.item>
                    </x-ui.breadcrumb.list>
                </x-ui.breadcrumb>
                <x-ui.button variant="ghost" size="sm" class="whitespace-nowrap shrink-0">{{ __('Share') }}</x-ui.button>
                <x-ui.button size="sm" class="whitespace-nowrap shrink-0">{{ __('Export') }}</x-ui.button>
            </header>

            {{-- Scrollable main column with plenty of placeholder content. --}}
            <div data-slot="app-shell-content" class="flex-1 overflow-auto" role="region" aria-label="{{ __('Report content') }}" tabindex="0">
                @if (trim($slot) !== '')
                    <div class="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8">
                        {{ $slot }}
                    </div>
                @else
                    <div class="mx-auto flex max-w-6xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
                        <div>
                            <h1 class="text-2xl font-bold tracking-tight">{{ __($title) }}</h1>
                            <p class="mt-2 text-sm text-muted-foreground">{{ __('Scroll through the full breakdown of this period.') }}</p>
                        </div>

                        @foreach (['Performance', 'Engagement', 'Retention'] as $sectionIndex => $section)
                            <section class="flex flex-col gap-4">
                                <div class="flex items-center justify-between gap-4">
                                    <h2 class="text-lg font-semibold tracking-tight">{{ __($section) }}</h2>
                                    <x-ui.badge variant="outline">{{ __('Section') }} {{ $sectionIndex + 1 }}</x-ui.badge>
                                </div>
                                <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                                    @for ($i = 0; $i < 3; $i++)
                                        <x-ui.card>
                                            <x-ui.card.header>
                                                <x-ui.card.title class="text-sm font-medium text-muted-foreground">{{ __($section) }} {{ __('metric') }} {{ $i + 1 }}</x-ui.card.title>
                                                <x-ui.card.description class="text-2xl font-bold text-foreground tabular-nums">{{ number_format(($sectionIndex + 1) * 1240 + $i * 318) }}</x-ui.card.description>
                                            </x-ui.card.header>
                                            <x-ui.card.content class="flex flex-col gap-2">
                                                <x-ui.progress :value="40 + ($i * 18) + ($sectionIndex * 6)" :label="__(':metric metric :n progress', ['metric' => $section, 'n' => $i + 1])" />
                                                <p class="text-sm text-muted-foreground">{{ __('Compared to the previous period.') }}</p>
                                            </x-ui.card.content>
                                        </x-ui.card>
                                    @endfor
                                </div>
                            </section>
                        @endforeach

                        <x-ui.card>
                            <x-ui.card.header>
                                <x-ui.card.title>{{ __('Notes') }}</x-ui.card.title>
                                <x-ui.card.description>{{ __('Drop your detailed report content into this scrollable column.') }}</x-ui.card.description>
                            </x-ui.card.header>
                            <x-ui.card.content class="flex flex-col gap-4 text-sm text-muted-foreground">
                                @for ($i = 0; $i < 4; $i++)
                                    <p>{{ __('This main column scrolls independently of the fixed sidebar, so long reports stay readable while navigation remains pinned in place.') }}</p>
                                @endfor
                            </x-ui.card.content>
                        </x-ui.card>
                    </div>
                @endif
            </div>
        </x-ui.sidebar.inset>
    </div>
</x-ui.section>