<!-- Sidebar (Dynamic Menu from DB + Static Tools/Labs) -->
<!-- 모바일: fixed + 슬라이드 인/아웃, 데스크톱(lg+): static + 기존 동작 -->
<aside id="sidebar" class="sidebar bg-white shadow-lg flex-shrink-0 transition-all duration-300 ease-in-out w-64
    fixed inset-y-0 left-0 z-50 transform -translate-x-full
    lg:relative lg:translate-x-0 lg:z-auto">
    <div class="flex flex-col h-full">
        <!-- Logo / Brand -->
        <div class="flex items-center h-16 border-b border-gray-200 px-3">
            <!-- 펼쳐진 상태: 햄버거 버튼 + 로고 + 검색 -->
            <div class="sidebar-expanded-only flex items-center gap-2 w-full">
                <button
                    type="button"
                    onclick="toggleSidebar()"
                    class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                    title="메뉴 접기"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
                <span class="text-xl font-bold text-gray-900 flex-1">{{ config('app.name') }}</span>
                <!-- 검색 아이콘 -->
                <button
                    type="button"
                    onclick="openMenuSearch()"
                    class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
                    title="메뉴 검색"
                    id="menu-search-btn"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                </button>
            </div>
            <!-- 접힌 상태: S 버튼 (클릭하면 확장) -->
            <button
                type="button"
                onclick="toggleSidebar()"
                class="sidebar-collapsed-only hidden w-full p-2 text-xl font-bold text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                title="메뉴 펼치기"
            >
                S
            </button>
        </div>

        <!-- 메뉴 검색창 (숨김 상태) -->
        <div id="menu-search-container" class="hidden border-b border-gray-200 px-3 py-2 bg-gray-50">
            <div class="relative">
                <input
                    type="text"
                    id="menu-search-input"
                    placeholder="메뉴 검색..."
                    class="w-full pl-10 pr-8 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                    oninput="filterMenus(this.value)"
                    autocomplete="off"
                >
                <!-- 검색 아이콘 -->
                <svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <!-- 닫기 버튼 -->
                <button
                    type="button"
                    onclick="closeMenuSearch()"
                    class="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-gray-400 hover:text-gray-600 rounded transition-colors"
                    title="검색 닫기"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <!-- 검색 결과 안내 -->
            <div id="menu-search-info" class="hidden mt-2 text-xs text-gray-500"></div>
        </div>

        <!-- 모바일 전용: 테넌트 셀렉터 (lg 미만에서만 표시, 영업 메뉴에서는 숨김) -->
        <div class="lg:hidden border-b border-gray-200 p-3 bg-gray-50 {{ request()->routeIs('sales.*') ? 'hidden' : '' }}">
            <div class="flex items-center gap-2 mb-2">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span class="text-xs font-medium text-gray-500">테넌트 선택</span>
            </div>
            <form action="{{ route('tenant.switch') }}" method="POST" id="mobile-tenant-switch-form">
                @csrf
                <select
                    name="tenant_id"
                    id="mobile-tenant-select"
                    onchange="document.getElementById('mobile-tenant-switch-form').submit()"
                    class="w-full border-gray-300 rounded-lg text-sm focus:ring-primary focus:border-primary"
                >
                    @foreach($globalTenants as $tenant)
                        <option value="{{ $tenant->id }}" {{ session('selected_tenant_id') == $tenant->id ? 'selected' : '' }}>
                            {{ $tenant->company_name }}
                        </option>
                    @endforeach
                </select>
            </form>
        </div>

        <!-- Navigation Menu -->
        <nav class="flex-1 overflow-y-auto p-4 sidebar-nav"
             hx-boost="true"
             hx-target="#main-content"
             hx-select="#main-content"
             hx-swap="outerHTML"
             hx-push-url="true">
            <!-- 전체 접기/펼치기 -->
            <div class="sidebar-expanded-only flex items-center justify-end gap-1 mb-2 px-1">
                <button type="button" onclick="toggleAllMenuGroups(true)" class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition" title="전체 접기">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" /></svg>
                </button>
                <button type="button" onclick="toggleAllMenuGroups(false)" class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition" title="전체 펼치기">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
                </button>
            </div>

            <ul class="space-y-1">
                {{-- Main Section Menus (Dynamic from DB) --}}
                <x-sidebar.menu-tree :menus="$mainMenus" />

                {{-- R&D Labs Section (Dynamic from DB with Tab UI) --}}
                <x-sidebar.labs-menu :menus="$labsMenus" />
            </ul>
        </nav>

        <!-- 개발 도구 (하단 고정, DB 기반) -->
        @if(!empty($toolsMenus) && $toolsMenus->count() > 0)
        <div class="border-t border-gray-200 p-2 bg-gray-50"
             hx-boost="true"
             hx-target="#main-content"
             hx-select="#main-content"
             hx-swap="outerHTML"
             hx-push-url="true">
            <x-sidebar.tools-menu :menus="$toolsMenus" />
        </div>
        @endif
    </div>
