@props([
    'id' => 'imageLightboxModal',
    'zIndex' => '10095'
])

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-hidden="true" style="z-index: {{ $zIndex }} !important;">
    <div class="modal-dialog modal-fullscreen p-0 m-0">
        <div class="modal-content border-0 text-white position-relative overflow-hidden image-lightbox-content">
            <!-- 1. 상단 오버레이 바 (PC: 1행 좌우 배치 / 모바일: 1행 파일명·닫기 + 2행 닫기 버튼 아래 선택하기 버튼 배치) -->
            <div class="position-absolute top-0 start-0 w-100 d-flex flex-column flex-md-row align-items-stretch align-items-md-center justify-content-between gap-2 px-2 px-md-4 py-2 py-md-3 image-lightbox-topbar">
                <!-- 1.1 상단 1행: 좌측(폴더 내 순서/수량 배지 + 원본 파일명 + 해상도) & 우측(닫기 버튼) -->
                <div class="d-flex align-items-center justify-content-between gap-2 flex-grow-1" style="min-width: 0;">
                    <div class="d-flex align-items-center gap-2 overflow-hidden" style="min-width: 0; flex: 1 1 auto;">
                        <span class="badge bg-white bg-opacity-25 px-2 py-1 flex-shrink-0 text-xs" id="lightboxCounter">1 / 1</span>
                        <span class="text-truncate fw-semibold text-white small" id="lightboxTitle">이미지</span>
                        <span class="badge bg-secondary-subtle text-dark border flex-shrink-0 text-micro d-none d-sm-inline-flex" id="lightboxMetaDim">0 × 0</span>
                    </div>

                    <!-- 모바일 전용 닫기 버튼 (1행 우측 끝) -->
                    <div class="d-flex d-md-none align-items-center gap-2 flex-shrink-0">
                        <button type="button" class="btn btn-outline-light btn-sm rounded-circle p-0 d-flex align-items-center justify-content-center flex-shrink-0" style="width: 32px; height: 32px;" data-bs-dismiss="modal" title="닫기 (ESC)">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>

                <!-- 1.2 우측 컨트롤 영역 (PC: 1행 우측 끝 / 모바일: 2행 [배율 인디케이터] + [선택하기 버튼] 우측 정렬) -->
                <div class="d-flex align-items-center justify-content-end gap-2 flex-shrink-0">
                    <!-- 공용 줌 배율 인디케이터 (모바일/PC 공용 단일 ID) -->
                    <span id="lightboxZoomText"
                          class="badge bg-dark bg-opacity-75 border border-secondary border-opacity-50 px-2 py-1 small fw-bold lightbox-zoom-indicator cursor-pointer"
                          onclick="toggleLightboxActualSize()"
                          title="클릭하여 원본 크기(100%) / 화면 맞춤 전환"
                          style="color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);">100%</span>

                    <!-- 라이트박스에서 즉시 선택하기 버튼 (줄바꿈 및 세로 늘어남 원천 방지) -->
                    <button type="button" 
                            class="btn btn-primary btn-sm px-3 d-inline-flex align-items-center justify-content-center gap-1 shadow-sm fw-semibold flex-shrink-0 text-nowrap lightbox-select-btn" 
                            id="lightboxSelectBtn" 
                            onclick="confirmSelectionFromLightbox()" 
                            title="현재 이미지 적용 및 선택 완료">
                        <i class="fa-solid fa-check"></i>
                        <span>선택하기</span>
                    </button>

                    <!-- PC 전용 닫기 버튼 -->
                    <button type="button" class="d-none d-md-flex btn btn-outline-light btn-sm rounded-circle p-0 align-items-center justify-content-center flex-shrink-0" style="width: 32px; height: 32px;" data-bs-dismiss="modal" title="닫기 (ESC)">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>

            <!-- 2. 좌/우 내비게이션 버튼 -->
            <button type="button" class="btn btn-dark position-absolute start-0 top-50 translate-middle-y ms-2 ms-md-3 rounded-circle d-flex align-items-center justify-content-center p-0 shadow image-lightbox-nav-btn" id="lightboxPrevBtn" onclick="navigateLightbox(-1)">
                <i class="fa-solid fa-chevron-left fs-5"></i>
            </button>
            <button type="button" class="btn btn-dark position-absolute end-0 top-50 translate-middle-y me-2 me-md-3 rounded-circle d-flex align-items-center justify-content-center p-0 shadow image-lightbox-nav-btn" id="lightboxNextBtn" onclick="navigateLightbox(1)">
                <i class="fa-solid fa-chevron-right fs-5"></i>
            </button>

            <!-- 3. 메인 이미지 뷰포트 -->
            <div class="w-100 h-100 d-flex align-items-center justify-content-center position-relative overflow-hidden" id="lightboxViewport" style="cursor: grab; touch-action: none; user-select: none;">
                <img id="lightboxImage" src="" alt="원본 보기" class="image-lightbox-img">
            </div>

            <!-- 4. 하단 조작 가이드 (자동 숨김/표시 및 기기 환경 맞춤 문구 적용) -->
            <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3 px-3 py-1 bg-black rounded-pill small text-white text-center lightbox-hint-badge text-xs" id="lightboxHintBadge" style="z-index: 10;">
                <span id="lightboxHintText">마우스 휠 / +,- 키: 줌 | 드래그: 이동 | 키보드 ← / →: 이전/다음</span>
            </div>
        </div>
    </div>
</div>