@props([
    'user', 
    'value' => '',
    'inputName',
])

@php
    // Construye la URL completa de la foto existente.
    // Si $value está vacío, $initialPhotoUrl será vacío.
    $initialPhotoUrl = !empty($value) ? asset('storage/' . $value) : '';
    
    // Prioriza el valor 'old' (si hubo error de validación) sobre el valor inicial.
    $finalInitialUrl = old('photo_file_url') ?? $initialPhotoUrl;
@endphp

<div x-data="{ 
    previewUrl: '{{ $finalInitialUrl }}',
    shouldDelete: false
}">
    <input type="hidden" name="delete_photo" :value="shouldDelete ? '1' : '0'">
    <div class="flex flex-col mb-4">
        <div class="mb-2">
            <div class="w-[100px] h-[100px] bg-gray-100 rounded-full">
                <img 
                    :src="previewUrl || '{{ asset('images/default-avatar.svg') }}'" 
                    alt="Foto de perfil" 
                    class="w-full h-full rounded-full object-cover"
                >
            </div>
        </div>
        <div class="flex flex-row space-x-4">
            <button 
                @click.prevent="$refs.photoInput.click()" 
                type="button" 
                class="btn-text text-primary text-parrafo transition duration-150 ease-in-out"
            >
                <span x-text="previewUrl ? 'Editar foto' : 'Subir foto'"></span>
            </button>
            
            <div x-show="previewUrl">
                <button 
                    @click.prevent="
                        previewUrl = ''; 
                        $refs.photoInput.value = '';
                        shouldDelete = true;
                    " 
                    type="button" 
                    class="text-red-500 btn-text text-parrafo transition duration-150 ease-in-out"
                >
                    Quitar foto
                </button>
            </div>
            
            <input 
                x-ref="photoInput" 
                type="file" 
                class="hidden" 
                accept="image/*"
                name="{{ $inputName }}" 
                @change="
                    if ($event.target.files.length > 0) {
                        shouldDelete = false;
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            previewUrl = e.target.result;
                        };
                        reader.readAsDataURL($event.target.files[0]);
                    }
                "
            >
        </div>
    </div>
    @error($inputName)
        <p class="error-text">{{ $message }}</p>
    @enderror
</div>