<div
    x-data="{
        recognition: null,
        isListening: false,
        canListen: false,
        init() {
            const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SR) return;
            this.canListen = true;
            this.recognition = new SR();
            this.recognition.lang = 'es-ES';
            this.recognition.continuous = false;
            this.recognition.interimResults = false;
            this.recognition.onresult = (event) => {
                const transcript = event.results[0][0].transcript;
                $wire.set('input', transcript);
                this.isListening = false;
            };
            this.recognition.onend = () => { this.isListening = false; };
            this.recognition.onerror = () => { this.isListening = false; };
        },
        toggleListen() {
            if (this.isListening) {
                this.recognition.stop();
                this.isListening = false;
            } else {
                this.recognition.start();
                this.isListening = true;
            }
        }
    }"
    @nuna-refresh.window="setTimeout(() => window.location.reload(), 1500)"
    class="fixed bottom-4 right-4 z-50 flex flex-col items-end gap-2"
    style="position:fixed !important; bottom:1rem !important; right:1rem !important; z-index:9999 !important; display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem;"
>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($isOpen): ?>
    <div
        class="w-80 sm:w-96 bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col overflow-hidden"
        style="height: 520px;"
    >
        
        <div class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center text-lg">🤖</div>
                <div>
                    <p class="font-semibold text-sm leading-tight">Nuna IA</p>
                    <p class="text-xs opacity-75">Asistente de gestión</p>
                </div>
            </div>
            <div class="flex items-center gap-1">
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(count($messages) > 0): ?>
                    <button wire:click="clearChat" title="Limpiar chat"
                        class="p-1.5 rounded-lg hover:bg-white/20 transition-colors text-xs opacity-70 hover:opacity-100">
                        🗑
                    </button>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <button wire:click="toggleOpen"
                    class="p-1.5 rounded-lg hover:bg-white/20 transition-colors">
                    <svg 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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        
        <div
            id="nuna-messages"
            class="flex-1 overflow-y-auto p-3 space-y-2 scroll-smooth"
            x-init="$el.scrollTop = $el.scrollHeight"
            x-on:nuna-scroll-bottom.window="$el.scrollTop = $el.scrollHeight"
        >
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(empty($messages)): ?>
                <div class="text-center py-8">
                    <div class="text-3xl mb-2">👋</div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300">¡Hola! Soy Nuna.</p>
                    <p class="text-xs text-gray-400 mt-1">Podés decirme:</p>
                    <div class="mt-3 space-y-1 text-left">
                        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = [
                            '"Añadí landing page para Francesc a $60 USD"',
                            '"Francesc pagó 300 dólares hoy"',
                            '"5 horas de diseño para Jairo a $15/h"',
                            '"Programar cobro de Canna Films para el viernes"',
                        ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $example): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <button wire:click="$set('input', <?php echo e(Js::from(trim($example, '\"\''))); ?>)"
                                class="w-full text-left text-xs bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300 rounded-lg px-2 py-1.5 hover:bg-primary-100 dark:hover:bg-primary-900/40 transition-colors">
                                💬 <?php echo e($example); ?>

                            </button>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                    </div>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $messages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $msg): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php $isUser = $msg['role'] === 'user'; ?>

                
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($isUser): ?>
                    <div class="flex justify-end">
                        <div class="max-w-[80%] bg-primary-600 text-white rounded-2xl rounded-br-sm px-3 py-2 text-sm">
                            <?php echo e($msg['content']); ?>

                        </div>
                    </div>
                <?php else: ?>
                    
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(($msg['type'] ?? '') === 'intent' && $pendingIntent && $i === count($messages) - 1): ?>
                        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-xl p-3 space-y-2">
                            <p class="font-semibold text-sm text-amber-800 dark:text-amber-300">
                                <?php echo e($msg['display']['title'] ?? $msg['content']); ?>

                            </p>
                            <div class="space-y-0.5">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $msg['display']['lines'] ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $line): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($line['value']): ?>
                                        <div class="flex text-xs">
                                            <span class="text-gray-500 dark:text-gray-400 w-20 shrink-0"><?php echo e($line['label']); ?></span>
                                            <span class="<?php echo e(($line['bold'] ?? false) ? 'font-bold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'); ?>">
                                                <?php echo e($line['value']); ?>

                                            </span>
                                        </div>
                                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>
                            <div class="flex gap-2 pt-1">
                                <button wire:click="confirm" wire:loading.attr="disabled"
                                    class="flex-1 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors flex items-center justify-center gap-1">
                                    <span wire:loading.remove wire:target="confirm">✓ Confirmar</span>
                                    <span wire:loading wire:target="confirm">Guardando...</span>
                                </button>
                                <button wire:click="cancel"
                                    class="flex-1 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors">
                                    ✕ Cancelar
                                </button>
                            </div>
                        </div>
                    <?php else: ?>
                        
                        <div class="flex justify-start">
                            <div class="max-w-[85%] rounded-2xl rounded-bl-sm px-3 py-2 text-sm
                                <?php if(($msg['type'] ?? '') === 'error'): ?>   bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 border border-red-200
                                <?php elseif(($msg['type'] ?? '') === 'success'): ?> bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300 border border-green-200
                                <?php else: ?> bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200
                                <?php endif; ?>">
                                <?php echo nl2br(e($msg['content'])); ?>

                            </div>
                        </div>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            
            <div wire:loading wire:target="send,confirm" class="flex justify-start">
                <div class="bg-gray-100 dark:bg-gray-800 rounded-2xl rounded-bl-sm px-4 py-2">
                    <div class="flex gap-1 items-center">
                        <div class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style="animation-delay:0ms"></div>
                        <div class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style="animation-delay:150ms"></div>
                        <div class="w-1.5 h-1.5 bg-gray-400 rounded-full animate-bounce" style="animation-delay:300ms"></div>
                    </div>
                </div>
            </div>
        </div>

        
        <div class="border-t border-gray-200 dark:border-gray-700 p-3 bg-white dark:bg-gray-900">
            <div class="flex gap-2 items-end">
                <textarea
                    wire:model="input"
                    wire:keydown.enter.prevent="send"
                    placeholder="Escribí o usá el micrófono..."
                    rows="1"
                    @input="$el.style.height='auto'; $el.style.height=Math.min($el.scrollHeight, 80)+'px'"
                    class="flex-1 resize-none rounded-xl border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
                    style="min-height:36px; max-height:80px;"
                ></textarea>

                
                <button
                    x-show="canListen"
                    @click="toggleListen"
                    :class="isListening
                        ? 'bg-red-500 hover:bg-red-600 animate-pulse'
                        : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'"
                    class="p-2 rounded-xl transition-all flex-shrink-0"
                    :title="isListening ? 'Detener escucha' : 'Hablar'"
                >
                    <svg class="w-5 h-5" :class="isListening ? 'text-white' : 'text-gray-600 dark:text-gray-300'" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
                        <path d="M19 10v2a7 7 0 0 1-14 0v-2H3v2a9 9 0 0 0 8 8.94V23h2v-2.06A9 9 0 0 0 21 12v-2h-2z"/>
                    </svg>
                </button>

                
                <button
                    wire:click="send"
                    wire:loading.attr="disabled"
                    wire:loading.class="opacity-50"
                    class="p-2 bg-primary-600 hover:bg-primary-700 disabled:opacity-50 text-white rounded-xl transition-colors flex-shrink-0"
                >
                    <svg wire:loading.remove wire:target="send" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                    <svg wire:loading wire:target="send" class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                </button>
            </div>

            
            <div x-show="isListening" class="mt-1.5 flex items-center gap-1.5 text-xs text-red-500">
                <span class="inline-block w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                Escuchando... hablá ahora
            </div>
        </div>
    </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    
    <button
        wire:click="toggleOpen"
        class="relative w-14 h-14 rounded-full shadow-lg transition-all duration-200 flex items-center justify-center
            <?php echo e($isOpen
                ? 'bg-gray-600 hover:bg-gray-700'
                : 'bg-gradient-to-br from-primary-500 to-primary-700 hover:from-primary-600 hover:to-primary-800'); ?>"
        style="width:3.5rem !important; height:3.5rem !important; border-radius:9999px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; <?php echo e($isOpen ? 'background:#4b5563;' : 'background:linear-gradient(to bottom right,#3b82f6,#1d4ed8);'); ?>"
        title="<?php echo e($isOpen ? 'Cerrar asistente' : 'Abrir Nuna IA'); ?>"
    >
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($isOpen): ?>
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        <?php else: ?>
            <span class="text-2xl">🤖</span>
            
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($pendingIntent): ?>
                <span class="absolute top-1 right-1 w-3 h-3 bg-amber-400 rounded-full animate-ping"></span>
                <span class="absolute top-1 right-1 w-3 h-3 bg-amber-400 rounded-full"></span>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </button>

</div>
<?php /**PATH /home/ninatech/ventas.nuna.tech/resources/views/livewire/nuna-assistant.blade.php ENDPATH**/ ?>