@props(['menus'])

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

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

    // 자식 메뉴들을 탭별로 분류
    $sMenus = collect();
    $aMenus = collect();
    $mMenus = collect();

    foreach ($labsGroup->menuChildren as $menu) {
        $tab = $menu->getMeta('tab') ?? 'S';
        match ($tab) {
            'S' => $sMenus->push($menu),
            'A' => $aMenus->push($menu),
            'M' => $mMenus->push($menu),
            default => $sMenus->push($menu),
        };
    }

    // 모든 탭이 비어있으면 렌더링하지 않음
    if ($sMenus->isEmpty() && $aMenus->isEmpty() && $mMenus->isEmpty()) {
        return;
    }
@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-xs font-bold text-gray-700 uppercase tracking-wider 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">
            <!-- S | A | M 탭 버튼 -->
            <div class="lab-tabs flex mx-2 mb-2 bg-gray-100 rounded-lg p-1">
                <button type="button" onclick="switchLabTab('s')" id="lab-tab-s" class="lab-tab active flex-1 py-1.5 text-xs font-bold rounded-md transition-all text-blue-600">
                    S
                </button>
                <button type="button" onclick="switchLabTab('a')" id="lab-tab-a" class="lab-tab flex-1 py-1.5 text-xs font-bold rounded-md transition-all text-purple-600">
                    A
                </button>
                <button type="button" onclick="switchLabTab('m')" id="lab-tab-m" class="lab-tab flex-1 py-1.5 text-xs font-bold rounded-md transition-all text-green-600">
                    M
                </button>
            </div>

            <!-- S. Strategy 메뉴 -->
            <ul id="lab-panel-s" class="lab-panel space-y-1">
                @foreach($sMenus 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="font-medium sidebar-text">{{ $menu->name }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>

            <!-- A. AI/Automation 메뉴 -->
            <ul id="lab-panel-a" class="lab-panel space-y-1 hidden">
                @foreach($aMenus 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="font-medium sidebar-text">{{ $menu->name }}</span>
                        </a>
                    </li>
                @endforeach
            </ul>

            <!-- M. Management 메뉴 -->
            <ul id="lab-panel-m" class="lab-panel space-y-1 hidden">
                @foreach($mMenus 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="font-medium 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="flex p-2 bg-gray-50 border-b border-gray-100">
                    <button type="button" onclick="switchLabFlyoutTab('s')" id="lab-flyout-tab-s" class="lab-flyout-tab active flex-1 py-1.5 text-xs font-bold rounded transition-all text-blue-600">
                        S
                    </button>
                    <button type="button" onclick="switchLabFlyoutTab('a')" id="lab-flyout-tab-a" class="lab-flyout-tab flex-1 py-1.5 text-xs font-bold rounded transition-all text-purple-600">
                        A
                    </button>
                    <button type="button" onclick="switchLabFlyoutTab('m')" id="lab-flyout-tab-m" class="lab-flyout-tab flex-1 py-1.5 text-xs font-bold rounded transition-all text-green-600">
                        M
                    </button>
                </div>

                <!-- 메뉴 패널들 -->
                <div class="p-2 max-h-64 overflow-y-auto">
                    <!-- S. Strategy -->
                    <ul id="lab-flyout-panel-s" class="lab-flyout-panel space-y-0.5">
                        @foreach($sMenus 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>

                    <!-- A. AI/Automation -->
                    <ul id="lab-flyout-panel-a" class="lab-flyout-panel space-y-0.5 hidden">
                        @foreach($aMenus 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>

                    <!-- M. Management -->
                    <ul id="lab-flyout-panel-m" class="lab-flyout-panel space-y-0.5 hidden">
                        @foreach($mMenus 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>