@props(['menus'])

@php
    // Labs 메뉴가 없으면 렌더링하지 않음
    if ($menus->isEmpty()) {
        return;
    }

    // R&D Labs 그룹 메뉴 찾기
    $labsGroup = $menus->first();
    if (!$labsGroup || !isset($labsGroup->menuChildren) || $labsGroup->menuChildren->isEmpty()) {
        return;
    }

    // 모든 자식 메뉴 사용 (탭 구분 없이)
    $labsChildMenus = $labsGroup->menuChildren;
@endphp

{{-- R&D Labs 그룹 (탭 스타일 + 플라이아웃) --}}
<li class="lab-menu-container pt-4 pb-1 border-t border-gray-200 mt-2" id="lab-menu-container">
    <!-- 확장 상태: 헤더 + 탭 + 메뉴 -->
    <div class="lab-expanded-view">
        <button onclick="toggleGroup('lab-group'); scrollSidebarToBottom();" class="sidebar-group-header lab-group-header w-full flex items-center justify-between px-3 py-2 text-sm font-semibold text-gray-700 rounded">
            <span class="flex items-center gap-2">
                <svg class="w-4 h-4 text-amber-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
                <span class="sidebar-text">R&D Labs</span>
            </span>
            <svg id="lab-group-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>

        <!-- 메뉴 콘텐츠 -->
        <div id="lab-group" class="mt-2">
            <ul class="space-y-1">
                @foreach($labsChildMenus as $menu)
                    <li>
                        <a href="{{ $menu->getRouteName() ? route($menu->getRouteName()) : $menu->url }}"
                           class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors"
                           title="{{ $menu->name }}">
                            <x-sidebar.menu-icon :icon="$menu->icon" class="w-4 h-4 flex-shrink-0" />
                            <span class="sidebar-text">{{ $menu->name }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    <!-- 축소 상태: 아이콘 + 플라이아웃 -->
    <div class="lab-collapsed-view hidden">
        <div class="lab-flyout-trigger relative">
            <button type="button" class="flex items-center justify-center w-full p-2 rounded-lg hover:bg-amber-50 transition-colors" title="R&D Labs">
                <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
            </button>

            <!-- 플라이아웃 팝업 -->
            <div class="lab-flyout hidden fixed w-56 bg-white rounded-lg shadow-xl border border-gray-200 z-[9999]">
                <!-- 화살표 -->
                <div class="absolute -left-2 top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-white"></div>
                <div class="absolute -left-[9px] top-3 w-0 h-0 border-t-8 border-b-8 border-r-8 border-transparent border-r-gray-200"></div>

                <!-- 헤더 -->
                <div class="px-3 py-2 bg-gradient-to-r from-amber-50 to-amber-100 rounded-t-lg border-b border-amber-200">
                    <span class="text-xs font-bold text-amber-800 uppercase tracking-wider">R&D Labs</span>
                </div>

                <!-- 메뉴 패널 -->
                <div class="p-2 max-h-64 overflow-y-auto">
                    <ul class="space-y-0.5">
                        @foreach($labsChildMenus as $menu)
                            <li>
                                <a href="{{ $menu->getRouteName() ? route($menu->getRouteName()) : $menu->url }}"
                                   class="block px-2 py-1 text-xs text-gray-600 rounded hover:bg-gray-100 hover:text-gray-900">
                                    {{ $menu->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
</li>