@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
                $sidebarNavigation = collect(filament()->getNavigation());
                $activeGroupLabel = $sidebarNavigation->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');
                    if (e === 'false') document.documentElement.classList.add('fi-sidebar-collapsed');
                    else document.documentElement.classList.remove('fi-sidebar-collapsed');
                })();
            </script>

            <div
                wire:ignore
                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');
                        document.documentElement.classList.toggle('fi-sidebar-collapsed', !this.expanded);
                    },
                    setOpen(label) {
                        this.open = (this.open === label) ? '' : label;
                        localStorage.setItem('fi_sidebar_open', this.open);
                    }
                }"
                style=""
            >
                {{-- Expanded: accordion --}}
                <div x-show="expanded" style="display:none;flex:1;overflow-y:auto;padding:4px 0">
                    @foreach ($sidebarNavigation as $group)
                        @php $groupLabel = $group->getLabel(); $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))"
                                data-sidebar-group="{{ $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:rgba(209,213,219,1)"
                                onmouseover="if(!this.dataset.active)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 $itemUrl = $item->getUrl(); $itemPath = parse_url($itemUrl, PHP_URL_PATH); $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)
                                                @php $childPath = parse_url($child->getUrl(), PHP_URL_PATH); @endphp
                                                <a wire:navigate href="{{ $child->getUrl() }}"
                                                    data-sidebar-item="{{ $childPath }}" data-sidebar-group="{{ $groupLabel }}"
                                                    style="display:block;padding:7px 10px 7px 14px;font-size:12.5px;text-decoration:none;color:rgba(148,163,184,1);transition:color 0.15s"
                                                    onmouseover="if(!this.dataset.active)this.style.color='white'"
                                                    onmouseout="if(!this.dataset.active)this.style.color='rgba(148,163,184,1)'">{{ $child->getLabel() }}</a>
                                            @endforeach
                                        @else
                                            <a wire:navigate href="{{ $itemUrl }}"
                                                data-sidebar-item="{{ $itemPath }}" data-sidebar-group="{{ $groupLabel }}"
                                                style="display:block;padding:8px 10px 8px 14px;font-size:12.5px;text-decoration:none;color:rgba(148,163,184,1);transition:color 0.15s"
                                                onmouseover="if(!this.dataset.active)this.style.color='white'"
                                                onmouseout="if(!this.dataset.active)this.style.color='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 ($sidebarNavigation as $group)
                        @php $firstUrl = $group->getItems()->first()?->getUrl() ?? '#'; @endphp
                        <a wire:navigate href="{{ $firstUrl }}"
                           data-sidebar-group="{{ $group->getLabel() }}" data-sidebar-icon
                           class="fi-app-module-item" title="{{ $group->getLabel() }}">
                            <x-filament::icon :icon="$group->getIcon()" />
                        </a>
                    @endforeach
                </div>

                {{-- Toggle button — pinned to bottom --}}
                <div style="height:48px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;border-top:1px solid rgba(255,255,255,0.07);flex-shrink:0">
                    <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 :style="'transform: rotate(' + (expanded ? '0deg' : '180deg') + '); 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>
            </div>

            <script>
                (function() {
                    function updateSidebarActive() {
                        var sidebar = document.querySelector('.fi-app-module-sidebar-desktop');
                        if (!sidebar) return;
                        var path = window.location.pathname;

                        // Reset all group buttons
                        sidebar.querySelectorAll('[data-sidebar-group]').forEach(function(el) {
                            el.style.color = el.hasAttribute('data-sidebar-icon')
                                ? '' : 'rgba(209,213,219,1)';
                            delete el.dataset.active;
                            if (el.hasAttribute('data-sidebar-icon')) el.classList.remove('fi-active');
                        });

                        // Reset all item links
                        sidebar.querySelectorAll('[data-sidebar-item]').forEach(function(el) {
                            el.style.color = 'rgba(148,163,184,1)';
                            el.style.fontWeight = 'normal';
                            delete el.dataset.active;
                        });

                        // Find single best matching item (longest prefix match wins)
                        var bestLen = 0, activeGroup = '', bestEl = null;
                        sidebar.querySelectorAll('[data-sidebar-item]').forEach(function(el) {
                            var itemPath = el.dataset.sidebarItem;
                            if (itemPath && (path === itemPath || path.startsWith(itemPath + '/')) && itemPath.length > bestLen) {
                                bestLen = itemPath.length;
                                bestEl = el;
                                activeGroup = el.dataset.sidebarGroup || '';
                            }
                        });

                        // Colour only the single best match
                        if (bestEl) {
                            bestEl.style.color = 'rgb(96,165,250)';
                            bestEl.style.fontWeight = '500';
                            bestEl.dataset.active = '1';
                        }

                        // Highlight active group button only (not the item links)
                        if (activeGroup) {
                            sidebar.querySelectorAll('[data-sidebar-group="' + activeGroup + '"]:not([data-sidebar-item])').forEach(function(el) {
                                el.style.color = 'rgb(96,165,250)';
                                el.dataset.active = '1';
                                if (el.hasAttribute('data-sidebar-icon')) el.classList.add('fi-active');
                            });
                        }
                    }

                    document.addEventListener('livewire:navigated', updateSidebarActive);
                    // Run immediately (DOM is ready since script is inline after sidebar)
                    // and also after a tick to catch any Alpine-deferred rendering
                    updateSidebarActive();
                    setTimeout(updateSidebarActive, 0);
                })();
            </script>
        @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>