@php
    use App\Models\ChatSetting;
    use Illuminate\Support\Facades\Storage;

    try {
        $chat = ChatSetting::getSettings();
    } catch (\Throwable $e) {
        $chat = null;
    }

    if (!$chat) {
        $chat = new \stdClass();
        $chat->is_enabled = true;
        $chat->branding = [];
        $chat->integrations = [];
        $chat->behavior = [];
        $chat->ai = ['is_enabled' => true];
        $chat->provider = 'whatsapp';
    }
    
    // Use actual setting
    // $chat->is_enabled = true; // Removed hardcoded override

    $branding = $chat->branding ?? [];
    $integrations = $chat->integrations ?? [];
    $behavior = $chat->behavior ?? [];
    $provider = $chat->provider ?? 'whatsapp';
    
    $colors = $branding['colors'] ?? [];
    $primaryColor = $colors['primary'] ?? '#6366f1';
    $secondaryColor = $colors['secondary'] ?? '#4f46e5';
    $textColor = $colors['text'] ?? '#ffffff';
    $bgColor = $colors['background'] ?? '#ffffff';
    $windowTextColor = $colors['window_text'] ?? '#1e293b';
    $inputBorderColor = $colors['input_border'] ?? '#e2e8f0';
    $closeBtnColor = $colors['close_button'] ?? '#94a3b8';
    
    $position = $branding['position'] ?? 'right';
    $marginSide = $branding['margin'] ?? 24;
    $marginBottom = $branding['margin_bottom'] ?? 24;
    $btnSize = $branding['button_size'] ?? 64;
    $iconSize = $branding['icon_size'] ?? 32;
    $borderRadius = $branding['border_radius'] ?? 16;
    $inputRadius = $branding['input_radius'] ?? 12;
    $fontSize = $branding['font_size'] ?? 14;
    $closeSize = $branding['close_size'] ?? 20;
    $closeIcon = $branding['close_icon'] ?? 'x';
    
    $animations = $branding['animations'] ?? ['type' => 'slide', 'hover' => 'scale'];
    $animType = $animations['type'] ?? 'slide';
    $hoverFx = $animations['hover'] ?? 'scale';
    
    $headerShow = $branding['header_show'] ?? true;
    
    // Prepare Provider URLs
    $chatUrl = '#';
    if ($provider === 'whatsapp') {
        $wa = $integrations['whatsapp'] ?? [];
        $chatUrl = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $wa['phone'] ?? '1234567890') 
                 . (!empty($wa['message']) ? '?text=' . urlencode($wa['message']) : '');
    } elseif ($provider === 'telegram') {
        $chatUrl = 'https://t.me/' . ($integrations['telegram']['username'] ?? 'support');
    } elseif ($provider === 'messenger') {
        $chatUrl = 'https://m.me/' . ($integrations['messenger']['page_id'] ?? 'support');
    }

    $showOnMobile = $behavior['show_on_mobile'] ?? true;
    $showOnDesktop = $behavior['show_on_desktop'] ?? true;
    $delay = ($behavior['delay'] ?? 3) * 1000;
    $autoOpen = $behavior['auto_open'] ?? false;

    // AI is now the default chat mode
    $aiEnabled = $chat->ai['is_enabled'] ?? true;
@endphp

