@props(['ticket'])

<div class="bg-white rounded-lg border border-gray-300 p-6 shadow-md" x-data="commentForm({{ $ticket->id }})">
    <!-- Encabezado -->
    <div class="mb-6">
        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
            </svg>
            Agregar comentario
        </h3>
        <p class="text-sm text-gray-600 mt-1">Comparte tu opinión o información sobre este ticket</p>
    </div>

    <!-- Mensaje de estado -->
    <div x-show="message" x-cloak class="mb-4 p-4 rounded-lg animate-in fade-in" :class="messageType === 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200'">
        <div class="flex items-center gap-2">
            <svg x-show="messageType === 'success'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            <svg x-show="messageType === 'error'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
            </svg>
            <p x-text="message"></p>
        </div>
    </div>

    <!-- Formulario -->
    <div class="space-y-4">
        <!-- Textarea -->
        <div>
            <label for="comment-{{ $ticket->id }}" class="block text-sm font-semibold text-gray-700 mb-2">
                Tu comentario
            </label>
            <textarea
                :id="'comment-' + {{ $ticket->id }}"
                x-model="comment"
                rows="5"
                placeholder="Escribe tu comentario aquí..."
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-400 focus:border-transparent resize-none transition"
                style="color: #404040;"
            ></textarea>
        </div>

        <!-- Botones de acción -->
        <div class="flex justify-end gap-3 pt-4 border-t border-gray-200">
            <button
                type="button"
                @click="comment = ''"
                :disabled="loading"
                class="px-4 py-2.5 rounded-lg font-medium border border-gray-300 hover:bg-gray-100 transition disabled:opacity-50"
                style="color: #404040;"
            >
                Cancelar
            </button>
            <button
                type="button"
                @click="submitComment()"
                :disabled="loading || !comment.trim()"
                class="px-6 py-2.5 rounded-lg font-semibold text-white shadow hover:opacity-90 transition disabled:opacity-50 flex items-center gap-2"
                style="background-color: #404040;"
            >
                <svg x-show="!loading" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                </svg>
                <svg x-show="loading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span x-show="!loading">Enviar comentario</span>
                <span x-show="loading">Enviando...</span>
            </button>
        </div>
    </div>

</div>

<script>
function commentForm(ticketId) {
    return {
        comment: '',
        loading: false,
        message: '',
        messageType: '',
        async submitComment() {
            if (!this.comment.trim()) {
                this.message = 'El comentario no puede estar vacío';
                this.messageType = 'error';
                setTimeout(() => { this.message = ''; }, 3000);
                return;
            }
            
            this.loading = true;
            this.message = '';
            
            try {
                const response = await fetch('/api/posts', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                    },
                    body: JSON.stringify({
                        ticket_id: ticketId,
                        content: this.comment
                    })
                });
                
                const data = await response.json();
                
                if (data.success) {
                    this.message = data.message;
                    this.messageType = 'success';
                    this.comment = '';
                    
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    this.message = data.message || 'Error al crear comentario';
                    this.messageType = 'error';
                }
            } catch (error) {
                this.message = 'Error de conexión: ' + error.message;
                this.messageType = 'error';
                console.error('Error:', error);
            } finally {
                this.loading = false;
            }
        }
    };
}
</script>