@props(['menus'])

@php
    $sidebarMenuService = app(\App\Services\SidebarMenuService::class);
@endphp

@foreach($menus as $toolsGroup)
    @php
        $groupId = 'tools-group-' . $toolsGroup->id;
        $children = $toolsGroup->menuChildren ?? collect();
        $hasChildren = $children->isNotEmpty();
        $isExpanded = $sidebarMenuService->isMenuOrChildActive($toolsGroup);
    @endphp

    {{-- 그룹 헤더 (접기/펼치기 버튼) --}}
    <button
        onclick="toggleGroup('{{ $groupId }}')"
        class="sidebar-group-header w-full flex items-center justify-between px-3 py-2 text-xs font-bold text-gray-600 uppercase tracking-wider hover:bg-gray-100 rounded"
    >
        <span class="flex items-center gap-2">
            @if($toolsGroup->icon)
                <x-sidebar.menu-icon :icon="$toolsGroup->icon" class="w-4 h-4 text-orange-500" />
            @else
                <svg class="w-4 h-4 text-orange-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
            @endif
            <span class="sidebar-text">{{ $toolsGroup->name }}</span>
        </span>
        <svg
            id="{{ $groupId }}-icon"
            class="w-3 h-3 transition-transform sidebar-text"
            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="{{ $groupId }}" class="space-y-1 mt-1">
        @if($hasChildren)
            @foreach($children as $child)
                @php
                    $isActive = $sidebarMenuService->isMenuActive($child);
                    $url = $child->is_external ? $child->external_url : $child->url;
                @endphp
                <li>
                    <a href="{{ $url }}"
                       class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100 {{ $isActive ? 'bg-primary text-white hover:bg-primary' : '' }}"
                       title="{{ $child->name }}"
                       @if($child->is_external) target="_blank" rel="noopener noreferrer" @endif>
                        @if($child->icon)
                            <x-sidebar.menu-icon :icon="$child->icon" class="w-4 h-4 flex-shrink-0" />
                        @else
                            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        @endif
                        <span class="font-medium sidebar-text">{{ $child->name }}</span>
                    </a>
                </li>
            @endforeach
        @endif
    </ul>
@endforeach