@if($chat->is_enabled)
<div id="unified-chat-widget" 
     x-data="unifiedChatWidget()"
     x-init="initWidget()"
     class="fixed z-[9999] {{ !$showOnMobile ? 'hidden sm:block' : '' }} {{ !$showOnDesktop ? 'sm:hidden' : '' }}"
     style="
        --primary-color: {{ $primaryColor }}; 
        --text-color: {{ $textColor }}; 
        --bg-color: {{ $bgColor }};
        --window-text: {{ $windowTextColor }};
        --input-border: {{ $inputBorderColor }};
        --close-color: {{ $closeBtnColor }};
        --btn-size: {{ $btnSize }}px;
        --icon-size: {{ $iconSize }}px;
        --border-radius: {{ $borderRadius }}px;
        --input-radius: {{ $inputRadius }}px;
        --font-size: {{ $fontSize }}px;
        --close-size: {{ $closeSize }}px;
        bottom: {{ $marginBottom }}px;
        {{ $position }}: {{ $marginSide }}px;
     "
     x-cloak>

    {{-- Chat Window --}}
    <div x-show="isOpen" 
         @if($animType === 'slide')
            x-transition:enter="transition ease-[cubic-bezier(0.34,1.56,0.64,1)] duration-700"
            x-transition:enter-start="opacity-0 translate-y-16 scale-90"
            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
            x-transition:leave-end="opacity-0 translate-y-12 scale-95"
         @else
            x-transition:enter="transition ease-[cubic-bezier(0.34,1.56,0.64,1)] duration-700"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
         @endif
         class="absolute bottom-[calc(var(--btn-size)+1.5rem)] {{ $position === 'left' ? 'left-0' : 'right-0' }} w-[350px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-[var(--btn-size)]-6rem)] sm:max-h-[min(600px,80vh)] shadow-[0_40px_120px_-20px_rgba(0,0,0,0.4)] overflow-hidden flex flex-col items-stretch text-left border border-white/20"
         style="background: color-mix(in srgb, var(--bg-color) 75%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: var(--border-radius); font-size: var(--font-size); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.2); z-index: 10000;">
        
        @if($headerShow)
        {{-- Header --}}
        <div class="px-4 pt-4 pb-3 relative flex items-center gap-3 shadow-sm" style="background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 90%, transparent) 0%, color-mix(in srgb, #7c3aed 90%, transparent) 100%); color: var(--text-color)">
            @if(!empty($branding['logo']))
                <img src="{{ Storage::url($branding['logo']) }}" class="w-10 h-10 rounded-xl object-cover shadow-sm" alt="{{ $branding['title'] ?? 'Support' }} Logo">
            @else
                <div class="w-10 h-10 rounded-xl bg-white/15 flex items-center justify-center text-lg shadow-sm backdrop-blur-sm">💬</div>
            @endif
            <div class="flex-1 min-w-0">
                <h4 class="font-black text-sm leading-tight mb-1 tracking-tight">{{ $branding['title'] ?? 'Support' }}</h4>
                <div class="flex items-center gap-2">
                    <div class="flex items-center gap-1.5 px-2 py-0.5 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 w-fit">
                        <div class="w-1.5 h-1.5 rounded-full bg-white animate-pulse shadow-lg" style="box-shadow: 0 0 8px rgba(255,255,255,0.6)"></div>
                        <span class="text-[9px] font-bold uppercase tracking-wider text-white/90">Online</span>
                    </div>
                </div>
            </div>
            <button @click="isOpen = false" class="p-2 hover:bg-white/10 rounded-lg transition-all duration-200 flex-shrink-0" style="color: var(--text-color)">
                @if($closeIcon === 'x')
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" /></svg>
                @elseif($closeIcon === 'arrow')
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                @else
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" /></svg>
                @endif
            </button>
        </div>
        <div class="px-4 py-3 bg-gradient-to-b from-black/5 to-transparent border-b border-black/5">
            <p class="text-xs leading-relaxed font-semibold text-slate-700 line-clamp-2">{{ $branding['welcome_message'] ?? 'How can we help?' }}</p>
        </div>
        @else
        <div class="px-4 py-3 flex items-center justify-between border-b border-slate-200/50 bg-white/50">
            <h4 class="font-bold text-xs uppercase tracking-wider text-slate-800">{{ $branding['title'] ?? 'Support' }}</h4>
            <button @click="isOpen = false" class="p-2 hover:bg-slate-100 rounded-lg transition-all" style="color: var(--close-color)">
                @if($closeIcon === 'x')
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" /></svg>
                @elseif($closeIcon === 'arrow')
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
                @else
                    <svg :style="`width: var(--close-size); height: var(--close-size)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7" /></svg>
                @endif
            </button>
        </div>
        @endif

        {{-- Body --}}
        <div class="flex-1 min-h-0 px-4 py-4 overflow-y-auto custom-scrollbar flex flex-col bg-transparent">
            @if($aiEnabled)
                <div class="flex-1 overflow-y-auto custom-scrollbar space-y-3 flex flex-col" id="chat-messages-container">
                    {{-- Default greeting --}}
                    <div class="flex gap-2 mb-1 animate-[fadeIn_0.5s_ease-out]">
                        <div :style="`background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%)`" class="w-7 h-7 rounded-lg flex-shrink-0 flex items-center justify-center shadow-md">
                            <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                        </div>
                        <div style="background: #0f172a !important; color: #ffffff !important;" class="px-4 py-3 rounded-2xl rounded-tl-sm text-[13px] shadow-lg border border-white/10 max-w-[85%] leading-relaxed">
                            Hello! 👋 What issue or question can I help you with?
                        </div>
                    </div>
                    
                    {{-- Dynamic Messages --}}
                    <template x-for="(msg, index) in messages" :key="index">
                        <!-- User & AI Messages -->
                        <div x-show="msg.role === 'user' || msg.role === 'ai'" class="flex gap-2" :class="msg.role === 'user' ? 'flex-row-reverse' : ''">
                            <div x-show="msg.role === 'ai'" class="w-7 h-7 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex-shrink-0 flex items-center justify-center shadow-sm border border-white/20">
                                <svg class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                            </div>
                            <div class="px-4 py-3 text-[13px] max-w-[85%] leading-relaxed shadow-lg border"
                                :class="msg.role === 'user' ? 'rounded-2xl rounded-tr-sm text-white font-medium border-transparent' : 'rounded-2xl rounded-tl-sm text-white border-white/10'"
                                :style="msg.role === 'user' ? `background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%); box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3); color: #ffffff !important;` : 'background: #0f172a !important; color: #ffffff !important;'" x-html="msg.role === 'user' ? msg.content.replace(/\n/g, '<br>') : formatMessage(msg.content)"></div>
                        </div>

                        <!-- System Messages -->
                        <div x-show="msg.role === 'system'" class="flex justify-center py-1">
                            <div class="px-4 py-2 text-center text-[10px] font-bold text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-full shadow-sm" x-text="msg.content"></div>
                        </div>
                    </template>

                    {{-- Typing Indicator --}}
                    <div x-show="isTyping" class="flex gap-2 mb-2">
                        <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-white to-slate-50 flex-shrink-0 flex items-center justify-center shadow-sm border border-white">
                            <svg class="w-3.5 h-3.5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
                        </div>
                        <div class="bg-white/80 border border-white/60 px-3 py-2.5 rounded-2xl rounded-tl-sm shadow-sm flex items-center gap-1.5 min-w-[50px] backdrop-blur-md">
                            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0s"></div>
                            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.15s"></div>
                            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.3s"></div>
                        </div>
                    </div>
                </div>

                <div class="mt-2 pt-3 border-t border-white/10">
                    <form @submit.prevent="sendMessage" class="flex items-center gap-2 group/form">
                        <input type="text" x-model="newMessage" :disabled="isTyping" placeholder="Type a message..." 
                               style="background: #0f172a !important; color: #ffffff !important;"
                               class="flex-1 px-4 py-3 border border-white/10 rounded-xl text-[14px] font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500/40 shadow-inner transition-all disabled:opacity-50 placeholder:text-slate-500">
                        <button type="submit" :disabled="!newMessage.trim() || isTyping" class="flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center shadow-md transition-all disabled:opacity-40 disabled:scale-95 hover:scale-105 active:scale-95" style="background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%); color: var(--text-color)">
                            <svg class="w-4 h-4 translate-x-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M16.6915026,12.4744748 L3.5,13.2599618 L3.5,11.6272231 L16.6915026,12.4744748 Z M20.2310559,13.1605341 L3.5,14.1721447 L3.5,10.6288315 L20.2310559,13.1605341 Z M7.62693171,8.1 L4.5,8.1 L4.5,9.6 L7.62693171,8.1 Z M4.5,15.9 L7.62693171,15.9 L4.5,14.4 L4.5,15.9 Z M20.2310559,13.1605341 L6,3.56223815 L6,6.58618484 L20.2310559,13.1605341 Z M3.5,13.2599618 L6,20.0151496 L6,17.051701 L3.5,13.2599618 Z" /></svg>
                        </button>
                    </form>
                </div>

            @else
                {{-- AI is disabled - widget will not show. This section should never render. --}}
                <!-- AI Chat is disabled. Enable AI in Chat Settings to show the widget. -->

            @endif
        </div>
        
        <div style="background: #0f172a !important;" class="px-4 py-3 border-t border-white/10 text-center rounded-b-2xl">
            <span class="text-[9px] font-black text-white/40 uppercase tracking-[0.2em]">Powered by <strong class="text-white/80 tracking-normal">{{ config('app.name') }}</strong></span>
        </div>
    </div>

    {{-- Launcher Button (Cinema Expanded Architecture) --}}
        <button @click="toggleWidget"
            class="relative flex items-center flex-shrink-0 shadow-[0_20px_50px_-10px_rgba(99,102,241,0.5)] hover:shadow-[0_30px_70px_-15px_rgba(99,102,241,0.6)] transition-all duration-[400ms] ease-[cubic-bezier(0.34,1.56,0.64,1)] active:scale-90 group overflow-hidden"
            :class="{
                'hover:scale-110': '{{ $hoverFx }}' === 'scale',
                'animate-[pulse_2s_ease-in-out_infinite]': '{{ $hoverFx }}' === 'pulse' && !isOpen,
                'pr-5 hidden sm:flex': !isOpen && '{{ $behavior['launcher_state'] ?? 'icon_only' }}' === 'expanded' && '{{ $branding['launcher_text'] ?? '' }}' !== '',
                'w-auto': !isOpen && '{{ $behavior['launcher_state'] ?? 'icon_only' }}' === 'expanded' && '{{ $branding['launcher_text'] ?? '' }}' !== '',
                'w-[var(--btn-size)]': isOpen || ('{{ $behavior['launcher_state'] ?? 'icon_only' }}' !== 'expanded' && '{{ $behavior['launcher_state'] ?? 'icon_only' }}' !== 'expand_hover') || '{{ $branding['launcher_text'] ?? '' }}' === ''
            }"
            style="background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%); height: var(--btn-size); border-radius: calc(var(--border-radius) * 0.75);">
        
        <div class="relative flex items-center justify-center flex-shrink-0" style="width: var(--btn-size); height: var(--btn-size);">
            <div x-show="!isOpen" x-transition:enter="transition ease-[cubic-bezier(0.34,1.56,0.64,1)] duration-500" x-transition:enter-start="opacity-0 scale-50 -rotate-90" x-transition:enter-end="opacity-100 scale-100 rotate-0" class="absolute inset-0 flex items-center justify-center">
                @if(!empty($branding['icon']))
                    <img src="{{ Storage::url($branding['icon']) }}" style="width: var(--icon-size); height: var(--icon-size);" class="object-contain group-hover:scale-110 transition-transform duration-500" alt="Chat Widget Icon">
                @else
                    <svg :style="`width: var(--icon-size); height: var(--icon-size); color: var(--text-color)`" class="group-hover:scale-110 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03-8-9-8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                @endif
            </div>
            <div x-show="isOpen" x-transition:enter="transition ease-[cubic-bezier(0.34,1.56,0.64,1)] duration-500" x-transition:enter-start="opacity-0 rotate-90 scale-50" x-transition:enter-end="opacity-100 rotate-0 scale-100" class="absolute inset-0 flex items-center justify-center">
                <svg :style="`width: var(--icon-size); height: var(--icon-size); color: var(--text-color)`" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" /></svg>
            </div>
        </div>

        @if(!empty($branding['launcher_text']) && in_array($behavior['launcher_state'] ?? 'icon_only', ['expanded', 'expand_hover']))
            <div x-show="!isOpen" 
                 class="flex items-center overflow-hidden transition-all duration-[400ms] ease-[cubic-bezier(0.34,1.56,0.64,1)] hidden sm:flex"
                 :class="{
                    'max-w-[200px] opacity-100': '{{ $behavior['launcher_state'] }}' === 'expanded',
                    'max-w-0 opacity-0 group-hover:max-w-[200px] group-hover:opacity-100 pr-0 group-hover:pr-5': '{{ $behavior['launcher_state'] }}' === 'expand_hover'
                 }">
                <span class="font-black whitespace-nowrap text-sm" 
                      style="color: {{ $branding['colors']['launcher_text'] ?? '#ffffff' }};">
                    {{ $branding['launcher_text'] }}
                </span>
            </div>
        @endif
        
        {{-- Pulse rings if closed & pulse enabled --}}
        <template x-if="!isOpen && '{{ $hoverFx }}' === 'pulse'">
            <div class="absolute -z-10 inset-0 rounded-[inherit] animate-pulse opacity-30" style="background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%)"></div>
        </template>
    </button>
