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

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

<nav {{ $attributes->merge(['class' => "sticky top-20 z-20 flex w-full flex-wrap items-center gap-1.5 p-2 $class"]) }}>
<!-- <nav {{ $attributes->merge(['class' => "sticky top-20 z-20 flex w-full items-center gap-2 p-3 $class"]) }}> -->

    
    @foreach ($items as $item)
        @php
            $children = $item['children'] ?? [];
            $hasChildren = ! empty($children);

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

            $isActive = $item['active'] ?? false;
            $badge_key = $item['badge_key'] ?? null;
            $badge = $item['badge'] ?? ($badge_key ? ($badges[$badge_key] ?? null) : null);
            $data = $item['data'] ?? [];
        @endphp

        {{-- SINGLE ITEM --}}
        @if (! $hasChildren)
            <button 
                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
            </button>
        @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">
                    <button
                       @mouseenter="hoverOpen($event)"
                       @mouseleave="hoverMaybeClose()"
                       wire:click="updateLicenseTypeAndSection(@js($licenseType), @js($url))"
                       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" />
                    </button>
                </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
                                $childLegalSection     = $child['url'] ?? null;
                                $childLicenseType = $child['license_type'] ?? null;
                                $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;
                                $cBadgeKey = $child['badge_key'] ?? null;
                                $cBadge = $child['badge'] ?? ($cBadgeKey ? ($badges[$cBadgeKey] ?? null) : null);
                            @endphp

                            <button class="fi-dropdown-list-item text-xs" wire:click="updateLicenseTypeAndSection(@js($childLicenseType), @js($childLegalSection))">
                                @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
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    @endforeach
</nav>