@extends('layouts.app')

@section('title', '메뉴 관리')

@section('content')
    <!-- 페이지 헤더 -->
    <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">메뉴 관리</h1>
            <p class="text-sm text-gray-500 mt-1 hidden sm:block" id="modeDescription">
                드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동
            </p>
        </div>
        <div class="flex flex-wrap items-center gap-2 sm:gap-3">
            @if(session('selected_tenant_id'))
            <!-- 모드 전환 버튼 -->
            <div class="flex items-center bg-gray-200 rounded-lg p-1 w-full sm:w-auto">
                <button onclick="switchMode('normal')"
                        id="normalModeBtn"
                        class="mode-btn flex-1 sm:flex-none px-4 py-2 text-sm font-medium rounded-md transition bg-white text-gray-900 shadow-sm">
                    내 메뉴
                </button>
                <button onclick="switchMode('import')"
                        id="importModeBtn"
                        class="mode-btn flex-1 sm:flex-none px-4 py-2 text-sm font-medium rounded-md transition bg-gray-200 text-gray-500 hover:text-gray-700 hover:bg-gray-300">
                    기본에서 가져오기
                </button>
            </div>
            <!-- 가져오기 버튼 (import 모드에서만 표시) -->
            <button onclick="importSelectedMenus()"
                    id="importBtn"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hidden w-full sm:w-auto text-center"
                    disabled>
                <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                선택 가져오기 (<span id="selectedCount">0</span>)
            </button>
            <!-- 선택 삭제 버튼 (normal 모드에서만 표시) -->
            <button onclick="bulkDelete()"
                    id="bulkDeleteBtn"
                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto text-center"
                    disabled>
                <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                선택 삭제 (<span id="deleteCount">0</span>)
            </button>
            <!-- 선택 복원 버튼 (normal 모드에서만 표시) -->
            <button onclick="bulkRestore()"
                    id="bulkRestoreBtn"
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto text-center"
                    disabled>
                <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                선택 복원 (<span id="restoreCount">0</span>)
            </button>
            @if(auth()->user()?->is_super_admin)
            <!-- 선택 영구삭제 버튼 (슈퍼관리자만, normal 모드에서만 표시) -->
            <button onclick="bulkForceDelete()"
                    id="bulkForceDeleteBtn"
                    class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg transition flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto text-center"
                    disabled>
                <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                선택 영구삭제 (<span id="forceDeleteCount">0</span>)
            </button>
            @endif
            @endif
            <a href="{{ route('menus.create') }}" id="newMenuBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition flex-1 sm:flex-none text-center">
                + 새 메뉴
            </a>
            @if(auth()->user()?->is_super_admin)
            <a href="{{ route('menus.global.index') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center justify-center gap-2 flex-1 sm:flex-none">
                <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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="hidden sm:inline">기본 메뉴 관리</span>
                <span class="sm:hidden">기본 메뉴</span>
            </a>
            @endif
        </div>
    </div>

    <!-- 필터 영역 -->
    <x-filter-collapsible id="filterForm">
        <form id="filterForm" class="flex flex-wrap gap-2 sm:gap-4">
            <!-- 모드 (hidden) -->
            <input type="hidden" name="mode" id="modeInput" value="">
            <!-- 페이지당 항목 수 (쿠키에서 로드, 기본값 10) -->
            <input type="hidden" name="per_page" id="perPageInput" value="10">
            <input type="hidden" name="page" id="pageInput" value="1">

            <!-- 검색 -->
            <div class="flex-1 min-w-0 w-full sm:w-auto">
                <input type="text"
                       name="search"
                       placeholder="메뉴명, URL로 검색..."
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>

            <!-- 활성 상태 필터 (일반 모드) -->
            <div class="w-full sm:w-48" id="activeFilter">
                <select name="is_active" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">전체 상태</option>
                    <option value="1">활성</option>
                    <option value="0">비활성</option>
                </select>
            </div>

            <!-- 가져오기 상태 필터 (가져오기 모드) -->
            <div class="w-full sm:w-48 hidden" id="importFilter">
                <select name="import_status" id="importStatusSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" onchange="filterImportedMenus()">
                    <option value="all">전체 메뉴</option>
                    <option value="available">가져올 수 있는 메뉴</option>
                </select>
            </div>

            <!-- 검색 버튼 -->
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition w-full sm:w-auto">
                검색
            </button>
        </form>
    </x-filter-collapsible>

    {{-- 쿠키에서 per_page 값 로드 (htmx:configRequest 이벤트로 요청 직전에 적용) --}}
    <script>
    (function() {
        // 쿠키 값 읽기 함수
        function getCookieValue(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // 즉시 hidden input 업데이트 시도
        const perPageInput = document.getElementById('perPageInput');
        if (perPageInput) {
            const savedPerPage = getCookieValue('pagination_per_page') || '10';
            perPageInput.value = savedPerPage;
        }

        // HTMX 요청 직전에 per_page 값을 쿠키에서 읽어서 적용 (안전장치)
        document.addEventListener('htmx:configRequest', function(evt) {
            // menu-table 관련 요청인 경우에만 처리
            if (evt.detail.elt && evt.detail.elt.id === 'menu-table') {
                const savedPerPage = getCookieValue('pagination_per_page') || '10';
                // 요청 파라미터에 per_page 값 설정/덮어쓰기
                evt.detail.parameters['per_page'] = savedPerPage;
            }
        });
    })();
    </script>

    <!-- 테이블 영역 (HTMX로 로드) -->
    <div id="menu-table"
         hx-get="/api/admin/menus"
         hx-trigger="load, filterSubmit from:body"
         hx-include="#filterForm"
         hx-headers='{"X-CSRF-TOKEN": "{{ csrf_token() }}"}'
         class="bg-white rounded-lg shadow-sm overflow-hidden">
        <!-- 로딩 스피너 -->
        <div class="flex justify-center items-center p-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    /* 드래그 인디케이터 스타일 */
    .drag-indicator {
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: background-color 0.15s, transform 0.1s;
    }
    .drag-indicator.indent {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
    }
    .drag-indicator.outdent {
        background: linear-gradient(135deg, #f97316, #ea580c);
        color: white;
    }
    .drag-indicator.reorder {
        background: linear-gradient(135deg, #6b7280, #4b5563);
        color: white;
    }

    /* 드래그 중 행 하이라이트 - 더 눈에 띄게 */
    .menu-row.drag-target-indent {
        background: rgba(59, 130, 246, 0.25) !important;
        border: 2px solid #3b82f6 !important;
        border-left-width: 6px !important;
        position: relative;
        animation: pulse-indent 0.8s ease-in-out infinite;
    }
    .menu-row.drag-target-outdent {
        background: rgba(249, 115, 22, 0.25) !important;
        border: 2px solid #f97316 !important;
        border-right-width: 6px !important;
        position: relative;
        animation: pulse-outdent 0.8s ease-in-out infinite;
    }

    /* 펄스 애니메이션 */
    @keyframes pulse-indent {
        0%, 100% { background: rgba(59, 130, 246, 0.15); }
        50% { background: rgba(59, 130, 246, 0.35); }
    }
    @keyframes pulse-outdent {
        0%, 100% { background: rgba(249, 115, 22, 0.15); }
        50% { background: rgba(249, 115, 22, 0.35); }
    }

    /* 인덴트 프리뷰 라인 */
    .indent-preview-line {
        position: absolute;
        left: 0;
        height: 3px;
        background: #3b82f6;
        border-radius: 2px;
        pointer-events: none;
        z-index: 100;
        transition: width 0.15s, left 0.15s;
    }

    /* SortableJS fallback 모드 스타일 (forceFallback: true) */
    .sortable-fallback {
        opacity: 0.9;
        background: white !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-radius: 4px;
        z-index: 9998 !important;
    }

    /* 드래그 중 텍스트 선택 방지 */
    .sortable-drag, .sortable-chosen, .sortable-ghost {
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* 드래그 핸들 영역 텍스트 선택 방지 */
    .drag-handle {
        user-select: none;
        -webkit-user-select: none;
    }

    /* 드래그 중 전체 페이지 텍스트 선택 방지 */
    body.is-dragging {
        user-select: none !important;
        -webkit-user-select: none !important;
        cursor: grabbing !important;
    }
    body.is-dragging * {
        user-select: none !important;
        -webkit-user-select: none !important;
    }
</style>
@endpush

@push('scripts')
<script>
    // 폼 제출 시 HTMX 이벤트 트리거 (DOMContentLoaded 또는 HTMX 네비게이션 후 실행)
    (function() {
        function initFilterForm() {
            const filterForm = document.getElementById('filterForm');
            if (filterForm && !filterForm._menuInitialized) {
                filterForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    htmx.trigger('#menu-table', 'filterSubmit');
                });
                filterForm._menuInitialized = true;
            }
        }
        // 즉시 실행 (일반 페이지 로드용)
        initFilterForm();
        // DOMContentLoaded 이벤트 (안전장치)
        document.addEventListener('DOMContentLoaded', initFilterForm);
    })();

    // HTMX 응답 처리 + SortableJS 초기화 (menu-table 내부 갱신용)
    document.body.addEventListener('htmx:afterSwap', function(event) {
        if (event.detail.target.id === 'menu-table') {
            // 테이블 로드 후 SortableJS 초기화 (전역 함수 사용)
            if (typeof initMenuSortable === 'function') {
                initMenuSortable();
            }
        }
    });

    // 삭제 확인
    window.confirmDelete = function(id, name) {
        showDeleteConfirm(name, () => {
            htmx.ajax('DELETE', `/api/admin/menus/${id}`, {
                target: '#menu-table',
                swap: 'none',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                htmx.trigger('#menu-table', 'filterSubmit');
            });
        });
    };

    // 복원 확인
    window.confirmRestore = function(id, name) {
        showConfirm(`"${name}" 메뉴를 복원하시겠습니까?`, () => {
            htmx.ajax('POST', `/api/admin/menus/${id}/restore`, {
                target: '#menu-table',
                swap: 'none',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }).then(() => {
                htmx.trigger('#menu-table', 'filterSubmit');
            });
        }, { title: '복원 확인', icon: 'question' });
    };

    // 영구삭제 확인
    window.confirmForceDelete = function(id, name) {
        showPermanentDeleteConfirm(name, () => {
            fetch(`/api/admin/menus/${id}/force`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json().then(data => ({ ok: response.ok, data })))
            .then(({ ok, data }) => {
                if (ok && data.success) {
                    showToast(data.message || '메뉴가 영구 삭제되었습니다.', 'success');
                    htmx.trigger('#menu-table', 'filterSubmit');
                } else {
                    showToast(data.message || '삭제에 실패했습니다.', 'error');
                }
            })
            .catch(error => {
                showToast('삭제 중 오류가 발생했습니다.', 'error');
                console.error('Force delete error:', error);
            });
        });
    };

    // 활성 토글 (새로고침 없이 UI만 업데이트)
    window.toggleActive = function(id, buttonEl) {
        // 버튼 요소 찾기
        const btn = buttonEl || document.querySelector(`tr[data-menu-id="${id}"] button[onclick*="toggleActive"]`);
        if (!btn) return;

        // 현재 상태 확인 (파란색이면 활성)
        const isCurrentlyActive = btn.classList.contains('bg-blue-500');
        const thumb = btn.querySelector('span');

        // 즉시 UI 토글 (낙관적 업데이트)
        btn.classList.toggle('bg-blue-500', !isCurrentlyActive);
        btn.classList.toggle('bg-gray-400', isCurrentlyActive);
        thumb.classList.toggle('translate-x-3.5', !isCurrentlyActive);
        thumb.classList.toggle('translate-x-0.5', isCurrentlyActive);

        // 백엔드 요청
        fetch(`/api/admin/menus/${id}/toggle-active`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                // 실패 시 롤백
                btn.classList.toggle('bg-blue-500', isCurrentlyActive);
                btn.classList.toggle('bg-gray-400', !isCurrentlyActive);
                thumb.classList.toggle('translate-x-3.5', isCurrentlyActive);
                thumb.classList.toggle('translate-x-0.5', !isCurrentlyActive);
                showToast(data.message || '상태 변경에 실패했습니다.', 'error');
            }
        })
        .catch(error => {
            // 에러 시 롤백
            btn.classList.toggle('bg-blue-500', isCurrentlyActive);
            btn.classList.toggle('bg-gray-400', !isCurrentlyActive);
            thumb.classList.toggle('translate-x-3.5', isCurrentlyActive);
            thumb.classList.toggle('translate-x-0.5', !isCurrentlyActive);
            showToast('상태 변경 중 오류가 발생했습니다.', 'error');
            console.error('Toggle active error:', error);
        });
    };

    // 숨김 토글 (새로고침 없이 UI만 업데이트)
    window.toggleHidden = function(id, buttonEl) {
        // 버튼 요소 찾기
        const btn = buttonEl || document.querySelector(`tr[data-menu-id="${id}"] button[onclick*="toggleHidden"]`);
        if (!btn) return;

        // 현재 상태 확인 (주황색이면 숨김)
        const isCurrentlyHidden = btn.classList.contains('bg-amber-500');
        const thumb = btn.querySelector('span');

        // 즉시 UI 토글 (낙관적 업데이트)
        btn.classList.toggle('bg-amber-500', !isCurrentlyHidden);
        btn.classList.toggle('bg-gray-400', isCurrentlyHidden);
        thumb.classList.toggle('translate-x-3.5', !isCurrentlyHidden);
        thumb.classList.toggle('translate-x-0.5', isCurrentlyHidden);

        // 백엔드 요청
        fetch(`/api/admin/menus/${id}/toggle-hidden`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                // 실패 시 롤백
                btn.classList.toggle('bg-amber-500', isCurrentlyHidden);
                btn.classList.toggle('bg-gray-400', !isCurrentlyHidden);
                thumb.classList.toggle('translate-x-3.5', isCurrentlyHidden);
                thumb.classList.toggle('translate-x-0.5', !isCurrentlyHidden);
                showToast(data.message || '상태 변경에 실패했습니다.', 'error');
            }
        })
        .catch(error => {
            // 에러 시 롤백
            btn.classList.toggle('bg-amber-500', isCurrentlyHidden);
            btn.classList.toggle('bg-gray-400', !isCurrentlyHidden);
            thumb.classList.toggle('translate-x-3.5', isCurrentlyHidden);
            thumb.classList.toggle('translate-x-0.5', !isCurrentlyHidden);
            showToast('상태 변경 중 오류가 발생했습니다.', 'error');
            console.error('Toggle hidden error:', error);
        });
    };

    // 현재 모드 상태
    let currentMode = 'normal';

    // 모드 전환
    window.switchMode = function(mode) {
        currentMode = mode;

        const normalBtn = document.getElementById('normalModeBtn');
        const importBtn = document.getElementById('importModeBtn');
        const importActionBtn = document.getElementById('importBtn');
        const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
        const bulkRestoreBtn = document.getElementById('bulkRestoreBtn');
        const bulkForceDeleteBtn = document.getElementById('bulkForceDeleteBtn');
        const newMenuBtn = document.getElementById('newMenuBtn');
        const modeDescription = document.getElementById('modeDescription');
        const modeInput = document.getElementById('modeInput');
        const activeFilter = document.getElementById('activeFilter');
        const importFilter = document.getElementById('importFilter');

        // hidden input 값 업데이트
        modeInput.value = mode === 'import' ? 'import' : '';

        // 버튼 스타일 업데이트
        if (mode === 'import') {
            // 내 메뉴 버튼 비활성화 스타일
            normalBtn.classList.remove('bg-white', 'text-gray-900', 'shadow-sm');
            normalBtn.classList.add('bg-gray-200', 'text-gray-500', 'hover:text-gray-700', 'hover:bg-gray-300');
            // 기본에서 가져오기 버튼 활성화 스타일
            importBtn.classList.add('bg-white', 'text-gray-900', 'shadow-sm');
            importBtn.classList.remove('bg-gray-200', 'text-gray-500', 'hover:text-gray-700', 'hover:bg-gray-300');

            // 가져오기 버튼 표시, 새 메뉴 버튼 숨김
            importActionBtn.classList.remove('hidden');
            importActionBtn.classList.add('flex');
            newMenuBtn.classList.add('hidden');

            // bulk 버튼들 숨김
            if (bulkDeleteBtn) bulkDeleteBtn.classList.add('hidden');
            if (bulkRestoreBtn) bulkRestoreBtn.classList.add('hidden');
            if (bulkForceDeleteBtn) bulkForceDeleteBtn.classList.add('hidden');

            // 필터 전환: 활성 상태 → 가져오기 상태
            activeFilter.classList.add('hidden');
            importFilter.classList.remove('hidden');

            // 설명 변경
            modeDescription.innerHTML = '기본 메뉴에서 가져올 항목을 선택하세요. 체크박스로 선택 후 <span class="font-medium text-green-600">선택 가져오기</span> 버튼을 클릭하세요.';
        } else {
            // 기본에서 가져오기 버튼 비활성화 스타일
            importBtn.classList.remove('bg-white', 'text-gray-900', 'shadow-sm');
            importBtn.classList.add('bg-gray-200', 'text-gray-500', 'hover:text-gray-700', 'hover:bg-gray-300');
            // 내 메뉴 버튼 활성화 스타일
            normalBtn.classList.add('bg-white', 'text-gray-900', 'shadow-sm');
            normalBtn.classList.remove('bg-gray-200', 'text-gray-500', 'hover:text-gray-700', 'hover:bg-gray-300');

            // 가져오기 버튼 숨김, 새 메뉴 버튼 표시
            importActionBtn.classList.add('hidden');
            importActionBtn.classList.remove('flex');
            newMenuBtn.classList.remove('hidden');

            // bulk 버튼들 표시 (disabled 상태로)
            if (bulkDeleteBtn) {
                bulkDeleteBtn.classList.remove('hidden');
                bulkDeleteBtn.classList.add('flex');
            }
            if (bulkRestoreBtn) {
                bulkRestoreBtn.classList.remove('hidden');
                bulkRestoreBtn.classList.add('flex');
            }
            if (bulkForceDeleteBtn) {
                bulkForceDeleteBtn.classList.remove('hidden');
                bulkForceDeleteBtn.classList.add('flex');
            }

            // 필터 전환: 가져오기 상태 → 활성 상태
            activeFilter.classList.remove('hidden');
            importFilter.classList.add('hidden');

            // 설명 복원
            modeDescription.innerHTML = '드래그: 순서 변경 | <span class="font-medium text-blue-600">→ 오른쪽</span>: 하위로 이동 | <span class="font-medium text-orange-600">← 왼쪽</span>: 상위로 이동';
        }

        // 테이블 새로고침
        htmx.trigger('#menu-table', 'filterSubmit');
    };

    // 가져오기 버튼 상태 업데이트 (활성화된 체크박스만 카운트)
    window.updateImportButtonState = function() {
        // disabled가 아닌 체크박스만 선택
        const checkedBoxes = document.querySelectorAll('#menu-sortable .import-checkbox:checked:not(:disabled)');
        const importBtn = document.getElementById('importBtn');
        const selectedCount = document.getElementById('selectedCount');

        if (importBtn && selectedCount) {
            selectedCount.textContent = checkedBoxes.length;
            importBtn.disabled = checkedBoxes.length === 0;
        }
    };

    // 전체 선택/해제 (가져오기용 - 가져올 수 있는 것만)
    window.toggleSelectAllImport = function(headerCheckbox) {
        // disabled가 아닌 체크박스만 선택 대상
        const enabledCheckboxes = document.querySelectorAll('#menu-sortable .import-checkbox:not(:disabled)');
        enabledCheckboxes.forEach(cb => cb.checked = headerCheckbox.checked);
        updateImportButtonState();
    };

    // 가져오기 상태 필터링 (클라이언트 사이드)
    window.filterImportedMenus = function() {
        const filterValue = document.getElementById('importStatusSelect').value;
        const rows = document.querySelectorAll('#menu-sortable .menu-row');

        rows.forEach(row => {
            const checkbox = row.querySelector('.import-checkbox');
            if (!checkbox) return;

            const isImported = checkbox.disabled; // disabled면 이미 가져온 것

            if (filterValue === 'available') {
                // 가져올 수 있는 메뉴만 표시
                row.style.display = isImported ? 'none' : '';
            } else {
                // 전체 표시
                row.style.display = '';
            }
        });

        // 전체 선택 체크박스 해제
        const selectAllCheckbox = document.getElementById('selectAllImport');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = false;
        }
        updateImportButtonState();
    };

    // 선택된 기본 메뉴 가져오기 (가져올 수 있는 것만)
    window.importSelectedMenus = function() {
        const checkboxes = document.querySelectorAll('#menu-sortable .import-checkbox:checked:not(:disabled)');
        const menuIds = Array.from(checkboxes).map(cb => parseInt(cb.value));

        if (menuIds.length === 0) {
            showToast('가져올 메뉴를 선택해주세요.', 'warning');
            return;
        }

        showConfirm(`선택한 ${menuIds.length}개 메뉴를 가져오시겠습니까?`, () => {
            fetch('/api/admin/menus/copy-from-global', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ menu_ids: menuIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(`${data.copied}개 메뉴가 복사되었습니다.`, 'success');
                    htmx.trigger('#menu-table', 'filterSubmit');
                } else {
                    showToast('가져오기 실패: ' + (data.message || ''), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('가져오기 중 오류 발생', 'error');
            });
        }, { title: '메뉴 가져오기', icon: 'question' });
    };

    // 옵션 팝오버 토글
    window.toggleOptionsPopover = function(menuId) {
        const popover = document.getElementById(`options-popover-${menuId}`);
        if (!popover) return;

        // 다른 팝오버 모두 닫기
        document.querySelectorAll('.options-popover').forEach(p => {
            if (p.id !== `options-popover-${menuId}`) {
                p.classList.add('hidden');
            }
        });

        // 현재 팝오버 토글
        popover.classList.toggle('hidden');
    };

    // 외부 클릭 시 팝오버 닫기
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.options-popover') && !e.target.closest('[onclick*="toggleOptionsPopover"]')) {
            document.querySelectorAll('.options-popover').forEach(p => {
                p.classList.add('hidden');
            });
        }
    });

    // 상위 메뉴 체크 시 하위 메뉴도 선택/해제
    window.toggleMenuChildren = function(checkbox) {
        const row = checkbox.closest('tr.menu-row');
        if (!row) return;

        const menuId = row.getAttribute('data-menu-id');
        const checked = checkbox.checked;

        function setChildren(parentId) {
            const children = document.querySelectorAll(`tr.menu-row[data-parent-id="${parentId}"]`);
            children.forEach(child => {
                const cb = child.querySelector('input[type="checkbox"]:not(:disabled)');
                if (cb) cb.checked = checked;
                const childId = child.getAttribute('data-menu-id');
                setChildren(childId);
            });
        }

        setChildren(menuId);
    };

    // ===== 일괄 작업 (Bulk Actions) =====

    // 전체 선택/해제 (normal 모드용)
    window.toggleSelectAllMenu = function(headerCheckbox) {
        const checkboxes = document.querySelectorAll('#menu-sortable .menu-checkbox');
        checkboxes.forEach(cb => cb.checked = headerCheckbox.checked);
        updateBulkButtonState();
    };

    // 선택 상태에 따라 버튼 활성화/비활성화
    window.updateBulkButtonState = function() {
        const checkedBoxes = document.querySelectorAll('#menu-sortable .menu-checkbox:checked');
        const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
        const bulkRestoreBtn = document.getElementById('bulkRestoreBtn');
        const bulkForceDeleteBtn = document.getElementById('bulkForceDeleteBtn');

        // 삭제된 항목과 활성 항목 분류
        let activeCount = 0;
        let deletedCount = 0;

        checkedBoxes.forEach(cb => {
            if (cb.dataset.deleted === '1') {
                deletedCount++;
            } else {
                activeCount++;
            }
        });

        // 삭제 버튼: 활성 항목이 있을 때만
        if (bulkDeleteBtn) {
            document.getElementById('deleteCount').textContent = activeCount;
            bulkDeleteBtn.disabled = activeCount === 0;
        }

        // 복원 버튼: 삭제된 항목이 있을 때만
        if (bulkRestoreBtn) {
            document.getElementById('restoreCount').textContent = deletedCount;
            bulkRestoreBtn.disabled = deletedCount === 0;
        }

        // 영구삭제 버튼: 삭제된 항목이 있을 때만
        if (bulkForceDeleteBtn) {
            document.getElementById('forceDeleteCount').textContent = deletedCount;
            bulkForceDeleteBtn.disabled = deletedCount === 0;
        }
    };

    // 선택 삭제
    window.bulkDelete = function() {
        const checkboxes = document.querySelectorAll('#menu-sortable .menu-checkbox:checked');
        const menuIds = Array.from(checkboxes)
            .filter(cb => cb.dataset.deleted !== '1')
            .map(cb => parseInt(cb.value));

        if (menuIds.length === 0) {
            showToast('삭제할 메뉴를 선택해주세요.', 'warning');
            return;
        }

        showDeleteConfirm(`${menuIds.length}개 메뉴`, () => {
            fetch('/api/admin/menus/bulk-delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ menu_ids: menuIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message || `${data.deleted}개 메뉴가 삭제되었습니다.`, 'success');
                    htmx.trigger('#menu-table', 'filterSubmit');
                } else {
                    showToast('삭제 실패: ' + (data.message || ''), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('삭제 중 오류 발생', 'error');
            });
        });
    };

    // 선택 복원
    window.bulkRestore = function() {
        const checkboxes = document.querySelectorAll('#menu-sortable .menu-checkbox:checked');
        const menuIds = Array.from(checkboxes)
            .filter(cb => cb.dataset.deleted === '1')
            .map(cb => parseInt(cb.value));

        if (menuIds.length === 0) {
            showToast('복원할 메뉴를 선택해주세요.', 'warning');
            return;
        }

        showConfirm(`선택한 ${menuIds.length}개 메뉴를 복원하시겠습니까?`, () => {
            fetch('/api/admin/menus/bulk-restore', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ menu_ids: menuIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message || `${data.restored}개 메뉴가 복원되었습니다.`, 'success');
                    htmx.trigger('#menu-table', 'filterSubmit');
                } else {
                    showToast('복원 실패: ' + (data.message || ''), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('복원 중 오류 발생', 'error');
            });
        }, { title: '메뉴 복원', icon: 'question' });
    };

    // 선택 영구삭제
    window.bulkForceDelete = function() {
        const checkboxes = document.querySelectorAll('#menu-sortable .menu-checkbox:checked');
        const menuIds = Array.from(checkboxes)
            .filter(cb => cb.dataset.deleted === '1')
            .map(cb => parseInt(cb.value));

        if (menuIds.length === 0) {
            showToast('영구삭제할 메뉴를 선택해주세요.', 'warning');
            return;
        }

        showPermanentDeleteConfirm(`${menuIds.length}개 메뉴`, () => {
            fetch('/api/admin/menus/bulk-force-delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ menu_ids: menuIds })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message || `${data.deleted}개 메뉴가 영구 삭제되었습니다.`, 'success');
                    htmx.trigger('#menu-table', 'filterSubmit');
                } else {
                    showToast('영구삭제 실패: ' + (data.message || ''), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('영구삭제 중 오류 발생', 'error');
            });
        });
    };

</script>
<script src="{{ asset('js/menu-tree.js') }}"></script>
@endpush