@extends('layouts.admin')

@section('title', '이미지 라이브러리')

@section('content')
<!-- 최상위 컨테이너 -->
<div class="win-explorer-root d-flex flex-column overflow-hidden position-relative"
    id="winExplorer"
    data-is-shop="false"
    style="height: calc(100vh - 70px); background-color: #f8fafc;">

    <!-- [전역 통합 작업 로딩 오버레이] 저장, 수정, 삭제, 이동 시 화면 중앙 표시 -->
    <div id="damGlobalLoadingOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none flex-column align-items-center justify-content-center"
        style="background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(1.5px); z-index: 10090;">
        <div class="bg-white border shadow-sm px-4 py-3 text-center common-rounded-card d-flex flex-column align-items-center gap-2">
            <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;"></div>
            <div class="fw-bold text-dark small" id="damGlobalLoadingText" style="letter-spacing: -0.01em;">처리 중...</div>
        </div>
    </div>

    <!-- 🌟 [추가] 실시간 진행 현황 오버레이 (초기 상태: d-none 숨김) -->
    <div id="imageActionProgressOverlay" 
         class="position-absolute top-50 start-50 translate-middle bg-white border shadow-lg p-3 text-center common-rounded-card d-none" 
         style="z-index: 10065; min-width: 320px; pointer-events: auto;">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <span class="small fw-bold text-dark" id="imageActionStatusText">처리 중 (0/0)...</span>
            <span class="badge bg-danger-subtle text-danger small" id="imageActionPercentText">0%</span>
        </div>
        <div class="progress mb-2" style="height: 8px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" 
                 id="imageActionProgressBar" 
                 role="progressbar" 
                 style="width: 0%"></div>
        </div>
        <div class="text-muted text-truncate" style="font-size: 0.72rem;" id="imageActionFileName">준비 중...</div>
    </div>

    <!-- 1. [상단 고정 헤더 바] 좌측: 3대 보관함 탭 | 우측: 파일 업로드 액션 -->
    <div class="border-bottom bg-white px-4 py-2 flex-shrink-0 d-flex align-items-center justify-content-between shadow-sm" style="z-index: 10;">
        <ul class="nav nav-pills gap-1" id="imageLibraryMainTabs" role="tablist">
            <!-- 탭 1: 내 보관함 -->
            <li class="nav-item" role="presentation">
                <button class="nav-link active py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2"
                    id="tab-btn-my"
                    data-tab="my"
                    onclick="switchImageTab('my')"
                    type="button">
                    <i class="fa-solid fa-folder"></i>
                    <span>내 보관함</span>
                </button>
            </li>

            <!-- 탭 2: 공식 라이브러리 -->
            <li class="nav-item" role="presentation">
                <button class="nav-link py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2 text-secondary"
                    id="tab-btn-library"
                    data-tab="library"
                    onclick="switchImageTab('library')"
                    type="button">
                    <i class="fa-solid fa-building-columns"></i>
                    <span>공식 라이브러리</span>
                </button>
            </li>

            <!-- 탭 3: 커뮤니티 보관함 -->
            <li class="nav-item" role="presentation">
                <button class="nav-link py-1 px-3 common-rounded fw-semibold small d-flex align-items-center gap-2 text-secondary"
                    id="tab-btn-community"
                    data-tab="community"
                    onclick="switchImageTab('community')"
                    type="button">
                    <i class="fa-solid fa-users"></i>
                    <span>커뮤니티 보관함</span>
                </button>
            </li>
        </ul>

        <!-- 우측: 상태 뱃지 및 파일 업로드 버튼 -->
        <div class="d-flex align-items-center gap-2">
            <span id="tabStatusBadge" class="badge bg-light text-muted border px-2 py-1 small fw-normal d-none d-md-inline-flex align-items-center">
                <i class="fa-solid fa-user-shield me-1 text-primary"></i> 본사 총괄 관리 모드
            </span>
            <button type="button" class="btn btn-primary btn-sm px-3 shadow-sm common-rounded fw-semibold" id="btnMainUpload" onclick="document.getElementById('directFileInput').click()">
                <i class="fa-solid fa-cloud-arrow-up me-1"></i> 파일 업로드
            </button>
            <input type="file" id="directFileInput" class="d-none" multiple accept="image/*">
        </div>
    </div>

    <!-- 2. [본문 워크스페이스] -->
    <div class="d-flex flex-grow-1 overflow-hidden" style="min-height: 0;">

        <!-- ◀ 좌측: 계층형 폴더 트리 영역 (너비 260px 고정) -->
        <div class="border-end bg-white d-flex flex-column flex-shrink-0 h-100" style="width: 260px; min-width: 260px; min-height: 0;">

            <!-- 상단 폴더 내비게이션 & 전체 이미지 -->
            <div class="p-2 border-bottom bg-light bg-opacity-50 flex-shrink-0">
                <div class="d-flex align-items-center justify-content-between gap-1 mb-2 pb-1 border-bottom border-secondary border-opacity-10">
                    <div class="d-flex align-items-center gap-1">
                        <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                            id="btnNavBack" style="width: 26px; height: 26px;" onclick="navHistoryBack()" title="뒤로" disabled>
                            <i class="fa-solid fa-arrow-left" style="font-size: 0.72rem;"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                            id="btnNavForward" style="width: 26px; height: 26px;" onclick="navHistoryForward()" title="앞으로" disabled>
                            <i class="fa-solid fa-arrow-right" style="font-size: 0.72rem;"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                            id="btnNavUp" style="width: 26px; height: 26px;" onclick="navGoParent()" title="상위 폴더" disabled>
                            <i class="fa-solid fa-arrow-up" style="font-size: 0.72rem;"></i>
                        </button>

                        <!-- 최근 방문 기록 드롭다운 -->
                        <div class="dropdown d-inline-block">
                            <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                                id="mediaNavHistoryDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false" style="width: 20px; height: 26px;" title="최근 위치">
                                <i class="fa-solid fa-chevron-down" style="font-size: 0.65rem;"></i>
                            </button>
                            <ul class="dropdown-menu shadow-sm small py-1" id="folderHistoryDropdown" style="font-size: 0.78rem; min-width: 180px; max-height: 260px; overflow-y: auto; z-index: 1050;">
                                <li><span class="dropdown-item-text text-muted py-1 px-3 small">방문 기록 없음</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="text-truncate text-secondary fw-semibold px-1 text-end flex-grow-1" id="currentFolderBreadcrumb" style="font-size: 0.75rem;">
                        전체 이미지
                    </div>
                </div>

                <!-- 전체 이미지 버튼 및 관리 툴버튼 (+ / ↻) -->
                <div class="d-flex align-items-center justify-content-between gap-1 mb-2">
                    <div class="flex-grow-1">
                        <button type="button" class="list-group-item list-group-item-action d-flex align-items-center py-1 px-2 border-0 common-rounded active bg-primary text-white shadow-sm"
                            id="folder-item-all-btn" style="height: 28px; width: 100%; cursor: pointer;" onclick="selectFolder('all', '전체 이미지')">
                            <span class="fw-semibold small text-truncate">
                                <i class="fa-solid fa-layer-group me-1 text-white"></i>전체 이미지
                            </span>
                        </button>
                    </div>

                    <div class="d-flex align-items-center gap-1 flex-shrink-0">
                        <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                            id="btnCreateFolderQuick" style="width: 28px; height: 28px;" onclick="showCreateFolderInput()" title="새 폴더 만들기">
                            <i class="fa-solid fa-plus text-primary" style="font-size: 0.75rem;"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm p-0 d-flex align-items-center justify-content-center bg-white common-rounded-xs"
                            id="btnRefreshFolderTree" style="width: 28px; height: 28px;" onclick="refreshFoldersTree()" title="폴더 목록 새로고침">
                            <i class="fa-solid fa-rotate-right text-secondary" style="font-size: 0.75rem;"></i>
                        </button>
                    </div>
                </div>

                <!-- 인라인 폴더 생성 입력 박스 -->
                <div id="mediaCreateFolderBox" class="mb-1 d-none">
                    <div class="input-group input-group-sm shadow-sm">
                        <input type="text"
                            id="newFolderNameInput"
                            class="form-control form-control-sm px-2 py-1"
                            placeholder="새 폴더명 입력..."
                            maxlength="50"
                            onkeydown="if(event.key === 'Enter') submitCreateFolder(); else if(event.key === 'Escape') showCreateFolderInput();">
                        <button class="btn btn-primary btn-sm px-2 py-1" type="button" onclick="submitCreateFolder()" title="생성">
                            <i class="fa-solid fa-check"></i>
                        </button>
                        <button class="btn btn-outline-secondary btn-sm px-2 py-1" type="button" onclick="showCreateFolderInput()" title="취소">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- [중앙 독립 스크롤] 폴더 트리 노출 -->
            <div class="flex-grow-1 overflow-y-auto p-2" id="damFolderTreeContainer" style="white-space: nowrap; min-height: 0;">
                <div class="text-center py-4 text-muted small">
                    <div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
                    <div style="font-size: 0.75rem;">폴더 목록 로딩 중...</div>
                </div>
            </div>

            <!-- [하단 고정 푸터] 임시 파일 탭 + 안내 문구 고정 영역 -->
            <div class="p-2 border-top bg-light bg-opacity-25 flex-shrink-0" id="imageFolderFixedFooterArea">
                <div id="imageFolderFixedOrphansContainer" class="mb-2"></div>
                <div class="text-center">
                    <small class="text-muted" style="font-size: 0.7rem;">
                        <i class="fa-solid fa-circle-info me-1"></i> 우클릭: 하위폴더 / 이름변경 / 삭제
                    </small>
                </div>
            </div>
        </div>

        <!-- ▶ 우측: 이미지 갤러리 그리드 + 상단 툴바 + 인스펙터 패널 -->
        <div class="flex-grow-1 d-flex flex-column overflow-hidden bg-transparent position-relative h-100" style="min-width: 0; min-height: 0;">

            <!-- 🌟 우측 상단 고정 툴바: z-index 1050 및 position: relative 적용 (체크박스 겹침 방어) -->
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 px-3 py-2 border-bottom bg-white flex-shrink-0" style="z-index: 1050; position: relative;">
                <div class="d-flex align-items-center gap-2">
                    <div class="form-check m-0 d-flex align-items-center me-1">
                        <input class="form-check-input shadow-none cursor-pointer common-rounded-xs" type="checkbox" id="masterCheckbox" onchange="toggleMasterSelect(this)">
                        <label class="form-check-label small ms-2 text-dark fw-semibold cursor-pointer" for="masterCheckbox">전체 선택</label>
                    </div>

                    <!-- [컴포넌트 적용] 리스트 상단 액션바 드롭다운 -->
                    <x-admin.image-menu-core type="dropdown" prefix="list" />

                    <span id="statSelectedBadge" class="badge bg-primary-subtle text-primary border border-primary-subtle common-rounded-badge px-2 py-1 small fw-normal d-none">
                        0개 선택됨
                    </span>
                </div>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="btn-group-sm common-rounded-btn-group overflow-hidden" role="group" aria-label="정렬 방식">
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn active" id="sortBtnDate" onclick="toggleMediaSort('date')" title="날짜순 정렬">
                            <span>날짜순</span> <i class="fa-solid fa-arrow-down-short-wide ms-1 sort-icon"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn" id="sortBtnName" onclick="toggleMediaSort('name')" title="파일이름 정렬">
                            <span>파일이름</span> <i class="fa-solid fa-sort ms-1 sort-icon text-muted"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 sort-toggle-btn" id="sortBtnSize" onclick="toggleMediaSort('size')" title="파일용량 정렬">
                            <span>파일용량</span> <i class="fa-solid fa-sort ms-1 sort-icon text-muted"></i>
                        </button>
                    </div>

                    <div class="btn-group-sm common-rounded-btn-group overflow-hidden" role="group" aria-label="보기 방식">
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn active" id="viewBtnLarge" onclick="changeMediaViewMode('large')" title="큰 아이콘 보기">
                            <i class="fa-solid fa-table-cells-large"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn" id="viewBtnSmall" onclick="changeMediaViewMode('small')" title="중간 아이콘 보기">
                            <i class="fa-solid fa-table-cells"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary py-1 px-2 view-mode-btn" id="viewBtnList" onclick="changeMediaViewMode('list')" title="자세히 보기 (목록형)">
                            <i class="fa-solid fa-list"></i>
                        </button>
                    </div>

                    <div class="input-group input-group-sm common-rounded-input" style="width: 180px;">
                        <input type="text" class="form-control common-rounded-start" id="damKeywordSearch" placeholder="파일명 검색..." onkeydown="if(event.key==='Enter') loadImages(1, false);">
                        <button class="btn btn-outline-secondary common-rounded-end" type="button" onclick="loadImages(1, false)">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </div>

                    <button type="button"
                        class="btn btn-outline-dark btn-sm px-2 common-rounded fw-semibold d-inline-flex align-items-center gap-1 active"
                        id="btnToggleInspector"
                        onclick="toggleInspectorPanel()"
                        title="상세보기 창 열기/닫기">
                        <i class="fa-solid fa-table-columns me-1"></i>
                        <span>상세보기</span>
                    </button>
                </div>
            </div>

            <!-- 중앙 워크스페이스 (갤러리 캔버스 + 우측 인스펙터 패널) -->
            <div class="d-flex flex-grow-1 overflow-hidden position-relative h-100" style="min-height: 0;">

                <!-- 갤러리/테이블 컨테이너 영역 -->
                <div class="flex-grow-1 overflow-y-auto p-2 position-relative h-100 w-100" id="winDropZoneContainer" style="min-height: 0; min-width: 0;">
                    <div class="win-drop-overlay" id="winDropOverlay">
                        <div class="text-center text-primary">
                            <i class="fa-solid fa-cloud-arrow-up fa-3x mb-2"></i>
                            <h5 class="fw-bold">여기에 파일을 드롭하여 업로드</h5>
                            <p class="small text-muted mb-0">현재 선택된 보관함 및 폴더에 즉시 등록됩니다.</p>
                        </div>
                    </div>

                    <div id="damMarqueeBox"></div>

                    <!-- 메인 이미지 / 목록형 렌더링 타깃 -->
                    <div id="damImageContainer" class="w-100" style="min-width: 100%;"></div>

                    <div id="damLoadingSpinner" class="text-center py-4 d-none">
                        <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                        <span class="small text-muted ms-2">이미지 로딩 중...</span>
                    </div>

                    <div id="damEmptyState" class="text-center py-5 text-muted small d-none">
                        <i class="fa-regular fa-image fa-3x mb-3 text-secondary opacity-50"></i>
                        <p>표시할 이미지가 없습니다.</p>
                    </div>
                </div>

                <!-- 분할 리사이저 바 -->
                <div class="win-resizer flex-shrink-0" id="winResizer"></div>

                <!-- 🌟 우측 인스펙터 패널 -->
                <div class="win-inspector-panel d-flex flex-column h-100 bg-white border-start flex-shrink-0"
                    id="winInspectorPanel"
                    style="min-height: 0;">

                    <!-- 상단 타이틀 & 닫기 헤더 -->
                    <div class="p-2 px-3 border-bottom d-flex align-items-center justify-content-between bg-light bg-opacity-50 flex-shrink-0">
                        <span class="small fw-bold text-dark">
                            <i class="fa-solid fa-circle-info me-1 text-primary"></i> 정보 및 상세설정
                        </span>
                        <button type="button" class="btn-close" style="font-size: 0.7rem;" onclick="toggleInspectorPanel(false)" title="상세보기 닫기"></button>
                    </div>

                    <!-- 1) 선택 없음 상태 -->
                    <div id="inspectorEmptyState" class="h-100 d-flex flex-column align-items-center justify-content-center text-muted small p-4">
                        <i class="fa-solid fa-image fa-2x mb-2 text-secondary opacity-50"></i>
                        <span>항목(이미지 또는 폴더)을 선택하면 상세 정보가 표시됩니다.</span>
                    </div>

                    <!-- 2) 인스펙터 활성 본문 -->
                    <div id="inspectorContent" class="h-100 d-none flex-column overflow-hidden flex-grow-1" style="min-height: 0;">
                        <!-- 단일 이미지 폼 -->
                        <form id="inspectorForm" onsubmit="event.preventDefault(); saveImageMeta();" class="h-100 d-none flex-column overflow-hidden flex-grow-1" style="min-height: 0;">
                            <input type="hidden" id="insImageId" name="id">

                            <!-- 상세 입력 폼 독립 스크롤 영역 -->
                            <div class="win-inspector-scroll-area flex-grow-1 overflow-y-auto p-3" style="min-height: 0;">
                                <!-- 미리보기 박스 -->
                                <div class="win-inspector-preview-box position-relative mb-2 bg-opacity-50 border common-rounded text-center"
                                    style="width: 100%; overflow: hidden; background-color: #f8fafc;">
                                    <img id="insPreviewImg" src="" alt="미리보기"
                                        class="rounded border shadow-sm"
                                        style="max-width: 100% !important; max-height: 65vh !important; width: auto !important; height: auto !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle;">
                                    <span id="insProtectedBadge" class="position-absolute top-0 end-0 badge bg-warning text-dark m-2 shadow-sm d-none">
                                        <i class="fa-solid fa-lock"></i> 보호 중
                                    </span>
                                </div>

                                <!-- 🌟 [추가] 인스펙터 원본 크게 보기 버튼 -->
                                <div class="text-center mb-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size: 0.73rem;" onclick="openStandaloneDetailLightbox()">
                                        <i class="fa-solid fa-expand me-1"></i>원본 크게 보기
                                    </button>
                                </div>

                                <div class="d-flex flex-wrap align-items-center justify-content-center gap-1 mb-3 small">
                                    <span class="badge bg-light text-dark border" id="insDimensions">-</span>
                                    <span class="badge bg-light text-dark border" id="insSize">-</span>
                                    <span class="badge bg-light text-dark border" id="insExt">-</span>
                                    <span id="insUsageArea" class="d-inline-block">
                                        <span class="badge bg-light text-muted border" id="insUsedBadge">-</span>
                                    </span>
                                </div>

                                <!-- 공식 라이브러리 공개 배포 스위치 -->
                                <div class="p-2 mb-3 bg-light border common-rounded">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <label for="insVisibilitySwitch" class="form-label small fw-bold text-dark m-0">공식 라이브러리 공개</label>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="insVisibilitySwitch" onchange="toggleImageVisibility(this)">
                                        </div>
                                    </div>
                                    <small class="text-muted d-block mt-1" style="font-size: 0.72rem;">
                                        공개(ON) 시 전국의 모든 뷰티샵이 공식 라이브러리에서 사용할 수 있습니다.
                                    </small>
                                </div>

                                <!-- 보호 잠금 설정/해제 토글 스위치 -->
                                <div class="p-2 mb-3 bg-light border common-rounded">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <label for="insProtectSwitch" class="form-label small fw-bold text-dark m-0">
                                            <i class="fa-solid fa-lock text-warning me-1"></i> 에셋 보호 잠금
                                        </label>
                                        <div class="form-check form-switch m-0">
                                            <input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="insProtectSwitch" onchange="toggleImageProtectSwitch(this)">
                                        </div>
                                    </div>
                                    <small class="text-muted d-block mt-1" id="insProtectDesc" style="font-size: 0.72rem;">
                                        보호(ON) 시 일괄 정리 및 임시 삭제 대상에서 안전하게 제외됩니다.
                                    </small>
                                </div>

                                <!-- 타이틀 -->
                                <div class="mb-2">
                                    <label for="insTitle" class="form-label small fw-bold text-dark mb-1">이미지 타이틀</label>
                                    <input type="text" id="insTitle" name="title" class="form-control form-control-sm" placeholder="타이틀 입력">
                                </div>

                                <!-- 대체 텍스트 (Alt) -->
                                <div class="mb-2">
                                    <label for="insAltText" class="form-label small fw-bold text-dark mb-1">대체 텍스트 (Alt)</label>
                                    <input type="text" id="insAltText" name="alt_text" class="form-control form-control-sm" placeholder="Alt 텍스트 입력">
                                </div>

                                <!-- SEO 식별자 (Slug) -->
                                <div class="mb-2">
                                    <label for="insSeoSlug" class="form-label small fw-bold text-dark mb-1">
                                        SEO 식별자 (Slug)
                                        <small class="text-muted fw-normal">(검색엔진 친화적 URL)</small>
                                    </label>
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text bg-white text-muted border-end-0"><i class="fa-solid fa-link" style="font-size: 0.72rem;"></i></span>
                                        <input type="text" id="insSeoSlug" name="seo_slug" class="form-control form-control-sm border-start-0 ps-0" placeholder="예: gangnam-nail-art-2026">
                                    </div>
                                </div>

                                <!-- 저작권 / 출처 (Credit) -->
                                <div class="mb-2">
                                    <label for="insCredit" class="form-label small fw-bold text-dark mb-1">저작권 / 출처 (Credit)</label>
                                    <input type="text" id="insCredit" name="credit" class="form-control form-control-sm" placeholder="예: GLOBEAU 본사, 원장 직찍, 게티이미지">
                                </div>

                                <!-- 검색 태그 -->
                                <div class="mb-2">
                                    <label for="insTags" class="form-label small fw-bold text-dark mb-1">검색 태그 (쉼표 구분)</label>
                                    <input type="text" id="insTags" name="tags" class="form-control form-control-sm tag-input-field" placeholder="예: 시술전후, 프로모션, 네일">
                                </div>

                                <!-- 상세 설명 (Description) Textarea -->
                                <div class="mb-2">
                                    <label for="insDescription" class="form-label small fw-bold text-dark mb-1">상세 설명 및 메모</label>
                                    <textarea id="insDescription" name="description" class="form-control form-control-sm" rows="3" placeholder="이미지에 대한 상세 메모나 설명을 입력하세요..."></textarea>
                                </div>

                                <!-- 원본 파일명 -->
                                <div class="mb-3">
                                    <label for="insOriginalName" class="form-label small fw-bold text-dark mb-1">파일명</label>
                                    <input type="text" id="insOriginalName" name="original_name" class="form-control form-control-sm">
                                </div>

                                <div class="mb-2">
                                    <button type="button" class="btn btn-outline-secondary btn-sm w-100" id="insBtnToggleProtect" onclick="toggleProtectCurrent()">
                                        <i class="fa-solid fa-lock me-1"></i> 보호 잠금 설정/해제
                                    </button>
                                </div>
                            </div>

                            <!-- [하단 상시 고정 버튼 바] -->
                            <div class="win-inspector-footer border-top px-3 py-2 bg-white d-flex align-items-center justify-content-end gap-2 flex-shrink-0" style="z-index: 5;">
                                <button type="button" class="btn btn-outline-danger btn-sm px-3 fw-medium d-inline-flex align-items-center gap-1" onclick="deleteCurrentImage()">
                                    <i class="fa-solid fa-trash-can"></i> 삭제
                                </button>
                                <button type="submit" class="btn btn-primary btn-sm px-3 fw-bold d-inline-flex align-items-center gap-1 shadow-sm">
                                    <i class="fa-solid fa-floppy-disk"></i> 수정 저장
                                </button>
                            </div>
                        </form>

                        <!-- 다중 선택 뷰 -->
                        <div id="multiInspectorView" class="h-100 d-none flex-column justify-content-center p-3">
                            <div class="inspector-multi-info text-center py-4">
                                <i class="fa-solid fa-layer-group fa-3x text-primary mb-3"></i>
                                <h6 class="fw-bold text-dark" id="multiSelectTitle">0개 항목 선택됨</h6>
                                <p class="small text-muted mb-4" id="multiSelectDesc">선택한 항목들을 마우스로 잡고 좌측 폴더로 드래그하면 한 번에 이동할 수 있습니다.</p>

                                <div class="d-flex flex-column gap-2">
                                    <button type="button" class="btn btn-outline-primary btn-sm" id="multiBtnPublish" onclick="bulkPublishToLibrary(true)">
                                        <i class="fa-solid fa-building-columns me-1"></i>선택한 이미지 공식 라이브러리로 배포
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" id="multiBtnUnpublish" onclick="bulkPublishToLibrary(false)">
                                        <i class="fa-solid fa-eye-slash me-1"></i>공식 라이브러리 배포 회수
                                    </button>
                                    <button type="button" class="btn btn-outline-warning btn-sm" id="multiBtnProtect" onclick="bulkToggleProtection()">
                                        <i class="fa-solid fa-shield-halved me-1"></i>선택한 이미지 일괄 보호/해제
                                    </button>
                                    <button type="button" class="btn btn-outline-danger btn-sm" id="multiBtnDelete" onclick="deleteSelectedItemsBatch()">
                                        <i class="fa-solid fa-trash me-1"></i>선택 항목 일괄 삭제 (Delete)
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. [최하단 상시 고정 상태바 및 단축키 안내 푸터] -->
    <div class="win-statusbar border-top bg-white px-4 py-2 d-flex justify-content-between align-items-center flex-shrink-0"
        style="font-size: 0.75rem; height: 38px; z-index: 10;">
        <div class="text-muted d-flex align-items-center gap-3">
            <span><i class="fa-solid fa-arrow-pointer me-1 text-primary"></i> <strong>빈 공간 드래그</strong>: 영역 다중 선택</span>
            <span><i class="fa-solid fa-keyboard me-1 text-primary"></i> <strong>Ctrl + A</strong>: 전체 선택</span>
            <span><i class="fa-solid fa-trash-can me-1 text-primary"></i> <strong>Delete</strong>: 선택 항목 삭제</span>
            <span><i class="fa-solid fa-hand-pointer me-1 text-primary"></i> <strong>우클릭</strong>: 상세 메뉴</span>
        </div>

        <div class="text-secondary d-flex align-items-center gap-3">
            <span id="statTotalText">준비 중...</span>
            <span id="statSelectedFolder">폴더: 전체 이미지</span>
            <span id="statLastSyncTime" class="text-muted">준비 완료</span>
        </div>
    </div>

    <!-- 다중 드래그 고스트 뱃지 -->
    <div id="dragGhostBadge" class="win-drag-ghost-badge">
        <i class="fa-solid fa-clone"></i>
        <span id="dragGhostCount">1</span>개 항목 이동
    </div>
