@props([
    'name',
    'id' => null,
    'label' => null,
    'required' => false,
    'disabled' => false,
    'errorMassage' => null,
    'accept' => null, // e.g. "image/*", ".pdf,.jpg,.png"
    'existingFile' => null, // ['url' => '#', 'filename' => 'file.pdf']
    'icon' => null, // icon classes for existing file, e.g. "fa-regular fa-id-card"
    'variant' => 'card', // 'card' (horizontal) or 'box' (vertical)
    'uploadKey' => null, // when set (e.g. Livewire register), remove button calls wire:click="removeUpload(key)"
    'hasUploadedFile' => false, // จาก Livewire เมื่ออัปโหลดสำเร็จแล้ว
    'uploadedFileName' => '', // ชื่อไฟล์สำหรับแสดงเมื่อ hasUploadedFile = true
])

@php
    $id = $id ?? $name;
    $fieldId = str_replace(['[', ']'], ['_', ''], $id); // Convert array notation to safe ID
    $isRequired = filter_var($required, FILTER_VALIDATE_BOOLEAN) || $attributes->has('required');
    $hasExistingFile = !empty($existingFile) && isset($existingFile['url']) && isset($existingFile['filename']);
    $isBoxVariant = $variant === 'box';
    $showSuccessState = $isBoxVariant && filter_var($hasUploadedFile, FILTER_VALIDATE_BOOLEAN);

    // Default icon based on file type if not provided
    if (empty($icon) && $hasExistingFile) {
        $filename = $existingFile['filename'] ?? '';
        if (preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $filename)) {
            $icon = 'fa-regular fa-image';
        } elseif (preg_match('/\.pdf$/i', $filename)) {
            $icon = 'fa-solid fa-file-pdf';
        } else {
            $icon = 'fa-solid fa-file';
        }
    }

    // Default icon for box variant if not provided
    if ($isBoxVariant && empty($icon)) {
        $icon = 'fa-solid fa-cloud-arrow-up';
    }
@endphp

@php
    $truncatedFileName = $uploadedFileName;
    if (strlen($truncatedFileName) > 30) {
        $ext = substr($truncatedFileName, strrpos($truncatedFileName, '.'));
        $truncatedFileName = substr($truncatedFileName, 0, 30 - strlen($ext) - 3) . '...' . $ext;
    }
@endphp
@if ($isBoxVariant)
    <!-- Box Variant (Vertical) -->
    <div class="upload-item">
        @if ($label)
            <x-frontend::forms.label class="{{ $isRequired ? 'required-field' : '' }}" :for="$fieldId" :required="$isRequired">
                {{ $label }}
            </x-frontend::forms.label>
        @endif
        <div class="upload-box relative h-32 rounded-lg flex flex-col items-center justify-center cursor-pointer group {{ $showSuccessState ? 'border-med-primary bg-green-50 border-2' : 'bg-white' }}" data-default-icon="{{ $icon ?? 'fa-solid fa-cloud-arrow-up' }}">
            <input class="absolute inset-0 w-full h-full opacity-0 {{ $showSuccessState ? 'pointer-events-none' : 'cursor-pointer' }}" id="{{ $fieldId }}" data-validate="file" type="file" @if (!$uploadKey) name="{{ $name }}" @endif @if ($accept) accept="{{ $accept }}" @endif @if ($isRequired) required @endif @if ($disabled) disabled @endif {{ $attributes }} />
            <button class="file-remove-btn absolute top-2 right-2 z-10 w-6 h-6 rounded-full bg-red-500 hover:bg-red-600 text-white flex items-center justify-center transition-all {{ $showSuccessState ? '' : 'hidden opacity-0 pointer-events-none' }}" type="button" @if ($uploadKey) onclick="window.resetUploadBox && window.resetUploadBox(this.closest('.upload-box'))" wire:click.prevent="removeUpload('{{ $uploadKey }}')" @else onclick="window.fileUploadRemove(this, event)" @endif>
                <i class="fa-solid fa-times text-xs"></i>
            </button>
            @if ($showSuccessState)
                <i class="fa-solid fa-check-circle text-3xl text-med-primary mb-2 transition-colors"></i>
                <span class="text-sm text-med-primary font-medium px-2 text-center break-words line-clamp-2" title="{{ $uploadedFileName }}">{{ $truncatedFileName ?: ($uploadedFileName ?: 'Uploaded') }}</span>
            @else
                <i class="{{ $icon ?? 'fa-solid fa-cloud-arrow-up' }} text-3xl text-gray-300 group-hover:text-med-primary mb-2 transition-colors" id="icon_{{ $fieldId }}" data-original-class="{{ $icon ?? 'fa-solid fa-cloud-arrow-up' }} text-3xl text-gray-300 group-hover:text-med-primary mb-2 transition-colors"></i>
                <span class="text-sm text-gray-500 group-hover:text-med-primary px-2 text-center break-words line-clamp-2" id="text_{{ $fieldId }}">Click to upload</span>
            @endif
        </div>

        <x-frontend::forms.error :name="$name" :message="$errorMassage" />
    </div>
