@props(['favorites' => collect()])

@if($favorites->isNotEmpty())
<li id="sidebar-favorites-section" class="pb-2 mb-1">
    <button
        onclick="toggleMenuGroup('menu-group-favorites')"
        class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 rounded"
        style="padding-left: 0.75rem"
    >
        <span class="flex items-center gap-2">
            <svg class="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            <span class="sidebar-text">즐겨찾기</span>
        </span>
        <svg
            id="menu-group-favorites-icon"
            class="w-3 h-3 transition-transform sidebar-text rotate-180"
            fill="none" stroke="currentColor" viewBox="0 0 24 24"
        >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <ul id="menu-group-favorites" class="menu-group-content space-y-0.5 mt-1">
        @foreach($favorites as $fav)
            @if($fav->menu)
                @php
                    $menu = $fav->menu;
                    $sidebarMenuService = app(\App\Services\SidebarMenuService::class);
                    $isActive = $sidebarMenuService->isMenuActive($menu);
                    $url = $menu->url;
                    $routeName = $menu->getRouteName();
                    if ($routeName && !str_contains($routeName, '*') && \Route::has($routeName)) {
                        $url = route($routeName);
                    }
                    $activeClass = $isActive
                        ? 'bg-primary text-white hover:bg-primary'
                        : 'text-gray-700 hover:bg-gray-100';

                    // 뱃지 확인 (menu-item.blade.php와 동일 로직)
                    $badgeCount = 0;
                    $badgeColor = '#ef4444';
                    if (isset($menuBadges)) {
                        $badge = null;
                        if ($routeName && isset($menuBadges['byRoute'][$routeName])) {
                            $badge = $menuBadges['byRoute'][$routeName];
                        } elseif ($menu->url && isset($menuBadges['byUrl'][$menu->url])) {
                            $badge = $menuBadges['byUrl'][$menu->url];
                        }
                        if ($badge) {
                            $badgeCount = is_array($badge) ? ($badge['count'] ?? 0) : $badge;
                            $badgeColor = is_array($badge) ? ($badge['color'] ?? '#ef4444') : '#ef4444';
                        }
                    }
                @endphp
                <li>
                    <a href="{{ $url }}"
                       class="group flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm {{ $activeClass }}"
                       style="padding-left: 1.5rem"
                       title="{{ $menu->name }}"
                    >
                        @if($menu->icon)
                            <x-sidebar.menu-icon :icon="$menu->icon" />
                        @endif
                        <span class="sidebar-text flex-1">{{ $menu->name }}</span>
                        @if($badgeCount > 0)
                            <span class="sidebar-text inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-xs font-bold text-white rounded-full"
                                  style="background-color: {{ $badgeColor }};">
                                {{ $badgeCount > 99 ? '99+' : $badgeCount }}
                            </span>
                        @endif
                        <button type="button"
                                onclick="event.preventDefault(); event.stopPropagation(); toggleMenuFavorite({{ $menu->id }}, this)"
                                class="sidebar-text shrink-0 p-0.5 rounded transition-colors text-yellow-400 hover:text-yellow-500"
                                title="즐겨찾기 해제">
                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                        </button>
                    </a>
                </li>
            @endif
        @endforeach
    </ul>
</li>
@endif