@props([
    'name',                         // 필수: 슬롯 키 / 선택자 (예: logo, banner, og_image, thumbnail)
    'label' => '이미지',             // 라벨 텍스트
    'model' => null,                // Eloquent 모델 인스턴스 (수정 시: $shop, $program 등)
    'width' => 60,                  // 미리보기 가로 크기(px)
    'height' => 60,                 // 미리보기 세로 크기(px)
    'ratioText' => '권장 비율: 1:1', // 가이드 텍스트
    'required' => false
])

@php
    $slotKey = $name;
    $inputId = "{$slotKey}_image_id";
    $previewId = "{$slotKey}-preview";
    $removeBtnId = "btn-remove-{$slotKey}";

    // 🌟 본사 관리자 전용 라우트 고정 주입
    $adminUploadRoute = '/admin/images';
    $adminIndexRoute  = '/admin/images/list';
    $adminFolderRoute = '/admin/image-folders';

    // M:N 다형성 피벗 이미지 객체 우선 확보
    $slotImage = ($model && method_exists($model, 'getSlotImage')) 
        ? $model->getSlotImage($slotKey) 
        : null;

    // 히든 인풋 전송용 이미지 ID 추출
    $currentImageId = old($inputId);
    if ($currentImageId === null && $model) {
        if ($slotImage) {
            $currentImageId = $slotImage->id;
        } else {
            $legacyColumn = "{$slotKey}_path";
            if (!empty($model->{$legacyColumn})) {
                $legacyImg = \App\Models\Image::where('path', $model->{$legacyColumn})->first();
                $currentImageId = $legacyImg?->id;
            }
        }
    }

    // 미리보기 이미지 URL 추출
    $previewUrl = null;
    if ($slotImage) {
        $previewUrl = $slotImage->thumb_url ?: asset('storage/' . $slotImage->path);
    } elseif ($model) {
        $legacyColumn = "{$slotKey}_path";
        if (!empty($model->{$legacyColumn})) {
            $previewUrl = asset('storage/' . $model->{$legacyColumn});
        }
    }
@endphp

<div class="single-image-slot mb-3" style="--slot-w: {{ $width }}; --slot-h: {{ $height }};">
    @if($label)
        <label class="form-label fw-semibold small text-dark mb-1 d-block">
            {{ $label }}
            @if($required) <span class="text-danger">*</span> @endif
        </label>
    @endif
    
    <div class="slot-container">
        <!-- 1. 반응형 미리보기 박스 (외곽 보더 제거, 가로/세로 정중앙 정렬) -->
        <div id="{{ $previewId }}" class="slot-preview-box">
            @if($previewUrl)
                <img src="{{ $previewUrl }}" alt="{{ $label }}" class="slot-preview-img">
            @else
                <span class="slot-empty-text">미리보기</span>
            @endif
        </div>

        <!-- 2. 백엔드 전송용 히든 인풋 -->
        <input type="hidden" name="{{ $inputId }}" id="{{ $inputId }}" value="{{ $currentImageId }}">

        <!-- 3. 공통 액션 버튼 그룹 (PC: 가변 / 모바일: 60% 너비 고정) -->
        <div class="slot-action-box">
            <div class="slot-btn-group">
                <!-- 🌟 본사 라우트 인자를 명시적으로 전달하여 JS 기본값 오작동 완전 방지 -->
                <button type="button" 
                        class="btn btn-outline-primary btn-slot-select shadow-sm" 
                        onclick="openImageModal('{{ $slotKey }}', 'single', null, '{{ $adminUploadRoute }}', '{{ $adminIndexRoute }}', '{{ $adminFolderRoute }}')">
                    <i class="fa-solid fa-image me-1"></i> 선택/변경
                </button>
                <button type="button" 
						class="btn btn-outline-danger btn-sm btn-slot-remove shadow-sm d-inline-flex align-items-center justify-content-center p-0" 
						id="{{ $removeBtnId }}" 
						onclick="clearSingleImage('{{ $slotKey }}')" 
						style="{{ empty($previewUrl) && empty($currentImageId) ? 'display: none !important;' : '' }}" 
						title="이미지 삭제">
					<i class="fa-solid fa-trash-can text-xs"></i>
				</button>
            </div>

            @if($ratioText)
                <div class="slot-ratio-text text-truncate" title="{{ $ratioText }}">
                    <i class="fa-solid fa-circle-info me-1"></i>{{ $ratioText }}
                </div>
            @endif
        </div>
    </div>
</div>

{{-- 1. 본사 전용 이미지 모달 (본사 멀티 슬롯과 동일한 'admin-image-modal' 키 사용 -> 1회만 주입) --}}
@pushOnce('modals', 'admin-image-modal')
    <x-admin.modal-image 
        upload-route="/admin/images"
        index-route="/admin/images/list"
        folder-route="/admin/image-folders"
    />
@endpushOnce

{{-- 2. 이미지 라이브러리 전용 CSS 1회 주입 (싱글/멀티 슬롯 공용 키) --}}
@pushOnce('styles', 'admin-image-library-css')
<link rel="stylesheet" href="{{ asset('css/admin/image_library.css') }}?v={{ time() }}">
@endpushOnce

{{-- 3. 이미지 라이브러리 엔진 스크립트 (페이지 전체에서 1회만 로드) --}}
@pushOnce('scripts', 'admin-image-library-js')
<script src="{{ asset('js/image_lightbox.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library_folder.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library_renderer.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/image_library.js') }}?v={{ time() }}"></script>
@endpushOnce