@else
    <!-- Card Variant (Horizontal) -->
    <div class="upload-group">
        @if ($label)
            <x-frontend::forms.label class="{{ $isRequired ? 'required-field' : '' }}" :for="$fieldId" :required="$isRequired">
                {{ $label }}
            </x-frontend::forms.label>
        @endif

        <!-- Existing File State -->
        @if ($hasExistingFile)
            <div class="fade-in" id="existing_{{ $fieldId }}">
                <div class="bg-white border border-med-primary/30 rounded-lg p-3 flex items-center justify-between shadow-sm hover:shadow-md transition-shadow group">
                    <a class="flex items-center gap-3 flex-1 min-w-0 group-hover:text-med-primary transition-colors" href="{{ $existingFile['url'] }}" target="_blank">
                        <div class="flex-shrink-0 w-10 h-10 bg-med-primary/10 rounded-lg flex items-center justify-center text-med-primary">
                            <i class="{{ $icon ?? 'fa-solid fa-file' }} text-lg"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-bold text-gray-800 truncate">{{ $existingFile['filename'] }}</p>
                            <p class="text-xs text-gray-500 flex items-center gap-1">
                                <i class="fa-solid fa-eye"></i> Click to view
                            </p>
                        </div>
                    </a>
                    <button class="ml-3 w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 transition-all" type="button" title="Remove and Upload New" onclick="switchToUpload('{{ $fieldId }}')">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>
                </div>
            </div>
        @endif

        <!-- Upload New State -->
        <div class="{{ $hasExistingFile ? 'hidden' : 'fade-in' }}" id="upload_{{ $fieldId }}">
            <label class="relative flex items-center justify-between w-full p-3 border border-gray-300 rounded-lg cursor-pointer bg-white hover:border-med-primary hover:shadow-md transition-all group">
                <div class="flex items-center gap-3 overflow-hidden">
                    <div class="flex-shrink-0 w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 group-hover:text-med-primary group-hover:bg-med-primary/10 transition-colors">
                        <i class="fa-solid fa-cloud-arrow-up text-lg"></i>
                    </div>
                    <div class="flex-1 min-w-0 text-left">
                        <p class="text-sm font-medium text-gray-700 group-hover:text-med-primary truncate">Click to upload file</p>
                        <p class="text-xs text-gray-400 truncate" id="filename_{{ $fieldId }}">No file selected</p>
                    </div>
                </div>
                <input class="hidden" id="{{ $fieldId }}" name="{{ $name }}" type="file" @if ($accept) accept="{{ $accept }}" @endif onchange="updateFilename(this, 'filename_{{ $fieldId }}', 'upload_{{ $fieldId }}')" @if ($isRequired) required @endif @if ($disabled) disabled @endif {{ $attributes }} />
            </label>
            @if ($hasExistingFile)
                <div class="mt-2 text-right">
                    <button class="text-xs text-gray-500 hover:text-med-primary underline" type="button" onclick="cancelUpload('{{ $fieldId }}')">Cancel</button>
                </div>
            @endif
        </div>

        <x-frontend::forms.error :name="$name" :message="$errorMassage" />
    </div>
    @if ($isBoxVariant && !$uploadKey)
        @once('frontend-file-upload-remove')
            <script>
                (function() {
                    function fileUploadRemove(btn, e) {
                        if (e) {
                            e.stopPropagation();
                            e.preventDefault();
                        }
                        var box = btn && btn.closest && btn.closest('.upload-box');
                        if (!box) return;
                        var input = box.querySelector('input[type="file"]');
                        var removeBtn = box.querySelector('.file-remove-btn');
                        var icons = box.querySelectorAll('i');
                        var removeBtnEl = removeBtn;
                        var icon = Array.from(icons).find(function(i) {
                            return !removeBtnEl || !removeBtnEl.contains(i);
                        }) || null;
                        var text = box.querySelector('span');
                        if (input) input.value = '';
                        box.classList.remove('border-med-primary', 'bg-green-50', 'border-2');
                        if (icon && icon.dataset && icon.dataset.originalClass) icon.className = icon.dataset.originalClass;
                        if (text) {
                            text.textContent = 'Click to upload';
                            text.classList.remove('text-med-primary', 'font-medium');
                            text.classList.add('text-gray-500', 'group-hover:text-med-primary');
                        }
                        if (removeBtn) removeBtn.classList.add('hidden', 'opacity-0', 'pointer-events-none');
                        if (typeof window.FormValidation !== 'undefined' && input) window.FormValidation.clearValidation(input);
                    }
                    window.fileUploadRemove = fileUploadRemove;
                })();
            </script>
        @endonce
    @endif
@endif