@props([
    'type'   => 'dropdown', // 'dropdown' (상단 액션바) 또는 'context' (우클릭 마우스 메뉴)
    'prefix' => 'modal',    // 'modal', 'modal-pc', 'modal-mobile', 'page'
])

@php
    $isContext = ($type === 'context');

    // 계층형 표준 네이밍 매핑 (JS evaluateMenuRules/updateActionBar와 100% 일치)
    $wrapId   = $prefix . '-act-dropdown-group';
    $btnId    = $prefix . '-act-toggle-btn';
    $menuId   = $isContext ? ($prefix . '-context-menu') : ($prefix . '-act-dropdown-menu');
    $headerId = $prefix . '-act-dropdown-header';
    $actId    = $isContext ? 'ctx' : ($prefix . '-act');

    $menuClasses = $isContext
        ? 'dropdown-menu shadow-lg py-1 border-0 common-rounded-card'
        : 'dropdown-menu shadow border-0 py-1 common-rounded-dropdown';

    // 컨텍스트 메뉴는 마우스 좌표 이동을 위해 position: fixed 유지
    $menuStyle = $isContext
        ? 'position: fixed; z-index: 10095; display: none; min-width: 205px;'
        : 'min-width: 205px; z-index: 1060;';
@endphp

@if(!$isContext)
<!-- 1. 액션 드롭다운 래퍼 그룹 -->
<div class="dropdown d-inline-block" id="{{ $wrapId }}">
    <button class="btn btn-sm btn-outline-secondary dropdown-toggle common-rounded fw-semibold py-1 px-2 d-flex align-items-center gap-1"
            type="button" 
            id="{{ $btnId }}" 
            data-bs-toggle="dropdown" 
            aria-expanded="false" 
            disabled>
        <i class="fa-solid fa-ellipsis-vertical text-secondary"></i>
        <span>작업</span>
    </button>
@endif

    <!-- 2. 드롭다운 및 우클릭 메뉴 목록 컨테이너 -->
    <ul class="{{ $menuClasses }}" 
        id="{{ $menuId }}" 
        style="{{ $menuStyle }}" 
        @if(!$isContext) aria-labelledby="{{ $btnId }}" @endif>

        @if(!$isContext)
            <li>
                <h6 class="dropdown-header py-1 px-3 text-muted border-bottom mb-1 fw-bold small" id="{{ $headerId }}">선택 항목 작업</h6>
            </li>
        @endif

        {{-- 2.1 [모달 전용] 선택 완료 (싱글 슬롯 다중 선택 시 원천 숨김) --}}
        @if(str_contains($prefix, 'modal') || $isContext)
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center fw-semibold text-primary d-none" 
               id="{{ $actId }}-select-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('select')" : "closeBatchDropdowns(); confirmImageSelection();" }}">
                <i class="fa-solid fa-check me-2"></i> <span>선택 완료</span>
            </a>
        </li>
        @endif

        {{-- 2.2 원본 크게 보기 (단일 1개 선택 전용) --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-view-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('view')" : "closeBatchDropdowns(); triggerSingleImageLightbox();" }}">
                <i class="fa-solid fa-expand me-2 text-primary"></i> <span>원본 크게 보기</span>
            </a>
        </li>

        @if($isContext)
            {{-- 2.3 상세 정보 보기 (우클릭 단일 전용) --}}
            <li>
                <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
                   id="ctx-info-menu" 
                   href="javascript:void(0)" 
                   onclick="contextMenuAction('info')">
                    <i class="fa-solid fa-circle-info me-2 text-primary"></i> <span>상세 정보 보기</span>
                </a>
            </li>
        @endif

        {{-- 2.4 복사 (Ctrl+C) - 우클릭 & 상단 작업 드롭다운 공용 --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-copy-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('copy')" : "closeBatchDropdowns(); copySelectedImagesToClipboard();" }}">
                <i class="fa-solid fa-copy me-2 text-secondary"></i> <span>복사 (Ctrl+C)</span>
            </a>
        </li>

        @if($isContext)
            {{-- 2.5 이름 바꾸기 (우클릭 단일 전용) --}}
            <li>
                <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
                   id="ctx-rename-menu" 
                   href="javascript:void(0)" 
                   onclick="contextMenuAction('rename')">
                    <i class="fa-solid fa-pen me-2 text-secondary"></i> <span>이름 바꾸기</span>
                </a>
            </li>

            <li><div class="dropdown-divider my-1 d-none" id="ctx-dynamic-divider"></div></li>
        @endif

        {{-- 2.6 공식 라이브러리 배포 (본사 관리자 전용) --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-publish-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('publish')" : "closeBatchDropdowns(); executeToggleVisibilityBatch(Array.from(selectedImagesMap.keys()), 'public');" }}">
                <i class="fa-solid fa-building-columns me-2 text-primary"></i> <span>공식 라이브러리 배포</span>
            </a>
        </li>

        {{-- 2.7 공식 라이브러리 회수 (본사 관리자 전용) --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-unpublish-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('unpublish')" : "closeBatchDropdowns(); executeToggleVisibilityBatch(Array.from(selectedImagesMap.keys()), 'private');" }}">
                <i class="fa-solid fa-eye-slash me-2 text-secondary"></i> <span>공식 라이브러리 회수</span>
            </a>
        </li>

        {{-- 2.8 내 보관함으로 가져오기 (뷰티샵 전용) --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-import-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('import')" : "closeBatchDropdowns(); triggerBulkImport();" }}">
                <i class="fa-solid fa-cloud-arrow-down me-2 text-primary"></i> <span>내 보관함으로 가져오기</span>
            </a>
        </li>

        {{-- 2.9 폴더 이동 --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-move-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('move')" : "closeBatchDropdowns(); openMoveFolderModal();" }}">
                <i class="fa-solid fa-folder-tree me-2 text-warning"></i> <span>폴더 이동</span>
            </a>
        </li>

        {{-- 2.10 보호 잠금 / 해제 --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 d-flex align-items-center d-none" 
               id="{{ $actId }}-protect-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('protect')" : "closeBatchDropdowns(); bulkToggleProtection();" }}">
                <i class="fa-solid fa-lock text-warning me-2"></i> <span>보호 잠금 / 해제</span>
            </a>
        </li>

        <li><hr class="dropdown-divider my-1 d-none" id="{{ $isContext ? 'ctx-delete-divider' : ($prefix . '-act-divider') }}"></li>

        {{-- 2.11 선택 항목 삭제 --}}
        <li>
            <a class="dropdown-item py-1.5 px-3 text-danger d-flex align-items-center d-none" 
               id="{{ $actId }}-delete-menu" 
               href="javascript:void(0)" 
               onclick="{{ $isContext ? "contextMenuAction('delete')" : "closeBatchDropdowns(); triggerBulkDelete();" }}">
                <i class="fa-solid fa-trash me-2 text-danger"></i> <span>{{ $isContext ? '삭제하기' : '선택 항목 삭제' }}</span>
            </a>
        </li>
    </ul>

@if(!$isContext)
</div>
@endif