@props([
    'commentName' => 'body', 
    'filesName' => 'attachments', 
    'avatarSrc' => '',
])

<div x-data="commentComponentAsync()"> 
    <div class="flex flex-col">
        <div class="flex space-x-3">
            <img class="h-10 w-10 rounded-full object-cover" src="{{ $avatarSrc }}" alt="Perfil">
            
            <div class="flex-1 min-w-0 relative">
                <textarea
                    x-model="formData.body"
                    name="{{ $commentName }}"
                    placeholder="Escribe un comentario" 
                    rows="5" 
                    class="w-full text-parrafo pr-16 rounded-md p-2 border border-complement100 resize-none"
                >{{ old($commentName) }}</textarea>
                <div class="absolute bottom-4 right-4 z-10">
                    <input
                        type="file"
                        x-ref="fileInput"
                        @change="handleFileChange($event)"
                        multiple
                        class="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
                    />
                    <button @click="$refs.fileInput.click()" type="button" class="border w-12 h-12 text-black bg-white border-complement100 rounded-lg flex justify-center items-center">
                        <svg class="text-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path class="fill-current" d="M16.6875 6.375V17.0625C16.6875 17.6074 16.585 18.1172 16.3799 18.5918C16.1748 19.0664 15.8936 19.4824 15.5361 19.8398C15.1787 20.1973 14.7627 20.4785 14.2881 20.6836C13.8135 20.8887 13.3008 20.9941 12.75 21C12.2051 21 11.6953 20.8975 11.2207 20.6924C10.7461 20.4873 10.3301 20.2061 9.97266 19.8486C9.61523 19.4912 9.33398 19.0752 9.12891 18.6006C8.92383 18.126 8.81836 17.6133 8.8125 17.0625V5.8125C8.8125 5.42578 8.88574 5.0625 9.03223 4.72266C9.17871 4.38281 9.38086 4.08691 9.63867 3.83496C9.89648 3.58301 10.1953 3.38086 10.5352 3.22852C10.875 3.07617 11.2383 3 11.625 3C12.0117 3 12.375 3.07324 12.7148 3.21973C13.0547 3.36621 13.3506 3.56836 13.6025 3.82617C13.8545 4.08398 14.0566 4.38281 14.209 4.72266C14.3613 5.0625 14.4375 5.42578 14.4375 5.8125V17.0625C14.4375 17.2969 14.3936 17.5166 14.3057 17.7217C14.2178 17.9268 14.0977 18.1055 13.9453 18.2578C13.793 18.4102 13.6143 18.5303 13.4092 18.6182C13.2041 18.7061 12.9844 18.75 12.75 18.75C12.5156 18.75 12.2959 18.7061 12.0908 18.6182C11.8857 18.5303 11.707 18.4102 11.5547 18.2578C11.4023 18.1055 11.2822 17.9268 11.1943 17.7217C11.1064 17.5166 11.0625 17.2969 11.0625 17.0625V7.5H12.1875V17.0625C12.1875 17.2148 12.2432 17.3467 12.3545 17.458C12.4658 17.5693 12.5977 17.625 12.75 17.625C12.9023 17.625 13.0342 17.5693 13.1455 17.458C13.2568 17.3467 13.3125 17.2148 13.3125 17.0625V5.8125C13.3125 5.57812 13.2686 5.3584 13.1807 5.15332C13.0928 4.94824 12.9727 4.76953 12.8203 4.61719C12.668 4.46484 12.4893 4.34473 12.2842 4.25684C12.0791 4.16895 11.8594 4.125 11.625 4.125C11.3906 4.125 11.1709 4.16895 10.9658 4.25684C10.7607 4.34473 10.582 4.46484 10.4297 4.61719C10.2773 4.76953 10.1572 4.94824 10.0693 5.15332C9.98145 5.3584 9.9375 5.57812 9.9375 5.8125V17.0625C9.9375 17.4492 10.0107 17.8125 10.1572 18.1523C10.3037 18.4922 10.5059 18.7881 10.7637 19.04C11.0215 19.292 11.3203 19.4941 11.6602 19.6465C12 19.7988 12.3633 19.875 12.75 19.875C13.1367 19.875 13.5 19.8018 13.8398 19.6553C14.1797 19.5088 14.4756 19.3066 14.7275 19.0488C14.9795 18.791 15.1816 18.4922 15.334 18.1523C15.4863 17.8125 15.5625 17.4492 15.5625 17.0625V6.375H16.6875Z" fill="#2A2A2A"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <template x-if="errors.body">
            <span class="error-text block mt-2" x-text="errors.body[0]"></span>
        </template>
        <template x-if="Object.keys(attachmentErrors).length > 0">
            <div class="mt-2 space-y-1">
                 <template x-for="(message, key) in attachmentErrors" :key="key">
                     <span class="error-text block text-sm">
                         Archivo #<span x-text="parseInt(key.split('.')[1]) + 1"></span>: <span x-text="message"></span>
                     </span>
                 </template>
            </div>
        </template>
        <template x-if="errors.attachments">
            <span class="error-text block mt-2" x-text="errors.attachments[0]"></span>
        </template>
        <template x-if="errors.server">
            <span class="error-text block mt-2" x-text="errors.server"></span>
        </template>
        <div x-show="files.length > 0" class="mt-3 space-y-2">
            <template x-for="(file, index) in files" :key="index">
                <div class="flex items-center justify-between p-2 text-sm bg-gray-100 rounded-md border border-gray-200">
                    <span x-text="file.name" class="truncate max-w-[calc(100%-40px)]"></span>
                    <button @click="removeFile(index)" type="button" class="ml-2 text-red-500 hover:text-red-700 p-1 rounded-full hover:bg-red-100 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            </template>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 flex justify-end">
            <x-buttons.button 
            @click.prevent="submitComment" 
            x-bind:disabled="isLoading || formData.body.trim() === ''" 
            type="submit">
                <span x-show="!isLoading">Comentar</span>
                <span x-show="isLoading">Enviando...</span>
            </x-buttons.button>
        </div>
    </div>

