@props([
    'name',
    'label',
    'value' => null,
    'required' => false,
    'help' => null,
    'accept' => '*/*',
    'maxSize' => 10240, // KB
])

@php
    $safeValue = is_string($value) ? $value : (is_array($value) ? (isset($value[0]) && is_string($value[0]) ? $value[0] : '') : (string)($value ?? ''));
    $fileUrl = !empty($safeValue) ? asset($safeValue) : null;
    $fileName = !empty($safeValue) ? basename($safeValue) : null;
@endphp

<div class="form-group input-with-label">
    <label for="{{ $name }}" class="form-label fw-semibold">
        {{ $label }}
        @if($required)
            <span class="text-danger ms-1">*</span>
        @endif
        @if($help)
            <i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $help }}"></i>
        @endif
    </label>

    <div class="file-upload-wrapper">
        <input
            type="file"
            id="{{ $name }}"
            name="{{ $name }}"
            class="form-control file-input @error($name) is-invalid @enderror"
            accept="{{ $accept }}"
            {{ $required ? 'required' : '' }}
            data-max-size="{{ $maxSize }}"
        >

        {{-- Current File Display --}}
        @if($fileUrl)
            <div class="current-file mt-2">
                <div class="file-preview d-flex align-items-center p-3 bg-light rounded">
                    <div class="file-icon me-2">
                        @php
                            $extension = pathinfo($safeValue, PATHINFO_EXTENSION);
                            $isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']);
                            $isVideo = in_array(strtolower($extension), ['mp4', 'avi', 'mov', 'wmv', 'flv']);
                            $isPdf = strtolower($extension) === 'pdf';
                        @endphp

                        @if($isImage)
                            <img src="{{ $fileUrl }}" alt="Preview" class="img-thumbnail" style="max-width: 50px; max-height: 50px;">
                        @elseif($isVideo)
                            <i class="fas fa-video text-primary" style="font-size: 30px;"></i>
                        @elseif($isPdf)
                            <i class="fas fa-file-pdf text-danger" style="font-size: 30px;"></i>
                        @else
                            <i class="fas fa-file text-secondary" style="font-size: 30px;"></i>
                        @endif
                    </div>
                    <div class="file-details flex-grow-1">
                        <div class="file-name fw-semibold">{{ $fileName }}</div>
                        <div class="file-size text-muted small">
                            @if(file_exists(public_path($safeValue)))
                                {{ number_format(filesize(public_path($safeValue)) / 1024, 2) }} KB
                            @endif
                        </div>
                    </div>
                    <div class="file-actions">
                        <a href="{{ $fileUrl }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">
                            <i class="fas fa-eye"></i> View
                        </a>
                        <button type="button" class="btn btn-sm btn-outline-danger remove-file" data-field="{{ $name }}">
                            <i class="fas fa-trash"></i> Remove
                        </button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Upload Progress Bar --}}
        <div class="upload-progress mt-2" style="display: none;">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-text text-center mt-1">Uploading...</div>
        </div>
    </div>

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

    @if($help && !$errors->has($name))
        <div class="form-text text-muted">
            {{ $help }}
            @if($maxSize)
                <br><small>Max file size: {{ number_format($maxSize / 1024, 2) }} MB</small>
            @endif
        </div>
    @endif

    {{-- Hidden input for removal --}}
    <input type="hidden" name="{{ $name }}_remove" id="{{ $name }}_remove" value="0">
</div>

<style>
.file-upload-wrapper .file-input {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.file-upload-wrapper .file-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.file-preview {
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.file-preview:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.current-file {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.upload-progress .progress {
    height: 6px;
    background-color: #f8f9fa;
}

.upload-progress .progress-bar {
    background: linear-gradient(90deg, #007bff 0%, #28a745 100%);
    transition: width 0.3s ease;
}

.form-control.file-input.is-invalid {
    border-color: var(--bs-danger);
}

.form-control.file-input.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInputs = document.querySelectorAll('.file-input');

    fileInputs.forEach(input => {
        const wrapper = input.closest('.file-upload-wrapper');
        const progressWrapper = wrapper.querySelector('.upload-progress');
        const progressBar = progressWrapper?.querySelector('.progress-bar');
        const progressText = progressWrapper?.querySelector('.progress-text');
        const maxSize = parseInt(input.dataset.maxSize) || 10240; // KB

        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            // Validate file size
            const fileSizeKB = file.size / 1024;
            if (fileSizeKB > maxSize) {
                alert(`File size exceeds maximum allowed size of ${(maxSize/1024).toFixed(2)} MB`);
                input.value = '';
                return;
            }

            // Show progress (simulate upload progress for demo)
            if (progressWrapper) {
                progressWrapper.style.display = 'block';
                simulateUpload(progressBar, progressText);
            }
        });
    });

    // Remove file functionality
    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-file')) {
            const btn = e.target.closest('.remove-file');
            const fieldName = btn.dataset.field;
            const currentFile = btn.closest('.current-file');
            const removeInput = document.getElementById(fieldName + '_remove');

            if (confirm('Are you sure you want to remove this file?')) {
                if (currentFile) {
                    currentFile.style.animation = 'fadeOut 0.3s ease-out';
                    setTimeout(() => {
                        currentFile.style.display = 'none';
                    }, 300);
                }
                if (removeInput) {
                    removeInput.value = '1';
                }
            }
        }
    });

    function simulateUpload(progressBar, progressText) {
        let progress = 0;
        const interval = setInterval(() => {
            progress += Math.random() * 15;
            if (progress > 100) progress = 100;

            progressBar.style.width = progress + '%';
            progressBar.setAttribute('aria-valuenow', progress);

            if (progress >= 100) {
                progressText.textContent = 'Upload complete!';
                setTimeout(() => {
                    progressBar.closest('.upload-progress').style.display = 'none';
                    progressText.textContent = 'Uploading...';
                    progressBar.style.width = '0%';
                }, 1500);
                clearInterval(interval);
            }
        }, 200);
    }
});

// Add CSS animation for fade out
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeOut {
        from { opacity: 1; transform: translateY(0); }
        to { opacity: 0; transform: translateY(-10px); }
    }
`;
document.head.appendChild(style);
</script>
@endpush