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

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

    // 1. 이미지 ID 추출 (old() 우선 -> 모델 가상 속성 get{Key}ImageIdAttribute 순)
    $currentImageId = old($inputId);
    if ($currentImageId === null && $model) {
        $method = \Illuminate\Support\Str::camel("{$slotKey}_image_id");
        $currentImageId = $model->{$method} ?? null;
    }

    // 2. 미리보기 이미지 URL 추출 (M:N 다형성 피벗 우선 -> 구버전 레거시 경로 Fallback)
    $previewUrl = null;
    if ($model) {
        $slotImage = method_exists($model, 'getSlotImage') ? $model->getSlotImage($slotKey) : null;
        if ($slotImage) {
            $previewUrl = $slotImage->thumb_url ?: asset('storage/' . $slotImage->path);
        } else {
            $legacyColumn = "{$slotKey}_path";
            if (!empty($model->{$legacyColumn})) {
                $previewUrl = asset('storage/' . $model->{$legacyColumn});
            }
        }
    }
@endphp

<div>
    <label class="form-label fw-semibold small text-dark mb-1">{{ $label }}</label>
    <div class="d-flex align-items-center gap-3">
        <!-- 1. 미리보기 박스 -->
        <div id="{{ $previewId }}" 
             class="border rounded bg-light d-flex align-items-center justify-content-center overflow-hidden flex-shrink-0 shadow-sm" 
             style="width: {{ $width }}px; height: {{ $height }}px;">
            @if($previewUrl)
                <img src="{{ $previewUrl }}" alt="{{ $label }}" style="max-width: 110%; max-height: 110%; object-fit: contain; display: block;">
            @else
                <span class="text-muted" style="font-size: 0.7rem;">미리보기</span>
            @endif
        </div>

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

        <!-- 3. 모달 호출 및 제거 버튼 -->
        <div>
            <div class="d-flex align-items-center gap-1 mb-1">
                <button type="button" class="btn btn-outline-dark btn-sm fw-bold px-2 py-1" onclick="openMediaModal('{{ $slotKey }}', 'single')">
                    <i class="fa-solid fa-image me-1"></i> 선택/변경
                </button>
                <button type="button" 
                        class="btn btn-outline-danger btn-sm p-1" 
                        id="{{ $removeBtnId }}" 
                        onclick="clearSingleImage('{{ $slotKey }}')" 
                        style="{{ empty($previewUrl) && empty($currentImageId) ? 'display: none;' : '' }}" 
                        title="이미지 삭제">
                    <i class="fa-solid fa-trash-can" style="font-size: 0.75rem;"></i>
                </button>
            </div>
            @if($ratioText)
                <div class="text-muted" style="font-size: 0.7rem;">{{ $ratioText }}</div>
            @endif
        </div>
    </div>
</div>