</div>

@if($provider === 'tawk' && !empty($integrations['tawk']['property_id']))
    {{-- Tawk.to direct script injection --}}
    @if(!empty($integrations['tawk']['script']))
        {!! $integrations['tawk']['script'] !!}
    @else
        <script type="text/javascript">
            var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
            (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/{{ $integrations['tawk']['property_id'] }}/{{ $integrations['tawk']['widget_id'] ?? 'default' }}';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
            })();
        </script>
    @endif
@endif

@if($provider === 'custom' && !empty($integrations['custom']['html']))
    {!! $integrations['custom']['html'] !!}
@endif

<style>
    [x-cloak] { display: none !important; }
    
    .custom-scrollbar::-webkit-scrollbar { 
        width: 5px; 
    }
    .custom-scrollbar::-webkit-scrollbar-track { 
        background: transparent; 
    }
    .custom-scrollbar::-webkit-scrollbar-thumb { 
        background: linear-gradient(to bottom, #c7d2e8, #dddff5);
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { 
        background: linear-gradient(to bottom, #a6b5d8, #c7d2e8);
        background-clip: padding-box;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    #unified-chat-widget input::placeholder {
        color: rgb(148, 163, 184);
        opacity: 0.8;
    }
</style>

<script>
    function unifiedChatWidget() {
        return {
            isOpen: false,
            provider: '{{ $provider }}',
            chatUrl: '{{ $chatUrl }}',
            delay: {{ $delay }},
            destination: '{{ $chat->data_handling['destination'] ?? 'whatsapp' }}',
            
            aiEnabled: {{ $aiEnabled ? 'true' : 'false' }},
            fallbackProvider: '{{ $provider }}', {{-- Force Direct Primary Provider Handoff per User Request --}}
            messages: [],
            newMessage: '',
            isTyping: false,

            // Anger/Escalation Detection
            angerKeywords: ['angry','mad','upset','frustrated','not working','screw','stupid','hate','furious','broken','useless','terrible','horrible'],
            handoffKeywords: ['human','person','live','agent','support','representative','help me','talk to someone'],
            greetingKeywords: ['hi','hello','hey','hola','hi!','hello!','hey there','greetings'],

            detectAnger(text) {
                if (!text || text.length <= 3) return false;
                const norm = text.toLowerCase().trim();
                if (this.greetingKeywords.includes(norm)) return false;
                
                let angerHits = 0, handoffHits = 0;
                for (const kw of this.angerKeywords) { if (norm.includes(kw)) angerHits++; }
                for (const kw of this.handoffKeywords) { if (norm.includes(kw)) handoffHits++; }
                return angerHits >= 1 || handoffHits >= 2;
            },

            formatMessage(content) {
                if (!content) return '';
                // 1. Basic HTML Escaping preventing XSS but allowing us to add anchors
                let html = content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                
                // 2. Convert Markdown Links [Text](URL)
                html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" target="_blank" style="color: var(--primary-color); font-weight: 700; text-decoration: underline;">$1</a>');
                
                // 3. Convert bare URLs not preceded by parenthesis (to avoid double matching markdown)
                html = html.replace(/(^|[^"'\(\[])(https?:\/\/[^\s<\)]+)/g, function(match, p1, p2) {
                    // Remove trailing punctuation that AI might have added at the end of a sentence
                    let trailing = "";
                    while (['.', ',', '!', '?'].includes(p2.slice(-1))) {
                        trailing = p2.slice(-1) + trailing;
                        p2 = p2.slice(0, -1);
                    }
                    return p1 + '<a href="' + p2 + '" target="_blank" style="color: var(--primary-color); font-weight: 700; text-decoration: underline;">Click Here &rarr;</a>' + trailing;
                });
                
                // 4. Line Breaks
                return html.replace(/\n/g, '<br>');
            },

            initWidget() {
                if ({{ $autoOpen ? 'true' : 'false' }}) {
                    const hasOpened = sessionStorage.getItem('chat_auto_opened');
                    if (!hasOpened) {
                        setTimeout(() => {
                            this.isOpen = true;
                            sessionStorage.setItem('chat_auto_opened', 'true');
                        }, this.delay);
                    }
                }
            },

            toggleWidget() {
                if (!this.aiEnabled && this.provider === 'tawk') {
                    if (window.Tawk_API) window.Tawk_API.toggle();
                    return;
                }
                this.isOpen = !this.isOpen;
            },

            getPrimaryWithAlpha(alpha) {
                const hex = '{{ $primaryColor }}'.replace('#', '');
                const r = parseInt(hex.substring(0, 2), 16);
                const g = parseInt(hex.substring(2, 4), 16);
                const b = parseInt(hex.substring(4, 6), 16);
                return `rgba(${r}, ${g}, ${b}, ${alpha})`;
            },

            scrollToBottom() {
                setTimeout(() => {
                    const el = document.getElementById('chat-messages-container');
                    if (el) {
                        el.scrollTop = el.scrollHeight;
                    }
                }, 100);
            },

            async sendMessage() {
                if (!this.newMessage.trim() || this.isTyping) return;
                
                const query = this.newMessage.trim();

                // Check for anger/escalation triggers
                if (this.detectAnger(query)) {
                    this.messages.push({ role: 'system', content: 'We are now connecting you to our support team. Thank you for your patience!' });
                    this.scrollToBottom();
                    setTimeout(() => this.triggerHandoffWithContext(), 700);
                    this.newMessage = '';
                    return;
                }

                this.messages.push({ role: 'user', content: query });
                this.newMessage = '';
                this.isTyping = true;
                this.scrollToBottom();

                try {
                    const response = await fetch('/api/chat/assistant', {
                        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: query,
                            history: this.messages.slice(0, -1)
                        })
                    });

                    const data = await response.json();

                    if (data.status === 'handoff') {
                        this.isTyping = false;
                        this.messages.push({ role: 'system', content: 'Connecting you to our support team on WhatsApp...' });
                        this.scrollToBottom();
                        setTimeout(() => this.triggerHandoffWithContext(), 600);
                        return;
                    }

                    if (data.status === 'success') {
                        this.messages.push({ role: 'ai', content: data.reply });
                    }
                } catch (error) {
                    console.error('Chat API Error:', error);
                    this.messages.push({ role: 'system', content: 'Technical error. Connecting you to our support team now...' });
                    this.scrollToBottom();
                    setTimeout(() => this.triggerHandoffWithContext(), 600);
                    this.isTyping = false;
                    return;
                }

                this.isTyping = false;
                this.scrollToBottom();
            },

            triggerHandoff() {
                if (this.provider === 'tawk') {
                    if (window.Tawk_API) window.Tawk_API.toggle();
                    return;
                }
                if (this.chatUrl && this.chatUrl !== '#') {
                    window.open(this.chatUrl, '_blank');
                }
            },

            triggerHandoffWithContext() {
                // Build conversation context to send with WhatsApp
                let context = 'Conversation History:\n\n';
                for (const msg of this.messages) {
                    if (msg.role === 'user') {
                        context += `👤 Customer: ${msg.content}\n\n`;
                    } else if (msg.role === 'ai') {
                        context += `🤖 AI: ${msg.content}\n\n`;
                    }
                }
                context += '\n---\n⏳ Our support team will assist you shortly.';
                
                if (this.provider === 'tawk' && window.Tawk_API) {
                    window.Tawk_API.toggle();
                    return;
                }

                if (this.chatUrl && this.chatUrl !== '#') {
                    const msg = 'Hi, I need support. Please see my conversation history below:\n\n' + context;
                    const encodedMsg = encodeURIComponent(msg);
                    window.open(`${this.chatUrl}?text=${encodedMsg}`, '_blank');
                }
            },

        }
    }
</script>
@endif