@php
    $locale = app()->getLocale();
    
    // Translated static text
    $texts = [
        'en' => [
            'title' => 'Iqra Virtual Assistant',
            'online' => 'Online',
            'input_placeholder' => 'Type your message...',
            'welcome' => 'Hello! Welcome to Iqra School. How can I help you today?',
            'suggestions' => [
                'School Timings',
                'Fee Structure',
                'Contact Details'
            ]
        ],
        'hi' => [
            'title' => 'इकरा वर्चुअल असिस्टेंट',
            'online' => 'ऑनलाइन',
            'input_placeholder' => 'अपना संदेश लिखें...',
            'welcome' => 'नमस्ते! इकरा स्कूल में आपका स्वागत है। मैं आज आपकी क्या मदद कर सकता हूँ?',
            'suggestions' => [
                'स्कूल का समय',
                'फीस संरचना',
                'संपर्क विवरण'
            ]
        ],
        'gu' => [
            'title' => 'ઇકરા વર્ચ્યુઅલ આસિસ્ટન્ટ',
            'online' => 'ઓનલાઇન',
            'input_placeholder' => 'તમારો સંદેશ લખો...',
            'welcome' => 'નમસ્તે! ઇકરા સ્કૂલમાં તમારું સ્વાગત છે. આજે હું તમારી શું મદદ કરી શકું?',
            'suggestions' => [
                'સ્કૂલનો સમય',
                'સ્કૂલ ફી',
                'સંપર્ક વિગતો'
            ]
        ]
    ];
    
    $activeText = $texts[$locale] ?? $texts['en'];
@endphp

<div x-data="chatbotWidget()" class="fixed bottom-6 right-6 z-50 font-sans antialiased" x-cloak>
    
    {{-- Chat Trigger Button --}}
    <button @click="toggle()" 
        class="w-14 h-14 bg-emerald-600 hover:bg-emerald-700 hover:scale-110 active:scale-95 text-white rounded-full flex items-center justify-center shadow-xl shadow-emerald-600/30 transition-all cursor-pointer relative group">
        <span class="absolute inset-0 rounded-full bg-emerald-500 animate-ping opacity-25 group-hover:opacity-0 transition-opacity"></span>
        
        {{-- Chat Icon (visible when closed) --}}
        <svg x-show="!open" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
        </svg>
        
        {{-- Close Icon (visible when open) --}}
        <svg x-show="open" class="w-6 h-6" 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>

    {{-- Chat Window --}}
    <div x-show="open"
        x-transition:enter="transition ease-out duration-300 transform"
        x-transition:enter-start="opacity-0 translate-y-8 scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
        x-transition:leave="transition ease-in duration-200 transform"
        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
        x-transition:leave-end="opacity-0 translate-y-8 scale-95"
        class="absolute bottom-16 right-0 w-[360px] sm:w-[400px] h-[550px] bg-white border border-slate-200 rounded-3xl shadow-2xl flex flex-col overflow-hidden">
        
        {{-- Header --}}
        <div class="bg-emerald-600 px-6 py-4 flex items-center justify-between text-white shadow-sm shrink-0">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center font-bold text-base shadow-inner">
                    I
                </div>
                <div>
                    <h4 class="text-xs font-bold leading-tight">{{ $activeText['title'] }}</h4>
                    <span class="flex items-center gap-1.5 text-[10px] text-emerald-100 font-medium mt-0.5">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-300 animate-pulse"></span>
                        {{ $activeText['online'] }}
                    </span>
                </div>
            </div>
            <button @click="close()" class="text-white/80 hover:text-white hover:bg-white/10 rounded-lg p-1.5 transition-colors cursor-pointer">
                <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.5" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
        </div>

        {{-- Chat Messages Area --}}
        <div class="flex-grow overflow-y-auto p-5 space-y-4 bg-slate-50/50" id="chatbot-messages">
            
            {{-- Message loop --}}
            <template x-for="(msg, index) in messages" :key="index">
                <div class="flex flex-col" :class="msg.sender === 'user' ? 'items-end' : 'items-start'">
                    <div class="max-w-[85%] px-4 py-3 rounded-2xl text-xs font-medium leading-relaxed shadow-sm transition-all"
                        :class="msg.sender === 'user' 
                            ? 'bg-emerald-600 text-white rounded-tr-none' 
                            : 'bg-white text-slate-800 border border-slate-100 rounded-tl-none'">
                        <span x-html="msg.text"></span>
                    </div>
                    <span class="text-[9px] text-slate-400 font-semibold mt-1 px-1" x-text="msg.time"></span>
                </div>
            </template>

            {{-- Typing Indicator --}}
            <div x-show="typing" class="flex flex-col items-start" style="display: none;">
                <div class="px-4 py-3 bg-white text-slate-800 border border-slate-100 rounded-2xl rounded-tl-none flex items-center gap-1 shadow-sm">
                    <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></span>
                    <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
                    <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.3s"></span>
                </div>
            </div>

        </div>

        {{-- Bottom suggestions and entry --}}
        <div class="p-4 border-t border-slate-100 bg-white shrink-0 space-y-3">
            
            {{-- Suggestion Chips --}}
            <div class="flex flex-wrap gap-2" x-show="messages.length <= 1">
                @foreach($activeText['suggestions'] as $suggestion)
                    <button @click="sendSuggestion('{{ addslashes($suggestion) }}')"
                        class="text-[10px] font-bold text-slate-600 hover:text-emerald-700 bg-slate-50 hover:bg-emerald-50 border border-slate-100 hover:border-emerald-100 px-3 py-1.5 rounded-full transition-all active:scale-95 cursor-pointer">
                        {{ $suggestion }}
                    </button>
                @endforeach
            </div>

            {{-- Form input --}}
            <form @submit.prevent="sendMessage()" class="flex items-center gap-2">
                <input type="text" x-model="userInput" placeholder="{{ $activeText['input_placeholder'] }}"
                    class="flex-grow text-xs font-medium px-4 py-3 bg-slate-50 border border-slate-100 rounded-2xl outline-none focus:bg-white focus:border-emerald-500 transition-all">
                <button type="submit" :disabled="!userInput.trim()"
                    class="w-10 h-10 bg-emerald-600 hover:bg-emerald-700 disabled:bg-slate-200 text-white rounded-xl flex items-center justify-center shadow-md shadow-emerald-600/10 hover:shadow-emerald-700/20 active:scale-95 disabled:scale-100 transition-all cursor-pointer">
                    <svg class="w-4 h-4 rotate-45 -mr-0.5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                </button>
            </form>

        </div>

    </div>

