@php
    use Filament\Support\Enums\Width;

    $livewire ??= null;

    $hasTopbar = filament()->hasTopbar();
    $isSidebarCollapsibleOnDesktop = filament()->isSidebarCollapsibleOnDesktop();
    $isSidebarFullyCollapsibleOnDesktop = filament()->isSidebarFullyCollapsibleOnDesktop();
    $hasTopNavigation = filament()->hasTopNavigation();
    $hasNavigation = filament()->hasNavigation();
    $renderHookScopes = $livewire?->getRenderHookScopes();
    $maxContentWidth ??= (filament()->getMaxContentWidth() ?? Width::SevenExtraLarge);

    if (is_string($maxContentWidth)) {
        $maxContentWidth = Width::tryFrom($maxContentWidth) ?? $maxContentWidth;
    }
@endphp

<x-filament-panels::layout.base
    :livewire="$livewire"
    @class([
        'fi-body-has-navigation' => $hasNavigation,
        'fi-body-has-sidebar-collapsible-on-desktop' => $isSidebarCollapsibleOnDesktop,
        'fi-body-has-sidebar-fully-collapsible-on-desktop' => $isSidebarFullyCollapsibleOnDesktop,
        'fi-body-has-topbar' => $hasTopbar,
        'fi-body-has-top-navigation' => $hasTopNavigation,
    ])
