@extends('layouts.admin')

@section('title', '이미지 관리')

@section('content')
<div class="win-explorer-root" id="winExplorer">
    <!-- 1. 상단 툴바 -->
    <div class="win-toolbar">
        <div class="d-flex align-items-center gap-2">
            <!-- 뒤로/앞으로/상위 네비게이션 -->
            <div class="win-nav-group">
                <button type="button" class="win-nav-btn" id="btnNavBack" onclick="navHistoryBack()" title="뒤로" disabled>
                    <i class="fa-solid fa-arrow-left"></i>
                </button>
                <button type="button" class="win-nav-btn" id="btnNavForward" onclick="navHistoryForward()" title="앞으로" disabled>
                    <i class="fa-solid fa-arrow-right"></i>
                </button>
                <button type="button" class="win-nav-btn" id="btnNavUp" onclick="navGoParent()" title="상위 폴더">
                    <i class="fa-solid fa-arrow-up"></i>
                </button>
                <div class="dropdown d-inline-block">
                    <button type="button" class="win-nav-btn dropdown-toggle" data-bs-toggle="dropdown" title="방문 기록">
                        <i class="fa-solid fa-caret-down"></i>
                    </button>
                    <ul class="dropdown-menu shadow-sm small" id="folderHistoryDropdown" style="font-size: 0.8rem;">
                        <li><span class="dropdown-item-text text-muted">방문 기록 없음</span></li>
                    </ul>
                </div>
            </div>

            <!-- 현재 경로 뱃지 -->
            <div class="win-toolbar-path-badge text-truncate">
                <i class="fa-solid fa-folder-open text-warning"></i>
                <span id="currentFolderBreadcrumb" class="fw-semibold text-truncate">전체 이미지</span>
            </div>
        </div>

        <!-- 중앙 정렬 및 뷰 모드 토글 -->
        <div class="d-flex align-items-center gap-2">
			<!-- 정렬 3칸 토글 그룹 -->
			<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="sortBtnDate" onclick="toggleSort('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 view-mode-btn" id="sortBtnName" onclick="toggleSort('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 view-mode-btn" id="sortBtnSize" onclick="toggleSort('size')" title="파일용량 정렬">
					<span>파일용량</span> <i class="fa-solid fa-sort ms-1 sort-icon text-muted"></i>
				</button>
			</div>

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

        <!-- 우측 검색 및 업로드 -->
        <div class="d-flex align-items-center gap-2">
            <div class="input-group input-group-sm" style="width: 220px;">
                <span class="input-group-text bg-white border-end-0 text-muted"><i class="fa-solid fa-magnifying-glass"></i></span>
                <input type="text" id="damSearchKeyword" class="form-control border-start-0" placeholder="검색어 입력..." onkeydown="if(event.key==='Enter') loadImages(1, false);">
            </div>
            <button type="button" class="btn btn-primary btn-sm win-toolbar-btn" onclick="document.getElementById('directFileInput').click()">
                <i class="fa-solid fa-cloud-arrow-up"></i> 업로드
            </button>
            <input type="file" id="directFileInput" class="d-none" multiple accept="image/*">
        </div>
    </div>

    <!-- 2. 본문 3열 워크스페이스 -->
    <div class="win-workspace">
        <!-- 1열: 좌측 계층형 트리 패널 (JS에서 동적 렌더링) -->
        <div class="win-tree-panel">
            <div class="d-flex flex-column gap-1" id="treeRootContainer">
                <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>

        <!-- 2열: 중앙 갤러리 패널 (러버밴드 & 무한 스크롤) -->
        <div class="win-grid-panel" id="winDropZoneContainer">
            <!-- 외부 파일 드롭 오버레이 -->
            <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>
                </div>
            </div>

            <!-- 마키 러버밴드 선택 박스 -->
            <div id="damMarqueeBox"></div>

            <!-- 리스트 뷰 헤더 -->
            <div class="dam-list-header d-none" id="damListHeader">
                <div class="dam-col-header col-name" onclick="toggleSort('name')">이름</div>
                <div class="dam-col-header col-folder">폴더</div>
                <div class="dam-col-header col-date" onclick="toggleSort('date')">날짜</div>
                <div class="dam-col-header col-type">유형</div>
                <div class="dam-col-header col-size text-end" onclick="toggleSort('size')">크기</div>
            </div>

            <!-- 갤러리 컨테이너 -->
            <div id="damImageContainer" class="view-large"></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" id="winResizer"></div>

        <!-- 3열: 우측 인스펙터 패널 -->
        <div class="win-inspector-panel d-flex flex-column h-100" id="winInspectorPanel">
            <!-- 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-circle-info 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">
                <!-- A. 단일 이미지 선택 시: 내부 Flex 컨테이너로 상단 스크롤 + 하단 고정 버튼 분리 -->
                <form id="inspectorForm" onsubmit="event.preventDefault(); saveImageMeta();" class="h-100 d-none flex-column overflow-hidden">
                    <input type="hidden" id="insImageId" name="id">

                    <!-- 상단 스크롤 본문 영역 -->
                    <div class="win-inspector-scroll-area flex-grow-1 overflow-y-auto p-3">
                        <div class="win-inspector-preview-box">
                            <img id="insPreviewImg" src="" alt="미리보기">
                            <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="d-flex flex-wrap 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 class="badge bg-light text-dark border" id="insUsedBadge">-</span>
                        </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>

                        <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>

                        <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>

                        <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">
                        <!-- 삭제 버튼 (위험 작업) -->
                        <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>

                        <!-- 수정 저장 버튼 (주요 작업 - Primary) -->
                        <button type="submit" class="btn btn-primary btn-sm px-3 fw-bold d-inline-flex align-items-center gap-1">
                            <i class="fa-solid fa-floppy-disk"></i> 수정 저장
                        </button>
                    </div>
                </form>

                <!-- B. 다중 선택 안내 영역 (단일 이미지 폼과 독립적으로 동작) -->
                <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-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="deleteMultipleImages()">
                                <i class="fa-solid fa-trash me-1"></i>선택한 이미지 일괄 삭제
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
    </div>

    <!-- 3. 하단 상태바 -->
    <div class="win-statusbar">
        <div class="d-flex align-items-center gap-2">
            <span id="statTotalText">준비 중...</span>
            <span class="badge bg-primary-subtle text-primary border border-primary-subtle d-none" id="statSelectedBadge">0개 선택됨</span>
        </div>
        <div>
            <span class="me-3" id="statSelectedFolder">폴더: 전체 이미지</span>
            <span id="statLastSyncTime">준비 완료</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>
@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