App Shell

@props([
    'title' => 'Overview',
    'org' => 'Finlo',
    'plan' => 'Personal',
    'user' => null,
    'nav' => null,
    // Forwarded to the composed ai-tools-inbox block ({title, messages}).
    // Ignored once the `aside` slot is supplied.
    'assistant' => null,
])

@php
    $user ??= ['name' => 'Avery Quinn', 'email' => 'avery@finlo.app', 'initials' => 'AQ'];

    $nav ??= [
        [
            'heading' => 'Track',
            'items' => [
                ['label' => 'Overview', 'icon' => 'grid', 'href' => '#', 'current' => true],
                ['label' => 'Spendings', 'icon' => 'card', 'href' => '#'],
                ['label' => 'Goal', 'icon' => 'target', 'href' => '#'],
                ['label' => 'Investments', 'icon' => 'chart', 'href' => '#'],
            ],
        ],
        [
            'heading' => 'Services',
            'items' => [
                ['label' => 'Assistant', 'icon' => 'sparkle', 'href' => '#'],
                ['label' => 'Settings', 'icon' => 'settings', 'href' => '#'],
            ],
        ],
    ];

    // Workspace switcher: a static demo list. In a real app pass `workspaces`/
    // `currentWorkspace`/`action` through to organization-switcher instead.
    $workspaces = [
        ['id' => 'finlo', 'name' => $org, 'secondary' => $plan, 'initials' => 'F'],
        ['id' => 'nimbus', 'name' => 'Nimbus Ventures', 'secondary' => 'Team plan'],
        ['id' => 'lumen', 'name' => 'Lumen Capital', 'secondary' => 'Team plan'],
    ];

    $assistantTitle = $assistant['title'] ?? __('AI Inbox');
    $assistantMessages = $assistant['messages'] ?? null;

    // 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"/>',
        'card' => '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
        'target' => '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
        'chart' => '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
        'sparkle' => '<path d="m12 3-1.9 5.8a2 2 0 0 1-1.287 1.288L3 12l5.8 1.9a2 2 0 0 1 1.288 1.287L12 21l1.9-5.8a2 2 0 0 1 1.287-1.288L21 12l-5.8-1.9a2 2 0 0 1-1.288-1.287Z"/>',
        '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="min-h-svh">
    <x-ui.skip-link />
    <div class="flex h-svh w-full overflow-hidden">
        {{-- Sidebar: workspace switcher, grouped nav and a user menu in the footer. --}}
        <x-ui.sidebar class="max-md:hidden">
            <x-ui.sidebar.header x-bind:class="expanded ? 'justify-between' : 'justify-center'">
                <x-ui.organization-switcher
                    x-show="expanded"
                    class="flex-1"
                    :organizations="$workspaces"
                    current="finlo"
                    action="#"
                    name="workspace_id"
                    :label="__('Switch workspace')"
                    :search-label="__('Search workspaces')"
                    :empty-label="__('No workspaces available')"
                />
                <x-ui.sidebar.trigger class="shrink-0" />
            </x-ui.sidebar.header>

            <x-ui.sidebar.content>
                @foreach ($nav as $group)
                    <x-ui.sidebar.group>
                        <x-ui.sidebar.group-label>{{ __($group['heading']) }}</x-ui.sidebar.group-label>
                        <x-ui.sidebar.menu>
                            @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>
                                    </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 />
                {{-- User menu: user-identity names the signed-in member while expanded;
                     collapsed rail falls back to just the avatar, matching the other
                     open shells' expand/collapse idiom. --}}
                <x-ui.dropdown>
                    <x-ui.dropdown.trigger class="w-full gap-2 rounded-md p-2 hover:bg-muted" x-bind:class="expanded || 'justify-center'">
                        <x-ui.user-identity x-show="expanded" :name="$user['name']" :secondary="$user['email']" :fallback="$user['initials']" mode="compact" class="min-w-0 flex-1" />
                        <x-ui.avatar x-show="!expanded" size="sm" :fallback="$user['initials']" :alt="$user['name']" />
                        <svg x-show="expanded" class="ms-auto size-4 shrink-0 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
                    </x-ui.dropdown.trigger>
                    <x-ui.dropdown.content align="end" class="w-56">
                        <x-ui.dropdown.label>{{ $user['name'] }}</x-ui.dropdown.label>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Profile') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.item href="#">{{ __('Settings') }}</x-ui.dropdown.item>
                        <x-ui.dropdown.separator />
                        <x-ui.dropdown.item href="#">{{ __('Sign out') }}</x-ui.dropdown.item>
                    </x-ui.dropdown.content>
                </x-ui.dropdown>
            </x-ui.sidebar.footer>
        </x-ui.sidebar>

        {{-- Main: inset content column, independent scroll from the sidebar and the assistant rail. --}}
        <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-assistant-mobile-nav" />

            <header class="flex h-16 shrink-0 items-center gap-4 border-b border-border 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>
                            <x-ui.breadcrumb.page>{{ __($title) }}</x-ui.breadcrumb.page>
                        </x-ui.breadcrumb.item>
                    </x-ui.breadcrumb.list>
                </x-ui.breadcrumb>

                {{-- Below `2xl` the assistant rail is hidden; this opens the same panel in an end-side sheet. --}}
                <x-ui.button id="app-shell-assistant-trigger" variant="outline" size="sm" class="inline-flex shrink-0 gap-2 whitespace-nowrap 2xl:hidden" x-data x-on:click="$dispatch('app-shell-assistant:open-assistant')">
                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons['sparkle'] !!}</svg>
                    {{ __('Assistant') }}
                </x-ui.button>

                <x-ui.avatar size="sm" :fallback="$user['initials']" :alt="$user['name']" class="shrink-0" />
            </header>

            <div data-slot="app-shell-content" class="flex-1 overflow-auto p-4 sm:p-6">
                @if (trim($slot) !== '')
                    {{ $slot }}
                @else
                    <div class="mx-auto flex max-w-5xl flex-col gap-6">
                        <div>
                            <h1 class="text-2xl font-bold tracking-tight">{{ __($title) }}</h1>
                            <p class="mt-2 text-sm text-muted-foreground">{{ __('A snapshot of your finances, with the assistant one click away.') }}</p>
                        </div>

                        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                            <x-ui.tray :title="__('Total balance')">
                                <x-ui.stat variant="plain" value="$24,850" delta="+4.2%" description="{{ __('Across 3 accounts') }}" />
                            </x-ui.tray>
                            <x-ui.tray :title="__('This month spend')">
                                <x-ui.stat variant="plain" value="$3,120" delta="-1.8%" inverse description="{{ __('12 transactions') }}" />
                            </x-ui.tray>
                            <x-ui.tray :title="__('Savings goal')">
                                <x-ui.stat variant="plain" value="68%" :progress="68" description="{{ __('On track for December') }}" />
                            </x-ui.tray>
                        </div>

                        <x-ui.card>
                            <x-ui.card.header>
                                <x-ui.card.title>{{ __('Content area') }}</x-ui.card.title>
                                <x-ui.card.description>{{ __('Compose your application views inside the main column.') }}</x-ui.card.description>
                            </x-ui.card.header>
                            <x-ui.card.content>
                                <div class="flex min-h-64 items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 text-sm text-muted-foreground">
                                    {{ __('Your page content goes here') }}
                                </div>
                            </x-ui.card.content>
                        </x-ui.card>
                    </div>
                @endif
            </div>
        </x-ui.sidebar.inset>

        {{-- Assistant rail: persistent at `2xl` and wider. --}}
        <aside class="hidden w-96 shrink-0 border-s border-border 2xl:flex 2xl:flex-col">
            @isset($aside)
                {{ $aside }}
            @else
                <x-blocks.ai-tools-inbox :title="$assistantTitle" :messages="$assistantMessages" />
            @endisset
        </aside>

        {{-- Below `2xl`, the same panel opens from the header button and closes on
             Escape, an overlay click, or the block's own dismiss button. --}}
        <x-ui.sheet
            @app-shell-assistant:open-assistant.window="show()"
            @ai-tools-inbox:close.window="hide()"
        >
            <x-ui.sheet.content id="app-shell-assistant-sheet" side="end" size="md" class="flex flex-col overflow-hidden !p-0">
                <x-ui.sheet.title class="sr-only">{{ $assistantTitle }}</x-ui.sheet.title>
                @isset($aside)
                    {{ $aside }}
                @else
                    <x-blocks.ai-tools-inbox :title="$assistantTitle" :messages="$assistantMessages" dismissible />
                @endisset
            </x-ui.sheet.content>
        </x-ui.sheet>
    </div>
</x-ui.section>