</div>
<div id="successModal" class="hidden fixed inset-0 z-40 overflow-y-auto h-screen" aria-labelledby="modal-title" role="dialog"
    aria-modal="true">
    <div class="fixed inset-0 bg-primary/80 transition-opacity" aria-hidden="true"></div>
    <div class="min-h-screen lg:ml-60 flex justify-center items-center">
        <div class="relative transform transition-all">
            <div class="bg-white rounded-lg max-w-lg mx-auto p-6 md:p-8 flex items-center">
                <div class="shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mr-4">
                    <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                        </path>
                    </svg>
                </div>

                <div class="text-left">
                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                        <span id="modalSuccessMessage"></span>
                    </h3>
                    <div class="mt-2">
                        <p class="text-parrafo text-black">
                            <span id="countdownMessage"></span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let countdownInterval = null;

    function showModal(message, countdownInitial, redirectUrl) {
        const modal = document.getElementById('successModal');
        const messageSpan = document.getElementById('modalSuccessMessage');
        const countdownSpan = document.getElementById('countdownMessage');

        if (!modal || !messageSpan || !countdownSpan) {
            console.error('Error: No se encontraron los elementos de la modal (successModal, modalSuccessMessage, countdownMessage).');
            return;
        }
        modal.classList.remove('hidden');
        messageSpan.textContent = message;
        let currentCountdown = countdownInitial;

        if (countdownInterval) {
            clearInterval(countdownInterval); 
        }
        
        function updateCountdown() {
            if (currentCountdown > 0) {
                countdownSpan.innerHTML = `Actualizando información en <span class="font-bold">${currentCountdown}</span> segundos...`;
                currentCountdown--;
            } else {
                clearInterval(countdownInterval);
                countdownSpan.textContent = 'Espera un momento...';
                if (redirectUrl) {
                    window.location.href = redirectUrl;
                } else {
                    setTimeout(hideModal, 1000); 
                }
            }
        }

        if (redirectUrl) {
            updateCountdown(); 
            countdownInterval = setInterval(updateCountdown, 1000);
        } else {
            countdownSpan.textContent = '';
            setTimeout(hideModal, 3000); 
        }
    }

    function hideModal() {
        const modal = document.getElementById('successModal');
        if (modal) {
            modal.classList.add('hidden');
        }
        if (countdownInterval) {
            clearInterval(countdownInterval);
            countdownInterval = null;
        }
    }

    function commentComponentAsync() {
        return {
            formData: {
                body: '{{ old("body") }}' || '',
            },
            files: [],
            errors: {},
            attachmentErrors: {},
            isLoading: false,
            
            handleFileChange(event) {
                const newFiles = Array.from(event.target.files);
                this.files = [...this.files, ...newFiles];
                event.target.value = '';
            },
            
            removeFile(index) {
                this.files.splice(index, 1);
            },
            
            async submitComment() {
                this.errors = {};
                this.attachmentErrors = {};
                this.isLoading = true;
                hideModal(); 
                const form = this.$el.closest('form'); 

                if (!form) {
                    this.isLoading = false;
                    console.error('Error FATAL: No se encontró la etiqueta <form> que envuelve el componente. Revise la implementación en el archivo padre.');
                    return;
                }

                const actionUrl = form.action;
                const token = form.querySelector('input[name="_token"]').value;

                let data = new FormData();
                data.append('body', this.formData.body);
                data.append('_token', token);
                this.files.forEach((file) => {
                    data.append('{{ $filesName }}[]', file);
                });

                try {
                    const response = await fetch(actionUrl, {
                        method: 'POST',
                        body: data,
                        headers: { 
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json' 
                        }
                    });
                    
                    this.isLoading = false;
                    const responseData = await response.json();
                    
                    if (response.status === 422) {
                        this.processValidationErrors(responseData.errors);
                        return;
                    } 
                    if (!response.ok) {
                        this.errors.server = responseData.message || responseData.error || 'Error desconocido del servidor.';
                        return;
                    }
                    
                    this.formData.body = '';
                    this.files = [];
                    
                    const successMessage = responseData.message || 'La operación se completó correctamente.';
                    const redirectUrl = responseData.redirect_url;
                    showModal(successMessage, 3, redirectUrl);

                } catch (error) {
                    this.isLoading = false;
                    this.errors.server = 'Lo sentimos no podemos completar la petición. En este momento.';
                }
            },
            
            processValidationErrors(laravelErrors) {
                for (const field in laravelErrors) {
                    if (field === 'body' || field === '{{ $filesName }}') {
                        this.errors[field] = laravelErrors[field];
                    } 
                    else if (field.startsWith('{{ $filesName }}.')) {
                        this.attachmentErrors[field] = laravelErrors[field];
                    }
                }
            }
        }
    }
</script>