</div>

<script>
    function chatbotWidget() {
        return {
            open: false,
            userInput: '',
            typing: false,
            locale: '{{ $locale }}',
            messages: [
                {
                    sender: 'bot',
                    text: '{{ addslashes($activeText["welcome"]) }}',
                    time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
                }
            ],
            
            toggle() {
                this.open = !this.open;
                if (this.open) {
                    this.scrollToBottom();
                }
            },
            
            close() {
                this.open = false;
            },
            
            sendSuggestion(text) {
                this.userInput = text;
                this.sendMessage();
            },
            
            sendMessage() {
                const messageText = this.userInput.trim();
                if (!messageText) return;
                
                // Add user message
                this.messages.push({
                    sender: 'user',
                    text: this.escapeHtml(messageText),
                    time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
                });
                
                this.userInput = '';
                this.typing = true;
                this.scrollToBottom();
                
                // Post to Laravel api route
                fetch('/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                    },
                    body: JSON.stringify({
                        message: messageText,
                        locale: this.locale
                    })
                })
                .then(response => response.json())
                .then(data => {
                    this.typing = false;
                    this.messages.push({
                        sender: 'bot',
                        text: data.reply,
                        time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
                    });
                    this.scrollToBottom();
                })
                .catch(error => {
                    this.typing = false;
                    this.messages.push({
                        sender: 'bot',
                        text: 'Failed to contact service.',
                        time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
                    });
                    this.scrollToBottom();
                });
            },
            
            escapeHtml(text) {
                const map = {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;'
                };
                return text.replace(/[&<>"']/g, function(m) { return map[m]; });
            },
            
            scrollToBottom() {
                setTimeout(() => {
                    const chatArea = document.getElementById('chatbot-messages');
                    if (chatArea) {
                        chatArea.scrollTop = chatArea.scrollHeight;
                    }
                }, 50);
            }
        }
    }
</script>