>
    @if ($hasTopbar)
        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_BEFORE, scopes: $renderHookScopes) }}

        @livewire(filament()->getTopbarLivewireComponent())

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::TOPBAR_AFTER, scopes: $renderHookScopes) }}

        @if ($hasTopNavigation)
            @php
                $navigation = filament()->getNavigation() ?? collect();
                $activeGroupLabel = $navigation->first(fn ($g) => $g->isActive())?->getLabel() ?? '';
            @endphp

            {{-- Set sidebar width before first paint to prevent layout shift --}}
            <script>
                (function(){
                    var e = localStorage.getItem('fi_sidebar_expanded');
                    document.documentElement.style.setProperty('--fi-module-sidebar-width', e === 'false' ? '60px' : '240px');
                })();
            </script>

            <div
                class="fi-app-module-sidebar-desktop"
                x-data="{
                    expanded: localStorage.getItem('fi_sidebar_expanded') !== 'false',
                    open: localStorage.getItem('fi_sidebar_open') || @js($activeGroupLabel),
                    toggle() {
                        this.expanded = !this.expanded;
                        localStorage.setItem('fi_sidebar_expanded', this.expanded);
                        document.documentElement.style.setProperty('--fi-module-sidebar-width', this.expanded ? '240px' : '60px');
                    },
                    setOpen(label) {
                        this.open = (this.open === label) ? '' : label;
                        localStorage.setItem('fi_sidebar_open', this.open);
                    }
                }"
            >
                {{-- Toggle button --}}
                <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0">
                    <span x-show="expanded" style="flex:1;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:rgba(148,163,184,0.6);padding-left:6px">Menu</span>
                    <button x-on:click="toggle()" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:rgba(148,163,184,1);background:transparent;border:none;cursor:pointer;transition:background 0.15s,color 0.15s"
                        onmouseover="this.style.background='rgba(255,255,255,0.1)';this.style.color='white'"
                        onmouseout="this.style.background='transparent';this.style.color='rgba(148,163,184,1)'">
                        <svg x-bind:style="expanded ? '' : 'transform:rotate(180deg)'" style="transition:transform 0.2s ease" width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </button>
                </div>

                {{-- Expanded: accordion --}}
                <div x-show="expanded" style="display:none;flex:1;overflow-y:auto;padding:4px 0">
                    @foreach ($navigation as $group)
                        @php $groupLabel = $group->getLabel(); $isActive = $group->isActive(); $items = $group->getItems(); @endphp
                        <div style="border-bottom:1px solid rgba(255,255,255,0.05)">
                            <button type="button" x-on:click="setOpen(@js($groupLabel))"
                                style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:11px 12px;font-size:13px;font-weight:500;background:transparent;border:none;cursor:pointer;transition:color 0.15s,background 0.15s;color:{{ $isActive ? 'rgb(96,165,250)' : 'rgba(209,213,219,1)' }}"
                                onmouseover="if(!{{ $isActive ? 'true' : 'false' }})this.style.background='rgba(255,255,255,0.05)'"
                                onmouseout="this.style.background='transparent'">
                                <span style="display:flex;align-items:center;gap:10px">
                                    <x-filament::icon :icon="$group->getIcon()" style="width:18px;height:18px;flex-shrink:0" />
                                    {{ $groupLabel }}
                                </span>
                                <svg x-bind:style="open === @js($groupLabel) ? 'transform:rotate(90deg)' : ''" style="transition:transform 0.2s ease;flex-shrink:0;opacity:0.5" width="12" height="12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                                </svg>
                            </button>
                            <div x-show="open === @js($groupLabel)" style="display:none">
                                <div style="margin-left:34px;border-left:2px solid rgba(255,255,255,0.1);padding:3px 0 6px">
                                    @foreach ($items as $item)
                                        @php $isItemActive = $item->isActive(); $itemUrl = $item->getUrl(); $childItems = $item->getChildItems(); @endphp
                                        @if (count($childItems))
                                            <p style="padding:8px 10px 3px 14px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(148,163,184,0.5)">{{ $item->getLabel() }}</p>
                                            @foreach ($childItems as $child)
                                                <a href="{{ $child->getUrl() }}" style="display:block;padding:7px 10px 7px 14px;font-size:12.5px;text-decoration:none;color:{{ $child->isActive() ? 'rgb(96,165,250)' : 'rgba(148,163,184,1)' }};{{ $child->isActive() ? 'font-weight:500' : '' }};transition:color 0.15s"
                                                    onmouseover="this.style.color='white'" onmouseout="this.style.color='{{ $child->isActive() ? 'rgb(96,165,250)' : 'rgba(148,163,184,1)' }}'">{{ $child->getLabel() }}</a>
                                            @endforeach
                                        @else
                                            <a href="{{ $itemUrl }}" style="display:block;padding:8px 10px 8px 14px;font-size:12.5px;text-decoration:none;color:{{ $isItemActive ? 'rgb(96,165,250)' : 'rgba(148,163,184,1)' }};{{ $isItemActive ? 'font-weight:500' : '' }};transition:color 0.15s"
                                                onmouseover="this.style.color='white'" onmouseout="this.style.color='{{ $isItemActive ? 'rgb(96,165,250)' : 'rgba(148,163,184,1)' }}'">{{ $item->getLabel() }}</a>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Collapsed: icons only --}}
                <div x-show="!expanded" style="display:none;flex:1;flex-direction:column;align-items:center;padding:6px 0;gap:2px;overflow-y:auto">
                    @foreach ($navigation as $group)
                        @php $firstUrl = $group->getItems()->first()?->getUrl() ?? '#'; $isActive = $group->isActive(); @endphp
                        <a href="{{ $firstUrl }}" @class(['fi-app-module-item', 'fi-active' => $isActive]) title="{{ $group->getLabel() }}">
                            <x-filament::icon :icon="$group->getIcon()" />
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    @elseif ($hasNavigation)
        <div
            @if ($isSidebarFullyCollapsibleOnDesktop)
                x-data="{}"
                x-bind:class="{ 'lg:fi-hidden': $store.sidebar.isOpen }"
            @endif
            @class([
                'fi-layout-sidebar-toggle-btn-ctn',
                'lg:fi-hidden' => ! $isSidebarFullyCollapsibleOnDesktop,
            ])
        >
            <x-filament::icon-button
                color="gray"
                :icon="\Filament\Support\Icons\Heroicon::OutlinedBars3"
                :icon-alias="\Filament\View\PanelsIconAlias::SIDEBAR_EXPAND_BUTTON"
                icon-size="lg"
                :label="__('filament-panels::layout.actions.sidebar.expand.label')"
                x-cloak
                x-data="{}"
                x-on:click="$store.sidebar.open()"
                class="fi-layout-sidebar-toggle-btn"
            />
        </div>
    @endif

    <div class="fi-layout">
        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_START, scopes: $renderHookScopes) }}

        @if ($hasNavigation)
            <div
                x-cloak
                x-data="{}"
                x-on:click="$store.sidebar.close()"
                x-show="$store.sidebar.isOpen"
                x-transition.opacity.300ms
                class="fi-sidebar-close-overlay"
            ></div>

            @livewire(filament()->getSidebarLivewireComponent())
        @endif

        <div
            @if ($isSidebarCollapsibleOnDesktop)
                x-data="{}"
                x-bind:class="{
                    'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
                }"
                x-bind:style="'display: flex; opacity:1;'"
                {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
            @elseif ($isSidebarFullyCollapsibleOnDesktop)
                x-data="{}"
                x-bind:class="{
                    'fi-main-ctn-sidebar-open': $store.sidebar.isOpen,
                }"
                x-bind:style="'display: flex; opacity:1;'"
                {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
            @elseif (! ($isSidebarCollapsibleOnDesktop || $isSidebarFullyCollapsibleOnDesktop || $hasTopNavigation || (! $hasNavigation)))
                x-data="{}"
                x-bind:style="'display: flex; opacity:1;'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
            @endif
            class="fi-main-ctn"
        >
            {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_BEFORE, scopes: $renderHookScopes) }}

            <main
                @class([
                    'fi-main',
                    ($maxContentWidth instanceof Width) ? "fi-width-{$maxContentWidth->value}" : $maxContentWidth,
                ])
            >
                {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_START, scopes: $renderHookScopes) }}

                {{ $slot }}

                {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_END, scopes: $renderHookScopes) }}
            </main>

            {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::CONTENT_AFTER, scopes: $renderHookScopes) }}

            {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::FOOTER, scopes: $renderHookScopes) }}
        </div>

        {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::LAYOUT_END, scopes: $renderHookScopes) }}
    </div>
</x-filament-panels::layout.base>