@props([
    'menu' => [],
    'class' => '',
])

@php
    $items = $menu['items'] ?? $menu;
@endphp

<nav {{ $attributes->merge(['class' => 'sticky top-16 z-20 flex w-full flex-wrap items-center gap-1.5 p-2' . $class]) }}>
    @foreach ($items as $item)
        @php
            $children = $item['children'] ?? [];
            $hasChildren = ! empty($children);

            $url = $item['url'] ?? '#';
            $target = $item['target'] ?? null;
            $iconName = $item['icon'] ?? null;
            $icon = $iconName
                ? (\Illuminate\Support\Str::startsWith($iconName, 'o-')
                    ? 'heroicon-' . $iconName
                    : 'heroicon-o-' . $iconName)
                : 'heroicon-o-circle';

            $isActive = $item['active'] ?? false;
            $badge = $item['badge'] ?? null;
        @endphp

        {{-- SINGLE ITEM --}}
        @if (! $hasChildren)
            <a href="{{ $url }}" @if ($target) target="{{ $target }}" @endif
               class="inline-flex flex-shrink items-center gap-1 rounded-xl px-2 py-1.5 hover:bg-gray-300 dark:hover:bg-gray-400 text-xs {{ $isActive ? 'bg-gray-100 dark:bg-gray-800/70' : '' }}">
                @if ($icon)
                    <x-filament::icon :icon="$icon" class="h-4 w-4" />
                @endif
                <span>{{ $item['label'] }}</span>
                @if (! empty($badge))
                    <x-filament::badge class="ml-1">{{ $badge }}</x-filament::badge>
                @endif
            </a>
        @else
            {{-- DROPDOWN (Filament-style, hover with teleport-safe delay) --}}
            <div
                x-data="() => ({
                    ...filamentDropdown(),
                    _t: null,
                    hoverOpen(e) { this.open(e) },
                    hoverMaybeClose() {
                        clearTimeout(this._t);
                        this._t = setTimeout(() => this.close(), 60);
                    },
                    cancelClose() { clearTimeout(this._t) },
                })"
                class="fi-dropdown inline-block"
            >
                <div class="fi-dropdown-trigger">
                    <a href="{{ $url }}"
                       @mouseenter="hoverOpen($event)"
                       @mouseleave="hoverMaybeClose()"
                       class="inline-flex items-center gap-1.5 rounded-xl px-2 py-1.5 hover:bg-gray-300 dark:hover:bg-gray-400 text-xs {{ $isActive ? 'bg-gray-100 dark:bg-gray-800/70' : '' }}">
                        @if ($icon)
                            <x-filament::icon :icon="$icon" class="h-4 w-4" />
                        @endif
                        <span>{{ $item['label'] }}</span>
                        @if (! empty($badge))
                            <x-filament::badge class="ml-1">{{ $badge }}</x-filament::badge>
                        @endif
                        <x-filament::icon icon="heroicon-o-chevron-down" class="h-4 w-4 opacity-70" />
                    </a>
                </div>

                <div
                    x-cloak
                    x-float.placement.bottom-start.flip.teleport.offset="{ offset: 8 }"
                    x-ref="panel"
                    x-transition:enter-start="fi-opacity-0"
                    x-transition:leave-end="fi-opacity-0"
                    @mouseenter="cancelClose()"
                    @mouseleave="hoverMaybeClose()"
                    class="fi-dropdown-panel z-[5000]"
                >
                    <div class="fi-dropdown-list">
                        @foreach ($children as $child)
                            @php
                                $cUrl     = $child['url'] ?? '#';
                                $cTarget  = $child['target'] ?? null;
                                $cIconRaw = $child['icon'] ?? null;
                                $cIcon    = $cIconRaw
                                    ? (\Illuminate\Support\Str::startsWith($cIconRaw, 'o-')
                                        ? 'heroicon-' . $cIconRaw
                                        : 'heroicon-o-' . $cIconRaw)
                                    : 'heroicon-o-circle';
                                $cBadge   = $child['badge'] ?? null;
                            @endphp

                            <a href="{{ $cUrl }}"
                               @if ($cTarget) target="{{ $cTarget }}" @endif
                               class="fi-dropdown-list-item text-xs">
                                @if ($cIcon)
                                    <x-filament::icon :icon="$cIcon" class="h-4 w-4" />
                                @endif
                                <span class="fi-dropdown-list-item-label">{{ $child['label'] }}</span>
                                @if (! empty($cBadge))
                                    <x-filament::badge class="ml-1">{{ $cBadge }}</x-filament::badge>
                                @endif
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</nav>