@php
    $imageField = $imageField ?? 'cover_image';
    $imageUrl = $imageUrl ?? null;
    $imageId = $imageId ?? 'cover-image';
@endphp

<!-- 封面图片上传组件 -->
<div class="cover-image-uploader" id="{{ $imageId }}">
    <label class="cover-label">封面图片 <span class="optional-text">（可选）</span></label>
    
    <!-- 图片预览区 -->
    <div class="cover-preview-area">
        @if($imageUrl)
            <img src="{{ $imageUrl }}" alt="封面预览" class="cover-preview-img" id="{{ $imageId }}-preview">
        @else
            <div class="cover-placeholder" id="{{ $imageId }}-placeholder">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
                <p>暂无封面图片</p>
            </div>
        @endif
    </div>
    
    <!-- 上传按钮组 -->
    <div class="cover-actions">
        <button type="button" class="btn btn-upload" onclick="document.getElementById('{{ $imageId }}-file').click()">
            <span>📷</span> 上传图片
        </button>
        @if($imageUrl)
            <button type="button" class="btn btn-remove" onclick="removeCoverImage('{{ $imageId }}')">
                <span>🗑️</span> 移除图片
            </button>
        @endif
    </div>
    
    <!-- 隐藏的文件输入框 -->
    <input type="file" 
           id="{{ $imageId }}-file" 
           accept="image/jpeg,image/png,image/jpg,image/gif,image/webp"
           onchange="uploadCoverImage(event, '{{ $imageId }}')"
           style="display: none;">
    
    <!-- 隐藏的URL输入框，用于存储图片URL -->
    <input type="hidden" id="{{ $imageId }}" name="{{ $imageField }}" value="{{ $imageUrl ?? '' }}">
    
    <!-- URL输入框（可选） -->
    <div class="url-input-group">
        <label>或直接输入图片URL：</label>
        <input type="text" 
               id="{{ $imageId }}-url" 
               placeholder="https://example.com/image.jpg" 
               value="{{ $imageUrl ?? '' }}"
               onchange="updateCoverUrl('{{ $imageId }}', this.value)"
               onkeyup="updateCoverUrl('{{ $imageId }}', this.value)">
    </div>
</div>