</aside>

<style>
    /* ========== 메뉴 검색 스타일 ========== */
    .menu-search-highlight {
        background-color: #fef08a;
        color: #854d0e;
        padding: 0 2px;
        border-radius: 2px;
        font-weight: 600;
    }

    .menu-search-match > a {
        background-color: #f0fdf4 !important;
        border-left: 3px solid #22c55e;
    }

    #menu-search-container {
        animation: slideDown 0.2s ease-out;
    }

    #menu-search-container.hidden {
        display: none !important;
    }

    /* 사이드바 접힌 상태에서 검색창 숨김 */
    html.sidebar-is-collapsed #sidebar #menu-search-container,
    .sidebar.sidebar-collapsed #menu-search-container {
        display: none !important;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ========== 초기 로드 시 transition 비활성화 (깜빡임 방지) ========== */
    body.no-transition .sidebar,
    body.no-transition .sidebar *,
    body.no-transition .sidebar-nav,
    body.no-transition [id^="menu-group-"] {
        transition: none !important;
    }

    /* ========== 사이드바 기본 스타일 ========== */
    .sidebar {
        width: 16rem;
        overflow: visible;
        transition: width 0.3s ease-in-out;
    }

    .sidebar-collapsed {
        width: 4rem !important;
    }

    /* 접힌 상태 기본 설정 */
    .sidebar-expanded-only {
        display: flex;
    }

    .sidebar-collapsed-only {
        display: none;
    }

    /* 접힌 상태에서 overflow 설정 (툴팁 표시를 위해) */
    html.sidebar-is-collapsed #sidebar,
    .sidebar.sidebar-collapsed {
        width: 4rem !important;
        overflow: visible !important;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-nav,
    .sidebar.sidebar-collapsed .sidebar-nav {
        overflow-y: auto !important;
        overflow-x: visible !important;
    }

    html.sidebar-is-collapsed #sidebar > div,
    .sidebar.sidebar-collapsed > div {
        overflow: visible !important;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-text,
    .sidebar.sidebar-collapsed .sidebar-text {
        display: none;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-group-header,
    .sidebar.sidebar-collapsed .sidebar-group-header {
        display: none;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-nav,
    .sidebar.sidebar-collapsed .sidebar-nav {
        padding: 0.5rem;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-expanded-only,
    .sidebar.sidebar-collapsed .sidebar-expanded-only {
        display: none;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-collapsed-only,
    .sidebar.sidebar-collapsed .sidebar-collapsed-only {
        display: block;
    }

    /* 접힌 상태에서 메뉴 아이템 중앙 정렬 */
    html.sidebar-is-collapsed #sidebar .sidebar-nav a,
    html.sidebar-is-collapsed #sidebar .sidebar-nav span,
    .sidebar.sidebar-collapsed .sidebar-nav a,
    .sidebar.sidebar-collapsed .sidebar-nav span {
        justify-content: center;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* 접힌 상태에서 개발 도구 영역 조정 */
    html.sidebar-is-collapsed #sidebar .border-t.border-gray-200.p-2,
    .sidebar.sidebar-collapsed .border-t.border-gray-200.p-2 {
        padding: 0.5rem;
    }

    /* 접힌 상태에서 메뉴 아이콘 호버 툴팁 */
    html.sidebar-is-collapsed #sidebar .sidebar-nav a,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > a,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span,
    .sidebar.sidebar-collapsed .sidebar-nav a,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > a,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span {
        position: relative;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-nav a::after,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span::after,
    .sidebar.sidebar-collapsed .sidebar-nav a::after,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span::after {
        content: attr(title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0.75rem;
        padding: 0.5rem 0.75rem;
        background-color: #1f2937;
        color: white;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 0.375rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
        z-index: 1000;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    html.sidebar-is-collapsed #sidebar .sidebar-nav a:hover::after,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span:hover::after,
    .sidebar.sidebar-collapsed .sidebar-nav a:hover::after,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* 툴팁 화살표 */
    html.sidebar-is-collapsed #sidebar .sidebar-nav a::before,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span::before,
    .sidebar.sidebar-collapsed .sidebar-nav a::before,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span::before {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0.25rem;
        border: 6px solid transparent;
        border-right-color: #1f2937;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
        z-index: 1000;
    }

    html.sidebar-is-collapsed #sidebar .sidebar-nav a:hover::before,
    html.sidebar-is-collapsed #sidebar .sidebar-nav > ul > li > ul > li > span:hover::before,
    .sidebar.sidebar-collapsed .sidebar-nav a:hover::before,
    .sidebar.sidebar-collapsed .sidebar-nav > ul > li > ul > li > span:hover::before {
        opacity: 1;
        visibility: visible;
    }

    /* 접힌 상태에서 서브메뉴 숨김 */
    html.sidebar-is-collapsed #sidebar .sidebar-nav ul ul,
    .sidebar.sidebar-collapsed .sidebar-nav ul ul {
        display: none;
    }

    /* 접힌 상태에서 그룹 헤더 버튼 스타일 */
    html.sidebar-is-collapsed #sidebar .sidebar-group-header span.flex,
    .sidebar.sidebar-collapsed .sidebar-group-header span.flex {
        justify-content: center;
    }

    /* ========== R&D Labs 탭 + 플라이아웃 스타일 ========== */

    /* R&D Labs 그룹 특별 스타일 */
    .lab-group-header {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 1px solid #f59e0b;
    }

    .lab-group-header:hover {
        background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    }

    /* 탭 버튼 스타일 */
    .lab-tabs .lab-tab {
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .lab-tabs .lab-tab.active {
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .lab-tabs .lab-tab:not(.active):hover {
        background: rgba(255, 255, 255, 0.5);
    }

    /* 확장 상태에서 축소 뷰 숨김 */
    .lab-expanded-view {
        display: block;
    }

    .lab-collapsed-view {
        display: none !important;
    }

    /* 축소 상태에서 확장 뷰 숨김, 축소 뷰 표시 */
    html.sidebar-is-collapsed #sidebar .lab-expanded-view,
    .sidebar.sidebar-collapsed .lab-expanded-view {
        display: none !important;
    }

    html.sidebar-is-collapsed #sidebar .lab-collapsed-view,
    .sidebar.sidebar-collapsed .lab-collapsed-view {
        display: block !important;
    }

    /* 플라이아웃 트리거 */
    .lab-flyout-trigger {
        position: relative;
    }

    /* 플라이아웃 표시 - JavaScript로 제어 */
    .lab-flyout.show {
        display: block !important;
        animation: flyoutFadeIn 0.15s ease-out;
    }

    /* 플라이아웃 왼쪽 투명 브릿지 영역 (hover gap 연결) */
    .lab-flyout::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 0;
        width: 20px;
        height: 100%;
        background: transparent;
    }

    @keyframes flyoutFadeIn {
        from {
            opacity: 0;
            transform: translateX(-8px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 플라이아웃 탭 스타일 */
    .lab-flyout-tab {
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .lab-flyout-tab.active {
        background: white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .lab-flyout-tab:not(.active):hover {
        background: rgba(255, 255, 255, 0.7);
    }

    /* 접힌 상태에서 R&D Labs 메뉴 아이템 스타일 리셋 */
    html.sidebar-is-collapsed #sidebar .lab-panel span,
    .sidebar.sidebar-collapsed .lab-panel span {
        display: none;
    }

    /* 접힌 상태에서 탭 숨김 */
    html.sidebar-is-collapsed #sidebar .lab-tabs,
    .sidebar.sidebar-collapsed .lab-tabs {
        display: none;
    }

    /* 접힌 상태에서 R&D Labs 그룹 border-t 유지 */
    html.sidebar-is-collapsed #sidebar .lab-menu-container,
    .sidebar.sidebar-collapsed .lab-menu-container {
        border-top: 1px solid #e5e7eb;
        padding-top: 1rem;
        margin-top: 0.5rem;
    }

    /* ========== 모바일 반응형 스타일 ========== */

    /* 모바일에서 사이드바 열림 상태 */
    .sidebar.sidebar-mobile-open {
        transform: translateX(0) !important;
    }

    /* 모바일에서 데스크톱 토글 버튼 숨김 (lg 미만) */
    @media (max-width: 1023px) {
        .sidebar .sidebar-expanded-only button[onclick="toggleSidebar()"],
        .sidebar .sidebar-collapsed-only[onclick="toggleSidebar()"] {
            display: none !important;
        }

        /* 모바일에서 사이드바 헤더 로고만 표시 */
        .sidebar .sidebar-expanded-only {
            justify-content: center !important;
        }

        /* 모바일에서 접힌 상태 클래스 무시 (항상 펼쳐진 상태로 표시) */
        .sidebar.sidebar-collapsed {
            width: 16rem !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-text,
        .sidebar.sidebar-collapsed .sidebar-text {
            display: inline !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-expanded-only,
        .sidebar.sidebar-collapsed .sidebar-expanded-only {
            display: flex !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-collapsed-only,
        .sidebar.sidebar-collapsed .sidebar-collapsed-only {
            display: none !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-nav,
        .sidebar.sidebar-collapsed .sidebar-nav {
            padding: 1rem !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-nav a,
        html.sidebar-is-collapsed #sidebar .sidebar-nav span,
        .sidebar.sidebar-collapsed .sidebar-nav a,
        .sidebar.sidebar-collapsed .sidebar-nav span {
            justify-content: flex-start !important;
            padding-left: 0.75rem !important;
            padding-right: 0.75rem !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-nav ul ul,
        .sidebar.sidebar-collapsed .sidebar-nav ul ul {
            display: block !important;
        }

        html.sidebar-is-collapsed #sidebar .sidebar-group-header,
        .sidebar.sidebar-collapsed .sidebar-group-header {
            display: block !important;
        }
    }

    /* 데스크톱(lg+)에서 모바일 클래스 무시 */
    @media (min-width: 1024px) {
        .sidebar.sidebar-mobile-open {
            transform: none !important;
        }
    }
</style>

<script>
// ========== 모바일 사이드바 함수 ==========

// 모바일 사이드바 열기
function openMobileSidebar() {
    const sidebar = document.getElementById('sidebar');
    const backdrop = document.getElementById('sidebar-backdrop');

    if (!sidebar) return;
    sidebar.classList.add('sidebar-mobile-open');
    backdrop?.classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
}

// 모바일 사이드바 닫기
function closeMobileSidebar() {
    const sidebar = document.getElementById('sidebar');
    const backdrop = document.getElementById('sidebar-backdrop');

    if (!sidebar) return;
    sidebar.classList.remove('sidebar-mobile-open');
    backdrop?.classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
}

// ESC 키로 모바일 사이드바 닫기
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeMobileSidebar();
    }
});

// 모바일에서 메뉴 링크 클릭 시 사이드바 닫기
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.getElementById('sidebar');
    if (sidebar) {
        sidebar.addEventListener('click', function(e) {
            const link = e.target.closest('a[href]');
            if (link && window.innerWidth < 1024) {
                // 약간의 지연 후 닫기 (시각적 피드백)
                setTimeout(closeMobileSidebar, 150);
            }
        });
    }
});

// ========== 데스크톱 사이드바 토글 ==========

// 사이드바 토글 (로컬스토리지 연동)
function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    const html = document.documentElement;

    if (!sidebar) return;

    if (html.classList.contains('sidebar-is-collapsed')) {
        html.classList.remove('sidebar-is-collapsed');
        sidebar.classList.remove('sidebar-collapsed');
        localStorage.setItem('sidebar-collapsed', 'false');
    } else {
        html.classList.add('sidebar-is-collapsed');
        sidebar.classList.add('sidebar-collapsed');
        localStorage.setItem('sidebar-collapsed', 'true');
    }
}

// 메뉴 그룹 토글 (R&D Labs, 개발 도구 등)
function toggleGroup(groupId) {
    const sidebar = document.getElementById('sidebar');
    // 사이드바가 접힌 상태면 그룹 토글 무시
    if (!sidebar || sidebar.classList.contains('sidebar-collapsed')) {
        return;
    }

    const group = document.getElementById(groupId);
    const icon = document.getElementById(groupId + '-icon');

    if (!group) return;

    if (group.style.display === 'none') {
        group.style.display = 'block';
        if (icon) icon.style.transform = 'rotate(0deg)';
        localStorage.setItem('sidebar-' + groupId, 'open');
    } else {
        group.style.display = 'none';
        if (icon) icon.style.transform = 'rotate(-90deg)';
        localStorage.setItem('sidebar-' + groupId, 'closed');
    }
}

// 전체 메뉴 그룹 접기/펼치기
function toggleAllMenuGroups(collapse) {
    document.querySelectorAll('[id^="menu-group-"]').forEach(function(group) {
        const groupId = group.id;
        const icon = document.getElementById(groupId + '-icon');

        if (collapse) {
            group.style.display = 'none';
            if (icon) icon.style.transform = 'rotate(0deg)';
            localStorage.setItem('menu-group-' + groupId, 'hidden');
        } else {
            group.style.display = 'block';
            if (icon) icon.style.transform = 'rotate(180deg)';
            localStorage.setItem('menu-group-' + groupId, 'visible');
        }
    });
}

// 동적 메뉴 그룹 토글 (DB에서 가져온 메뉴)
function toggleMenuGroup(groupId) {
    const sidebar = document.getElementById('sidebar');
    // 사이드바가 접힌 상태면 그룹 토글 무시
    if (!sidebar || sidebar.classList.contains('sidebar-collapsed') || document.documentElement.classList.contains('sidebar-is-collapsed')) {
        return;
    }

    const group = document.getElementById(groupId);
    const icon = document.getElementById(groupId + '-icon');

    if (!group) return;

    // computed style로 실제 표시 상태 확인
    const isHidden = window.getComputedStyle(group).display === 'none';

    if (isHidden) {
        group.style.display = 'block';
        if (icon) {
            icon.style.transform = 'rotate(180deg)';
        }
        localStorage.setItem('menu-group-' + groupId, 'visible');
    } else {
        group.style.display = 'none';
        if (icon) {
            icon.style.transform = 'rotate(0deg)';
        }
        localStorage.setItem('menu-group-' + groupId, 'hidden');
    }
}

// ========== R&D Labs 사이드바 스크롤 함수 ==========

// 사이드바를 최하단으로 스크롤하고 위치 저장
function scrollSidebarToBottom() {
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (sidebarNav) {
        setTimeout(function() {
            sidebarNav.scrollTo({
                top: sidebarNav.scrollHeight,
                behavior: 'smooth'
            });
            localStorage.setItem('sidebar-scroll-bottom', 'true');
        }, 50);
    }
}

// 저장된 스크롤 위치 복원 (즉시 적용, 깜빡임 방지)
function restoreSidebarScroll() {
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (!sidebarNav) return;

    // head에서 미리 읽은 값 사용 (더 빠른 적용)
    const scrollToBottom = window._savedSidebarScrollBottom || localStorage.getItem('sidebar-scroll-bottom');
    const savedScrollTop = window._savedSidebarScroll || localStorage.getItem('sidebar-scroll-top');

    // 즉시 적용 (setTimeout 제거)
    if (scrollToBottom === 'true') {
        sidebarNav.scrollTop = sidebarNav.scrollHeight;
    } else if (savedScrollTop) {
        sidebarNav.scrollTop = parseInt(savedScrollTop, 10);
    }
}

// 메뉴 클릭 시 현재 스크롤 위치 저장
function saveSidebarScroll() {
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (sidebarNav) {
        localStorage.setItem('sidebar-scroll-top', sidebarNav.scrollTop);
        localStorage.removeItem('sidebar-scroll-bottom');
    }
}

// ========== HTMX 메뉴 활성화 ==========

// 메뉴 클릭 시 활성화 처리
const sidebarElement = document.getElementById('sidebar');
if (sidebarElement) {
    sidebarElement.addEventListener('click', function(e) {
        const link = e.target.closest('a[href]');
        if (!link || link.getAttribute('href') === '#') return;

        // 모든 메뉴에서 활성화 클래스 제거
        this.querySelectorAll('nav a, .border-t a').forEach(a => {
            a.classList.remove('bg-primary', 'text-white', 'hover:bg-primary');
            a.classList.add('text-gray-700', 'hover:bg-gray-100');
        });

        // 클릭한 메뉴에 활성화 클래스 추가
        link.classList.remove('text-gray-700', 'hover:bg-gray-100');
        link.classList.add('bg-primary', 'text-white', 'hover:bg-primary');
    });
}

// ========== R&D Labs 탭 전환 함수 ==========

// 확장 상태: 탭 전환
function switchLabTab(tabKey) {
    const tabs = ['s', 'a', 'm'];

    tabs.forEach(function(key) {
        const tab = document.getElementById('lab-tab-' + key);
        const panel = document.getElementById('lab-panel-' + key);

        if (tab) {
            tab.classList.remove('active');
        }
        if (panel) {
            panel.classList.add('hidden');
        }
    });

    const activeTab = document.getElementById('lab-tab-' + tabKey);
    const activePanel = document.getElementById('lab-panel-' + tabKey);

    if (activeTab) {
        activeTab.classList.add('active');
    }
    if (activePanel) {
        activePanel.classList.remove('hidden');
    }

    localStorage.setItem('lab-active-tab', tabKey);

    if (!window._skipLabScroll) {
        scrollSidebarToBottom();
    }
}

// 축소 상태 (플라이아웃): 탭 전환
function switchLabFlyoutTab(tabKey) {
    const tabs = ['s', 'a', 'm'];

    tabs.forEach(function(key) {
        const tab = document.getElementById('lab-flyout-tab-' + key);
        const panel = document.getElementById('lab-flyout-panel-' + key);

        if (tab) {
            tab.classList.remove('active');
        }
        if (panel) {
            panel.classList.add('hidden');
        }
    });

    const activeTab = document.getElementById('lab-flyout-tab-' + tabKey);
    const activePanel = document.getElementById('lab-flyout-panel-' + tabKey);

    if (activeTab) {
        activeTab.classList.add('active');
    }
    if (activePanel) {
        activePanel.classList.remove('hidden');
    }

    localStorage.setItem('lab-active-tab', tabKey);
}

// 플라이아웃 위치 동적 계산 및 hover 제어
function initLabFlyoutPosition() {
    const trigger = document.querySelector('.lab-flyout-trigger');
    const flyout = document.querySelector('.lab-flyout');

    if (!trigger || !flyout) return;

    let hideTimeout = null;
    const HIDE_DELAY = 150;

    function showFlyout() {
        if (hideTimeout) {
            clearTimeout(hideTimeout);
            hideTimeout = null;
        }

        const triggerRect = trigger.getBoundingClientRect();
        const sidebar = document.getElementById('sidebar');
        if (!sidebar) return;
        const sidebarRect = sidebar.getBoundingClientRect();

        flyout.style.left = (sidebarRect.right + 8) + 'px';
        flyout.style.top = Math.max(triggerRect.top - 10, 10) + 'px';

        const flyoutHeight = flyout.offsetHeight || 300;
        const windowHeight = window.innerHeight;
        if (triggerRect.top + flyoutHeight > windowHeight - 20) {
            flyout.style.top = Math.max(windowHeight - flyoutHeight - 20, 10) + 'px';
        }

        flyout.classList.add('show');
    }

    function hideFlyout() {
        hideTimeout = setTimeout(function() {
            flyout.classList.remove('show');
        }, HIDE_DELAY);
    }

    trigger.addEventListener('mouseenter', showFlyout);
    trigger.addEventListener('mouseleave', hideFlyout);

    flyout.addEventListener('mouseenter', function() {
        if (hideTimeout) {
            clearTimeout(hideTimeout);
            hideTimeout = null;
        }
    });
    flyout.addEventListener('mouseleave', hideFlyout);
}

// JavaScript 기반 툴팁 (overflow 제약 우회) - 이벤트 위임 방식
function initSidebarTooltips() {
    if (document.getElementById('sidebar-tooltip')) {
        return;
    }

    const tooltip = document.createElement('div');
    tooltip.id = 'sidebar-tooltip';
    tooltip.className = 'fixed bg-gray-800 text-white text-sm font-medium px-3 py-2 rounded-lg shadow-lg z-[9999] pointer-events-none opacity-0 transition-opacity duration-150 whitespace-nowrap';
    tooltip.style.cssText = 'display: none;';
    document.body.appendChild(tooltip);

    const sidebar = document.getElementById('sidebar');
    if (!sidebar) return;

    let currentTarget = null;

    sidebar.addEventListener('mouseover', function(e) {
        if (!sidebar.classList.contains('sidebar-collapsed') && !document.documentElement.classList.contains('sidebar-is-collapsed')) {
            return;
        }

        const target = e.target.closest('.sidebar-nav a[title], .sidebar-nav span[title], #dev-tools-group a[title]');
        if (!target || target === currentTarget) return;

        currentTarget = target;
        const title = target.getAttribute('title');
        if (!title) return;

        if (!target.hasAttribute('data-tooltip')) {
            target.setAttribute('data-tooltip', title);
        }
        target.removeAttribute('title');

        tooltip.textContent = title;
        tooltip.style.display = 'block';

        const rect = target.getBoundingClientRect();
        tooltip.style.left = (rect.right + 12) + 'px';
        tooltip.style.top = (rect.top + (rect.height / 2) - (tooltip.offsetHeight / 2)) + 'px';

        requestAnimationFrame(() => {
            tooltip.style.opacity = '1';
        });
    });

    sidebar.addEventListener('mouseout', function(e) {
        const target = e.target.closest('.sidebar-nav a, .sidebar-nav span, #dev-tools-group a');
        if (!target) return;

        const relatedTarget = e.relatedTarget;
        if (relatedTarget && target.contains(relatedTarget)) {
            return;
        }

        const originalTitle = target.getAttribute('data-tooltip');
        if (originalTitle) {
            target.setAttribute('title', originalTitle);
        }

        currentTarget = null;
        tooltip.style.opacity = '0';
        setTimeout(() => {
            if (tooltip.style.opacity === '0') {
                tooltip.style.display = 'none';
            }
        }, 150);
    });
}

// 페이지 로드 시 상태 복원
document.addEventListener('DOMContentLoaded', function() {
    // 스크롤 위치 먼저 복원 (가장 먼저 실행)
    restoreSidebarScroll();

    // 사이드바 상태 복원
    const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
    if (isCollapsed) {
        document.documentElement.classList.add('sidebar-is-collapsed');
        document.getElementById('sidebar')?.classList.add('sidebar-collapsed');
    }

    // 그룹 상태 복원
    ['lab-group', 'dev-tools-group'].forEach(function(groupId) {
        const state = localStorage.getItem('sidebar-' + groupId);
        if (state === 'closed') {
            const group = document.getElementById(groupId);
            const icon = document.getElementById(groupId + '-icon');
            if (group) group.style.display = 'none';
            if (icon) icon.style.transform = 'rotate(-90deg)';
        }
    });

    // CSS preload 스타일을 inline style로 교체 (이후 JS 토글이 정상 동작하도록)
    document.querySelectorAll('[id^="menu-group-"]').forEach(function(group) {
        const groupId = group.id;
        const savedState = localStorage.getItem('menu-group-' + groupId);
        const icon = document.getElementById(groupId + '-icon');

        // CSS에서 설정한 상태를 inline style로 이전
        if (savedState === 'hidden') {
            group.style.display = 'none';
            if (icon) icon.style.transform = 'rotate(0deg)';
        } else {
            // visible 또는 미설정: 펼침 상태 유지
            group.style.display = 'block';
            if (icon) icon.style.transform = 'rotate(180deg)';
        }
    });

    // preload 스타일 제거 (이제 inline style이 적용됨)
    const preloadStyle = document.getElementById('menu-group-preload-styles');
    if (preloadStyle) {
        preloadStyle.remove();
    }

    // R&D Labs 탭 상태 복원
    const savedTab = localStorage.getItem('lab-active-tab');
    if (savedTab && ['s', 'a', 'm'].includes(savedTab)) {
        window._skipLabScroll = true;
        switchLabTab(savedTab);
        switchLabFlyoutTab(savedTab);
        window._skipLabScroll = false;
    }

    // 플라이아웃 위치 초기화
    initLabFlyoutPosition();

    // 사이드바 툴팁 초기화
    initSidebarTooltips();

    // transition 활성화 + 로딩 오버레이 제거
    requestAnimationFrame(function() {
        document.body.classList.remove('no-transition');

        // 로딩 오버레이 fade-out 후 제거
        const loader = document.getElementById('page-loader');
        if (loader) {
            loader.classList.add('fade-out');
            loader.addEventListener('animationend', function() {
                loader.remove();
            });
        }
    });

    // R&D Labs 메뉴 클릭 시 스크롤
    const labMenuContainer = document.getElementById('lab-menu-container');
    if (labMenuContainer) {
        labMenuContainer.addEventListener('click', function(e) {
            if (e.target.closest('a[href]')) {
                scrollSidebarToBottom();
            }
        });
    }

    // 메뉴 클릭 시 스크롤 위치 저장
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (sidebarNav) {
        sidebarNav.addEventListener('click', function(e) {
            const link = e.target.closest('a[href]');
            if (link && !link.closest('#lab-menu-container')) {
                saveSidebarScroll();
            }
        });
    }

    // 개발 도구 메뉴 클릭 시 스크롤 위치 저장
    const toolsMenu = document.querySelector('.border-t.border-gray-200');
    if (toolsMenu) {
        toolsMenu.addEventListener('click', function(e) {
            const link = e.target.closest('a[href]');
            if (link) {
                saveSidebarScroll();
            }
        });
    }
});

// ========== 메뉴 검색 기능 ==========

let menuSearchActive = false;
let originalMenuState = null;

// 검색창 열기
function openMenuSearch() {
    const container = document.getElementById('menu-search-container');
    const input = document.getElementById('menu-search-input');
    const searchBtn = document.getElementById('menu-search-btn');

    if (!container || !input) return;

    // 원래 메뉴 상태 저장
    if (!menuSearchActive) {
        saveOriginalMenuState();
    }

    menuSearchActive = true;
    container.classList.remove('hidden');
    searchBtn.classList.add('hidden');

    // localStorage에 검색 활성화 상태 저장
    localStorage.setItem('menu-search-active', 'true');

    // 포커스 및 애니메이션
    setTimeout(() => {
        input.focus();
    }, 50);
}

// 검색창 닫기
function closeMenuSearch() {
    const container = document.getElementById('menu-search-container');
    const input = document.getElementById('menu-search-input');
    const searchBtn = document.getElementById('menu-search-btn');
    const info = document.getElementById('menu-search-info');

    if (!container || !input) return;

    menuSearchActive = false;
    container.classList.add('hidden');
    searchBtn.classList.remove('hidden');
    input.value = '';
    info.classList.add('hidden');

    // localStorage에서 검색 상태 제거
    localStorage.removeItem('menu-search-active');
    localStorage.removeItem('menu-search-query');

    // 원래 메뉴 상태 복원
    restoreOriginalMenuState();
}

// 원래 메뉴 상태 저장
function saveOriginalMenuState() {
    const sidebarNav = document.querySelector('.sidebar-nav');
    if (!sidebarNav) return;

    originalMenuState = {
        items: []
    };

    // 모든 메뉴 아이템과 그룹의 표시 상태 저장
    sidebarNav.querySelectorAll('li, [id^="menu-group-"], #lab-group').forEach(el => {
        originalMenuState.items.push({
            element: el,
            display: el.style.display,
            classList: [...el.classList]
        });
    });
}

// 원래 메뉴 상태 복원 (또는 전체 메뉴 표시)
function restoreOriginalMenuState() {
    const sidebarNav = document.querySelector('.sidebar-nav');

    if (originalMenuState) {
        // 저장된 상태가 있으면 복원
        originalMenuState.items.forEach(item => {
            item.element.style.display = item.display || '';
            item.element.classList.remove('menu-search-hidden', 'menu-search-match');
        });
        originalMenuState = null;
    } else if (sidebarNav) {
        // 저장된 상태가 없으면 모든 메뉴 표시 (새로고침 후 닫기 시)
        sidebarNav.querySelectorAll('li').forEach(li => {
            li.style.display = '';
            li.classList.remove('menu-search-hidden', 'menu-search-match');
        });
        sidebarNav.querySelectorAll('[id^="menu-group-"], #lab-group').forEach(group => {
            group.style.display = '';
        });
    }

    // 검색 하이라이트 제거
    document.querySelectorAll('.menu-search-highlight').forEach(el => {
        const parent = el.parentNode;
        parent.replaceChild(document.createTextNode(el.textContent), el);
        parent.normalize();
    });
}

// 메뉴 필터링 (실시간 검색)
function filterMenus(query, skipSave) {
    const sidebarNav = document.querySelector('.sidebar-nav');
    const info = document.getElementById('menu-search-info');

    if (!sidebarNav) return;

    query = query.trim().toLowerCase();

    // localStorage에 검색어 저장 (복원 시에는 저장 안 함)
    if (!skipSave) {
        if (query) {
            localStorage.setItem('menu-search-query', query);
        } else {
            localStorage.removeItem('menu-search-query');
        }
    }

    // 검색어가 비어있으면 모든 메뉴 표시
    if (!query) {
        sidebarNav.querySelectorAll('li').forEach(li => {
            li.style.display = '';
            li.classList.remove('menu-search-hidden', 'menu-search-match');
        });
        sidebarNav.querySelectorAll('[id^="menu-group-"], #lab-group').forEach(group => {
            group.style.display = '';
        });
        // 하이라이트 제거
        document.querySelectorAll('.menu-search-highlight').forEach(el => {
            const parent = el.parentNode;
            parent.replaceChild(document.createTextNode(el.textContent), el);
            parent.normalize();
        });
        info.classList.add('hidden');
        return;
    }

    let matchCount = 0;

    // 모든 메뉴 아이템 순회
    const menuItems = sidebarNav.querySelectorAll('li');

    menuItems.forEach(li => {
        const link = li.querySelector('a[href], span[title]');
        if (!link) {
            // 그룹 헤더 등은 일단 숨김
            li.style.display = 'none';
            return;
        }

        const menuName = link.textContent.trim().toLowerCase();
        const title = (link.getAttribute('title') || '').toLowerCase();

        if (menuName.includes(query) || title.includes(query)) {
            li.style.display = '';
            li.classList.add('menu-search-match');
            li.classList.remove('menu-search-hidden');
            matchCount++;

            // 하이라이트 적용
            highlightText(link, query);

            // 부모 그룹들도 표시
            showParentGroups(li);
        } else {
            li.style.display = 'none';
            li.classList.add('menu-search-hidden');
            li.classList.remove('menu-search-match');
        }
    });

    // 검색 결과 정보 표시
    if (matchCount > 0) {
        info.textContent = `${matchCount}개 메뉴 발견`;
        info.classList.remove('hidden');
    } else {
        info.textContent = '검색 결과가 없습니다';
        info.classList.remove('hidden');
    }

    // 모든 그룹 펼치기
    sidebarNav.querySelectorAll('[id^="menu-group-"], #lab-group').forEach(group => {
        if (group.querySelector('.menu-search-match')) {
            group.style.display = 'block';
        } else {
            group.style.display = 'none';
        }
    });
}

// 부모 그룹 표시
function showParentGroups(element) {
    let parent = element.parentElement;
    while (parent) {
        if (parent.id && (parent.id.startsWith('menu-group-') || parent.id === 'lab-group')) {
            parent.style.display = 'block';
        }
        if (parent.tagName === 'LI') {
            parent.style.display = '';
        }
        parent = parent.parentElement;
        if (parent && parent.classList && parent.classList.contains('sidebar-nav')) {
            break;
        }
    }
}

// 텍스트 하이라이트
function highlightText(element, query) {
    const textSpan = element.querySelector('.sidebar-text');
    if (!textSpan) return;

    // 기존 하이라이트 제거
    const existingHighlights = textSpan.querySelectorAll('.menu-search-highlight');
    existingHighlights.forEach(el => {
        const parent = el.parentNode;
        parent.replaceChild(document.createTextNode(el.textContent), el);
        parent.normalize();
    });

    const text = textSpan.textContent;
    const lowerText = text.toLowerCase();
    const index = lowerText.indexOf(query);

    if (index >= 0) {
        const before = text.substring(0, index);
        const match = text.substring(index, index + query.length);
        const after = text.substring(index + query.length);

        textSpan.innerHTML = '';
        textSpan.appendChild(document.createTextNode(before));

        const highlight = document.createElement('span');
        highlight.className = 'menu-search-highlight';
        highlight.textContent = match;
        textSpan.appendChild(highlight);

        textSpan.appendChild(document.createTextNode(after));
    }
}

// ESC 키로 검색 닫기
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && menuSearchActive) {
        closeMenuSearch();
    }
});

// Ctrl+K 또는 Cmd+K로 검색 열기
document.addEventListener('keydown', function(e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        if (menuSearchActive) {
            closeMenuSearch();
        } else {
            openMenuSearch();
        }
    }
});

// 페이지 로드 시 검색 상태 복원
document.addEventListener('DOMContentLoaded', function() {
    const savedSearchActive = localStorage.getItem('menu-search-active');
    const savedSearchQuery = localStorage.getItem('menu-search-query');

    if (savedSearchActive === 'true') {
        const container = document.getElementById('menu-search-container');
        const input = document.getElementById('menu-search-input');
        const searchBtn = document.getElementById('menu-search-btn');

        if (container && input) {
            menuSearchActive = true;
            container.classList.remove('hidden');
            searchBtn.classList.add('hidden');

            // 저장된 검색어가 있으면 복원 및 필터링
            if (savedSearchQuery) {
                input.value = savedSearchQuery;
                // 약간의 딜레이 후 필터링 (DOM 완전 로드 대기)
                setTimeout(() => {
                    filterMenus(savedSearchQuery, true);
                }, 100);
            }
        }
    }
});
</script>
