@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';

    // depth에 따른 스타일 분기
    $isTopLevel = $depth === 0;
@endphp

@if($isTopLevel)
    {{-- depth0: 최상위 그룹 헤더 스타일 --}}
    <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-sm font-semibold text-gray-700 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 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>

        {{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
        <ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
            @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>
@else
    {{-- depth1+: 서브그룹 스타일 (일반 텍스트, 접기/펼치기) --}}
    <li>
        <button
            onclick="toggleMenuGroup('{{ $groupId }}')"
            class="sidebar-subgroup-header w-full flex items-center justify-between px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"
            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="font-semibold sidebar-text">{{ $menu->name }}</span>
            </span>
            <svg
                id="{{ $groupId }}-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>

        {{-- 기본 펼침 상태, CSS에서 localStorage 기반으로 즉시 제어 --}}
        <ul id="{{ $groupId }}" class="menu-group-content space-y-1 mt-1">
            @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>
@endif