@props([
    'name',
    'label' => '이미지',
    'model' => null,
    'width' => 60,
    'height' => 60,
    'ratioText' => '권장 비율: 1:1',
    'required' => false
])

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

    // 🌟 뷰티샵 전용 라우트 고정 주입
    $shopUploadRoute = '/shop-admin/images';
    $shopIndexRoute  = '/shop-admin/images/list';
    $shopFolderRoute = '/shop-admin/image-folders';

    // M:N 피벗 이미지 객체 추출
    $slotImage = ($model && method_exists($model, 'getSlotImage')) 
        ? $model->getSlotImage($slotKey) 
        : null;

    $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;
            }
        }
    }

    $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">
        <!-- 미리보기 박스 -->
        <div id="{{ $previewId }}" class="slot-preview-box">
            @if($previewUrl)
                <img src="{{ $previewUrl }}" alt="{{ $label }}" class="slot-preview-img">
            @else
                <span class="text-muted slot-empty-text" style="font-size: 0.72rem;">미리보기</span>
            @endif
        </div>

        <!-- 히든 인풋 -->
        <input type="hidden" name="{{ $inputId }}" id="{{ $inputId }}" value="{{ $currentImageId }}">

        <!-- 조작 버튼 그룹 -->
        <div class="slot-action-box">
            <div class="slot-btn-group">
                <button type="button" 
                        class="btn btn-outline-primary btn-sm fw-bold btn-slot-select shadow-sm" 
                        onclick="openImageModal('{{ $slotKey }}', 'single', null, '{{ $shopUploadRoute }}', '{{ $shopIndexRoute }}', '{{ $shopFolderRoute }}')">
                    <i class="fa-solid fa-cloud-arrow-up 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="text-muted slot-ratio-text text-truncate" title="{{ $ratioText }}">
                    <i class="fa-solid fa-circle-info me-1"></i>{{ $ratioText }}
                </div>
            @endif
        </div>
    </div>
</div>

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

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

{{-- 3. 이미지 라이브러리 코어 JS (멀티 슬롯과 동일 키 'shop-image-library-js': 1회만 주입) --}}
@pushOnce('scripts', 'shop-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