@props(['menu', 'depth' => 0])

@php
    $sidebarMenuService = app(\App\Services\SidebarMenuService::class);
    $isExpanded = $sidebarMenuService->isMenuOrChildActive($menu);
    $groupId = 'menu-group-' . $menu->id;
    $children = $menu->menuChildren ?? collect();
    $hasChildren = $children->isNotEmpty();
    $paddingLeft = $depth > 0 ? ($depth * 0.75 + 0.75) . 'rem' : '0.75rem';
@endphp

<li class="pt-4 pb-1 border-t border-gray-200 mt-2">
    {{-- 그룹 헤더 (접기/펼치기 버튼) --}}
    <button
        onclick="toggleMenuGroup('{{ $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-50 rounded"
        style="padding-left: {{ $paddingLeft }}"
    >
        <span class="flex items-center gap-2">
            @if($menu->icon)
                <x-sidebar.menu-icon :icon="$menu->icon" class="w-4 h-4" />
            @endif
            <span class="sidebar-text">{{ $menu->name }}</span>
        </span>
        <svg
            id="{{ $groupId }}-icon"
            class="w-3 h-3 transition-transform sidebar-text {{ $hasChildren ? '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>

    {{-- 하위 메뉴 (자식이 있으면 기본 표시, localStorage에서 상태 복원) --}}
    <ul id="{{ $groupId }}" class="space-y-1 mt-1" style="display: {{ $hasChildren ? 'block' : 'none' }};">
        @foreach($children as $child)
            @if($child->menuChildren && $child->menuChildren->isNotEmpty())
                {{-- 하위에 또 그룹이 있는 경우 (중첩 그룹) --}}
                <x-sidebar.menu-group :menu="$child" :depth="$depth + 1" />
            @else
                {{-- 일반 메뉴 아이템 --}}
                <x-sidebar.menu-item :menu="$child" :depth="$depth + 1" />
            @endif
        @endforeach
    </ul>
</li>