@props([
    'name',
    'label',
    'value' => null,
    'required' => false,
    'help' => null,
    'size' => null,
    'multiple' => false,
    'accept' => 'image/*',
    'maxSize' => 10240, // 10MB in KB
    'dimensions' => null
])

@php
    $fieldId = 'field_' . str_replace(['[', ']', '.'], '_', $name);
    $previewId = 'preview_' . str_replace(['[', ']', '.'], '_', $name);
    $existingId = 'existing_' . str_replace(['[', ']', '.'], '_', $name);
    $stringValue = is_string($value)
        ? $value
        : (is_array($value)
            ? ($value['url'] ?? ($value['path'] ?? (isset($value[0]) && is_string($value[0]) ? $value[0] : '')))
            : '');
    $hasExisting = !empty($stringValue);
    $displaySize = $size ? "({$size})" : '';
    $maxSizeMB = round($maxSize / 1024, 1);
@endphp

<div class="enhanced-image-field" data-field-name="{{ $name }}">
    <label for="{{ $fieldId }}" class="form-label d-flex align-items-center justify-content-between">
        <span>
            {{ $label }}
            @if($required) <span class="text-danger ms-1">*</span> @endif
            @if($displaySize) <small class="text-muted ms-1">{{ $displaySize }}</small> @endif
        </span>
        @if($help)
            <span class="help-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $help }}">
                <i class="fas fa-info-circle text-primary"></i>
            </span>
        @endif
    </label>

    <div class="image-upload-container">
        <!-- Hidden file input -->
        <input
            type="file"
            id="{{ $fieldId }}"
            name="{{ $name }}"
            class="hidden image-file-input"
            accept="{{ $accept }}"
            {{ $multiple ? 'multiple' : '' }}
            {{ $required ? 'required' : '' }}
            data-max-size="{{ $maxSize }}"
            data-dimensions="{{ $dimensions }}"
        >

        <!-- Existing image input -->
        @if($hasExisting)
            <input type="hidden" name="{{ $name }}_existing" value="{{ $stringValue }}" id="{{ $existingId }}">
        @endif

        <!-- Upload Area -->
        <div class="upload-dropzone {{ $hasExisting ? 'has-image' : '' }}" id="dropzone_{{ $fieldId }}">
            <div class="upload-content">
                <!-- Existing Image Preview -->
                @if($hasExisting)
                    <div class="existing-image-preview">
                        <div class="image-container">
                            <img src="{{ asset($stringValue) }}" alt="{{ $label }}" class="preview-image">
                            <div class="image-overlay">
                                <div class="overlay-actions">
                                    <button type="button" class="btn btn-sm btn-light change-image-btn">
                                        <i class="fas fa-camera me-1"></i>{{ trans('translate.Change') }}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger remove-image-btn">
                                        <i class="fas fa-trash me-1"></i>{{ trans('translate.Remove') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="image-info mt-2">
                            <small class="text-muted">{{ trans('translate.Current image') }}</small>
                        </div>
                    </div>
                @endif

                <!-- Upload Prompt -->
                <div class="upload-prompt {{ $hasExisting ? 'hidden' : '' }}">
                    <div class="upload-icon mb-3">
                        <i class="fas fa-cloud-upload-alt text-primary"></i>
                    </div>
                    <h6 class="upload-title">{{ trans('translate.Upload Image') }}</h6>
                    <p class="upload-description text-muted mb-3">
                        {{ trans('translate.Drag and drop an image here, or click to browse') }}
                    </p>
                    <button type="button" class="btn btn-outline-primary browse-btn">
                        <i class="fas fa-folder-open me-2"></i>{{ trans('translate.Browse Files') }}
                    </button>
                    <div class="upload-constraints mt-3">
                        <small class="text-muted">
                            {{ trans('translate.Maximum file size') }}: {{ $maxSizeMB }}MB
                            @if($dimensions)
                                <br>{{ trans('translate.Recommended size') }}: {{ $dimensions }}
                            @endif
                        </small>
                    </div>
                </div>

                <!-- New Image Preview -->
                <div class="new-image-preview hidden">
                    <div class="image-container">
                        <img src="" alt="" class="preview-image">
                        <div class="image-overlay">
                            <div class="overlay-actions">
                                <button type="button" class="btn btn-sm btn-light change-image-btn">
                                    <i class="fas fa-camera me-1"></i>{{ trans('translate.Change') }}
                                </button>
                                <button type="button" class="btn btn-sm btn-danger remove-new-image-btn">
                                    <i class="fas fa-trash me-1"></i>{{ trans('translate.Remove') }}
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="image-info mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <small class="text-muted file-name"></small>
                            <small class="text-muted file-size"></small>
                        </div>
                        <div class="upload-progress mt-2">
                            <div class="progress" style="height: 4px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Upload Progress -->
                <div class="upload-progress-container hidden">
                    <div class="text-center mb-3">
                        <i class="fas fa-spinner fa-spin text-primary fa-2x"></i>
                    </div>
                    <h6 class="text-center">{{ trans('translate.Uploading...') }}</h6>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar" style="width: 0%"></div>
                    </div>
                    <small class="text-center d-block mt-2 upload-status">{{ trans('translate.Preparing upload...') }}</small>
                </div>
            </div>
        </div>

        <!-- Error Messages -->
        <div class="image-errors mt-2 hidden">
            <div class="alert alert-danger mb-0">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <span class="error-message"></span>
            </div>
        </div>

        <!-- Validation Feedback -->
        @error($name)
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>
</div>

<style>
    .enhanced-image-field {
        margin-bottom: 1rem;
    }

    .upload-dropzone {
        border: 2px dashed var(--tg-border-1);
        border-radius: 12px;
        padding: 2rem;
        text-align: center;
        background: var(--tg-bg-1);
        transition: all 0.3s ease;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }

    .upload-dropzone:hover {
        border-color: var(--tg-primary);
        background: rgba(var(--tg-primary-rgb), 0.05);
    }

    .upload-dropzone.dragover {
        border-color: var(--tg-primary);
        background: rgba(var(--tg-primary-rgb), 0.1);
        transform: scale(1.02);
    }

    .upload-dropzone.has-image {
        padding: 1rem;
        min-height: auto;
    }

    .upload-icon i {
        font-size: 3rem;
        opacity: 0.6;
    }

    .upload-title {
        color: var(--tg-heading-color);
        margin-bottom: 0.5rem;
    }

    .upload-description {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .browse-btn {
        border-radius: 8px;
        font-weight: 500;
        padding: 0.5rem 1.5rem;
    }

    .upload-constraints {
        border-top: 1px solid var(--tg-border-1);
        padding-top: 1rem;
    }

    .image-container {
        position: relative;
        display: inline-block;
        border-radius: 8px;
        overflow: hidden;
        max-width: 100%;
    }

    .preview-image {
        max-width: 200px;
        max-height: 150px;
        width: auto;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 8px;
    }

    .image-container:hover .image-overlay {
        opacity: 1;
    }

    .overlay-actions {
        display: flex;
        gap: 0.5rem;
    }

    .overlay-actions .btn {
        border-radius: 6px;
        font-size: 0.8rem;
        padding: 0.25rem 0.75rem;
    }

    .upload-progress {
        background: var(--tg-bg-1);
        border-radius: 4px;
        overflow: hidden;
        height: 4px;
    }

    .upload-progress-container {
        text-align: center;
    }

    .image-errors .alert {
        border-radius: 8px;
        font-size: 0.9rem;
    }

    .help-icon {
        cursor: help;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .upload-dropzone {
            padding: 1.5rem 1rem;
        }

        .upload-icon i {
            font-size: 2rem;
        }

        .preview-image {
            max-width: 150px;
            max-height: 120px;
        }

        .overlay-actions {
            flex-direction: column;
            gap: 0.25rem;
        }

        .overlay-actions .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
        }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .upload-dropzone {
            background: var(--tg-dark-bg);
            border-color: var(--tg-dark-border);
        }

        .upload-dropzone:hover {
            background: rgba(var(--tg-primary-rgb), 0.1);
        }

        .upload-constraints {
            border-color: var(--tg-dark-border);
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.querySelector('[data-field-name="{{ $name }}"]');
        if (!container) return;

        const fileInput = container.querySelector('.image-file-input');
        const dropzone = container.querySelector('.upload-dropzone');
        const browseBtn = container.querySelector('.browse-btn');
        const changeImageBtns = container.querySelectorAll('.change-image-btn');
        const removeImageBtn = container.querySelector('.remove-image-btn');
        const removeNewImageBtn = container.querySelector('.remove-new-image-btn');
        const uploadPrompt = container.querySelector('.upload-prompt');
        const existingPreview = container.querySelector('.existing-image-preview');
        const newImagePreview = container.querySelector('.new-image-preview');
        const uploadProgressContainer = container.querySelector('.upload-progress-container');
        const imageErrors = container.querySelector('.image-errors');
        const existingInput = container.querySelector('input[name="{{ $name }}_existing"]');

        // File input change handler
        fileInput.addEventListener('change', function(e) {
            handleFileSelect(e.target.files);
        });

        // Browse button click
        browseBtn?.addEventListener('click', function(e) {
            e.stopPropagation();
            fileInput.click();
        });

        // Change image buttons
        changeImageBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                fileInput.click();
            });
        });

        // Remove existing image
        removeImageBtn?.addEventListener('click', function(e) {
            e.stopPropagation();
            Swal.fire({
                title: '{{ trans("translate.Remove Image?") }}',
                text: '{{ trans("translate.This will remove the current image") }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: '{{ trans("translate.Yes, remove it") }}',
                cancelButtonText: '{{ trans("translate.Cancel") }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    removeExistingImage();
                }
            });
        });

        // Remove new image
        removeNewImageBtn?.addEventListener('click', function(e) {
            e.stopPropagation();
            removeNewImage();
        });

        // Drag and drop handlers
        dropzone.addEventListener('dragover', function(e) {
            e.preventDefault();
            dropzone.classList.add('dragover');
        });

        dropzone.addEventListener('dragleave', function(e) {
            e.preventDefault();
            if (!dropzone.contains(e.relatedTarget)) {
                dropzone.classList.remove('dragover');
            }
        });

        dropzone.addEventListener('drop', function(e) {
            e.preventDefault();
            dropzone.classList.remove('dragover');
            handleFileSelect(e.dataTransfer.files);
        });

        // Click to upload (only if no existing image or in prompt area)
        dropzone.addEventListener('click', function(e) {
            const isBrowseBtn = e.target.closest && e.target.closest('.browse-btn');
            if (isBrowseBtn) return;
            if (e.target === dropzone || (uploadPrompt?.contains(e.target) && !isBrowseBtn)) {
                fileInput.click();
            }
        });

        // Handle file selection
        function handleFileSelect(files) {
            if (!files || files.length === 0) return;

            const file = files[0];

            // Validate file
            const validation = validateFile(file);
            if (!validation.valid) {
                showError(validation.message);
                return;
            }

            hideError();
            showNewImagePreview(file);
        }

        // Validate file
        function validateFile(file) {
            const maxSize = parseInt(fileInput.dataset.maxSize) * 1024; // Convert KB to bytes
            const dimensions = fileInput.dataset.dimensions;

            // Check file type
            if (!file.type.startsWith('image/')) {
                return {
                    valid: false,
                    message: '{{ trans("translate.Please select a valid image file") }}'
                };
            }

            // Check file size
            if (file.size > maxSize) {
                const maxSizeMB = Math.round(maxSize / (1024 * 1024) * 10) / 10;
                return {
                    valid: false,
                    message: `{{ trans("translate.File size exceeds maximum allowed size of") }} ${maxSizeMB}MB`
                };
            }

            return { valid: true };
        }

        // Show new image preview
        function showNewImagePreview(file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                const img = newImagePreview.querySelector('.preview-image');
                const fileName = newImagePreview.querySelector('.file-name');
                const fileSize = newImagePreview.querySelector('.file-size');

                img.src = e.target.result;
                img.alt = file.name;
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);

                // Hide other elements and show new preview
                uploadPrompt?.classList.add('hidden');
                existingPreview?.classList.add('hidden');
                newImagePreview.classList.remove('hidden');
                dropzone.classList.add('has-image');

                // Clear existing input value
                if (existingInput) {
                    existingInput.value = '';
                }

                // Simulate upload progress
                simulateUploadProgress();
            };

            reader.readAsDataURL(file);
        }

        // Remove existing image
        function removeExistingImage() {
            if (existingInput) {
                existingInput.value = '';
            }

            existingPreview?.classList.add('hidden');
            uploadPrompt?.classList.remove('hidden');
            dropzone.classList.remove('has-image');

            // Clear file input
            fileInput.value = '';

            // Trigger change event
            fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        }

        // Remove new image
        function removeNewImage() {
            newImagePreview.classList.add('hidden');

            if (existingPreview && !existingPreview.classList.contains('hidden')) {
                // Show existing image if available
                dropzone.classList.add('has-image');
                if (existingInput) {
                    existingInput.value = '{{ $stringValue }}';
                }
            } else {
                // Show upload prompt
                uploadPrompt?.classList.remove('hidden');
                dropzone.classList.remove('has-image');
            }

            // Clear file input
            fileInput.value = '';

            // Trigger change event
            fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        }

        // Simulate upload progress
        function simulateUploadProgress() {
            const progressBar = newImagePreview.querySelector('.progress-bar');
            let progress = 0;

            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 100) {
                    progress = 100;
                    clearInterval(interval);
                }

                progressBar.style.width = progress + '%';

                if (progress === 100) {
                    setTimeout(() => {
                        progressBar.parentElement.style.display = 'none';
                    }, 500);
                }
            }, 100);
        }

        // Show error
        function showError(message) {
            imageErrors.querySelector('.error-message').textContent = message;
            imageErrors.classList.remove('hidden');

            // Auto hide after 5 seconds
            setTimeout(() => {
                hideError();
            }, 5000);
        }

        // Hide error
        function hideError() {
            imageErrors.classList.add('hidden');
        }

        // Format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';

            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));

            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
        }
    });
</script>