</div>

<!-- 🌟 [신규 추가] 독립 리스트 페이지용 전용 라이트박스 뷰어 모달 -->
<div class="modal fade" id="mediaLightboxModal" tabindex="-1" aria-hidden="true" style="z-index: 10095;">
    <div class="modal-dialog modal-fullscreen p-0 m-0">
        <div class="modal-content border-0 text-white position-relative overflow-hidden" style="background-color: rgba(15, 23, 42, 0.96) !important;">

            <div class="position-absolute top-0 start-0 w-100 d-flex align-items-center justify-content-between px-4 py-3" style="z-index: 10; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);">
                <div class="d-flex align-items-center gap-3">
                    <span class="badge bg-white bg-opacity-25 px-2 py-1" id="lightboxCounter">1 / 1</span>
                    <span class="text-truncate fw-semibold" id="lightboxTitle" style="max-width: 450px; font-size: 0.95rem;">이미지</span>
                    <span class="badge bg-secondary-subtle text-dark border small" id="lightboxMetaDim">0 × 0</span>
                </div>

                <div class="d-flex align-items-center gap-2">
                    <!-- 실시간 배율 표시 및 100% 리셋 버튼 (호버 시 시인성 보장) -->
                    <button type="button"
                        class="btn btn-sm border border-white border-opacity-25 px-2 py-1 fw-bold d-inline-flex align-items-center gap-1 lightbox-zoom-indicator"
                        id="lightboxZoomDisplayBtn"
                        onclick="resetLightboxZoom()"
                        title="클릭 시 100% 크기로 초기화"
                        style="background: rgba(255, 255, 255, 0.12); color: #ffffff; min-width: 76px; justify-content: center; backdrop-filter: blur(4px);">
                        <i class="fa-solid fa-arrows-rotate small text-white-50"></i>
                        <span id="lightboxZoomPercent" style="font-variant-numeric: tabular-nums;">100%</span>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-light border-0" onclick="zoomLightbox(0.25)" title="확대">
                        <i class="fa-solid fa-magnifying-glass-plus"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-light border-0" onclick="zoomLightbox(-0.25)" title="축소">
                        <i class="fa-solid fa-magnifying-glass-minus"></i>
                    </button>
                    <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>

            <button type="button" class="btn btn-dark position-absolute start-0 top-50 translate-middle-y ms-3 rounded-circle d-flex align-items-center justify-content-center p-0 shadow"
                id="lightboxPrevBtn" onclick="navigateLightbox(-1)" style="width: 48px; height: 48px; z-index: 10; opacity: 0.85;">
                <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-3 rounded-circle d-flex align-items-center justify-content-center p-0 shadow"
                id="lightboxNextBtn" onclick="navigateLightbox(1)" style="width: 48px; height: 48px; z-index: 10; opacity: 0.85;">
                <i class="fa-solid fa-chevron-right fs-5"></i>
            </button>

            <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="원본 보기"
                    style="max-width: 90vw; max-height: 85vh; object-fit: contain; transition: transform 0.05s ease-out; transform-origin: center center; will-change: transform;">
            </div>

            <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" style="font-size: 0.75rem; z-index: 10;">
                마우스 휠: 확대/축소 | 드래그: 이동 | 키보드 ← / →: 이전/다음 | 더블클릭: 100% 토글
            </div>
        </div>
    </div>

    <!-- 최하단 우클릭 컨텍스트 메뉴 -->
    <!-- <x-admin.image-menu-core type="context" prefix="list" /> -->
</div>

<!-- 카드 & 리스트 렌더링 템플릿 (컴포넌트) -->
<x-admin.image-card-templates />

@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin/admin_image.css') }}?v={{ time() }}">
@endpush

@push('scripts')
<!-- 공용 이미지 탐색기 코어 스크립트 및 리스트 전용 확장 스크립트 순차 로드 -->
<script src="{{ asset('js/admin/admin_image.js') }}?v={{ time() }}"></script>
@endpush