<style>
    .cover-image-uploader {
        margin-bottom: 1.5rem;
    }
    
    .cover-label {
        display: block;
        margin-bottom: 0.75rem;
        font-weight: 600;
        color: #374151;
    }
    
    .optional-text {
        font-weight: normal;
        color: #9ca3af;
    }
    
    .cover-preview-area {
        width: 100%;
        height: 240px;
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #f9fafb;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
    }
    
    .cover-preview-area:hover {
        border-color: #667eea;
        background: #f0f4ff;
    }
    
    .cover-preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .cover-placeholder {
        text-align: center;
        color: #9ca3af;
    }
    
    .cover-placeholder svg {
        margin-bottom: 0.5rem;
        opacity: 0.5;
    }
    
    .cover-placeholder p {
        margin: 0;
        font-size: 0.95rem;
    }
    
    .cover-actions {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-upload {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .btn-upload:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    
    .btn-remove {
        background: #fee2e2;
        color: #991b1b;
    }
    
    .btn-remove:hover {
        background: #fecaca;
    }
    
    .url-input-group {
        background: #f9fafb;
        padding: 1rem;
        border-radius: 8px;
    }
    
    .url-input-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
        color: #6b7280;
    }
    
    .url-input-group input {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.9rem;
        transition: border-color 0.3s ease;
    }
    
    .url-input-group input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
</style>

<script>
    // 上传封面图片
    function uploadCoverImage(event, imageId) {
        const file = event.target.files[0];
        if (!file) return;
        
        // 验证文件类型
        const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];
        if (!validTypes.includes(file.type)) {
            alert('请选择有效的图片文件 (JPEG, PNG, GIF, WebP)');
            return;
        }
        
        // 验证文件大小 (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('图片大小不能超过 5MB');
            return;
        }
        
        // 创建 FormData
        const formData = new FormData();
        formData.append('file', file);
        
        // 上传前显示加载状态
        const uploadBtn = document.querySelector(`button[onclick*="${imageId}-file"]`);
        const originalText = uploadBtn.innerHTML;
        uploadBtn.innerHTML = '<span class="spinner"></span> 上传中...';
        uploadBtn.disabled = true;
        
        fetch('{{ route("admin.upload") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新隐藏输入框的值
                document.getElementById(imageId).value = data.url;
                
                // 更新预览
                const placeholder = document.getElementById(`${imageId}-placeholder`);
                const previewImg = document.getElementById(`${imageId}-preview`);
                const urlInput = document.getElementById(`${imageId}-url`);
                
                // 隐藏占位符
                if (placeholder) placeholder.style.display = 'none';
                
                // 创建或更新预览图片
                if (previewImg) {
                    previewImg.src = data.url;
                    previewImg.style.display = 'block';
                }
                
                // 更新URL输入框
                if (urlInput) {
                    urlInput.value = data.url;
                }
                
                // 显示移除按钮
                const removeBtn = document.querySelector(`button[onclick="removeCoverImage('${imageId}')"]`);
                if (removeBtn) {
                    removeBtn.style.display = 'flex';
                }
                
                alert('图片上传成功！');
            } else {
                alert('上传失败：' + (data.message || '未知错误'));
            }
        })
        .catch(error => {
            console.error('Upload error:', error);
            alert('上传失败，请重试');
        })
        .finally(() => {
            // 恢复按钮状态
            uploadBtn.innerHTML = originalText;
            uploadBtn.disabled = false;
            // 清空文件输入框
            event.target.value = '';
        });
    }
    
    // 移除封面图片
    function removeCoverImage(imageId) {
        if (!confirm('确定要移除封面图片吗？')) return;
        
        // 清空隐藏输入框
        document.getElementById(imageId).value = '';
        
        // 显示占位符
        const placeholder = document.getElementById(`${imageId}-placeholder`);
        if (placeholder) placeholder.style.display = 'block';
        
        // 隐藏预览图片
        const previewImg = document.getElementById(`${imageId}-preview`);
        if (previewImg) {
            previewImg.src = '';
            previewImg.style.display = 'none';
        }
        
        // 清空URL输入框
        const urlInput = document.getElementById(`${imageId}-url`);
        if (urlInput) {
            urlInput.value = '';
        }
        
        // 隐藏移除按钮
        const removeBtn = document.querySelector(`button[onclick="removeCoverImage('${imageId}')"]`);
        if (removeBtn) {
            removeBtn.style.display = 'none';
        }
    }
    
    // 通过URL更新封面
    function updateCoverUrl(imageId, url) {
        // 更新隐藏输入框
        document.getElementById(imageId).value = url;
        
        const placeholder = document.getElementById(`${imageId}-placeholder`);
        const previewImg = document.getElementById(`${imageId}-preview`);
        const removeBtn = document.querySelector(`button[onclick="removeCoverImage('${imageId}')"]`);
        
        if (url) {
            // 隐藏占位符
            if (placeholder) placeholder.style.display = 'none';
            
            // 显示预览
            if (previewImg) {
                previewImg.src = url;
                previewImg.style.display = 'block';
                previewImg.onerror = function() {
                    alert('无法加载图片，请检查URL是否正确');
                    this.style.display = 'none';
                    if (placeholder) placeholder.style.display = 'block';
                };
            }
            
            // 显示移除按钮
            if (removeBtn) removeBtn.style.display = 'flex';
        } else {
            // 清空状态
            if (placeholder) placeholder.style.display = 'block';
            if (previewImg) {
                previewImg.src = '';
                previewImg.style.display = 'none';
            }
            if (removeBtn) removeBtn.style.display = 'none';
        }
    }
    
    // 添加加载动画样式
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
    `;
    document.head.appendChild(style);
</script>