@php
    $whatsapp = \App\Models\SiteSetting::where('key', 'social_whatsapp')->value('value');
    $cleanWhatsapp = preg_replace('/[^0-9]/', '', $whatsapp);
    $siteName = \App\Models\SiteSetting::where('key', 'site_name')->value('value') ?? 'OneHost BD';

    // 5 Support Members
    $agents = [
        ['name' => 'Arif Hossain', 'img' => 'https://i.pravatar.cc/150?u=arif', 'role' => 'Senior Support'],
        ['name' => 'Tania Akter', 'img' => 'https://i.pravatar.cc/150?u=tania', 'role' => 'Account Manager'],
        ['name' => 'Rakib Ahmed', 'img' => 'https://i.pravatar.cc/150?u=rakib', 'role' => 'Technical Support'],
        ['name' => 'Shuvo Khan', 'img' => 'https://i.pravatar.cc/150?u=shuvo', 'role' => 'Hosting Expert'],
        ['name' => 'Samiul Islam', 'img' => 'https://i.pravatar.cc/150?u=sami', 'role' => 'Customer Success'],
    ];
    $randomAgent = $agents[array_rand($agents)];
@endphp

@if($whatsapp)
    <div x-data="chatbot()" class="whatsapp-wrapper"
        @open-whatsapp-chat.window="open = true; $nextTick(() => { $refs.messageInput.focus(); scrollChat(); })"
        style="position: fixed; bottom: 30px; right: 30px; z-index: 9999999999 !important;">

        <!-- Chat Window -->
        <div x-show="open" x-cloak x-transition:enter="wp-fade-in-up" x-transition:leave="wp-fade-out-down"
            class="whatsapp-chat-box"
            style="position: absolute; bottom: 95px; right: 0; width: 340px; height: 500px; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05); display: flex !important; flex-direction: column !important; max-height: calc(100vh - 120px);">

            <!-- Header -->
            <div
                style="background: #25D366; color: white; padding: 20px; display: flex; align-items: center; gap: 15px; flex: 0 0 auto; position: relative;">
                <div style="position: relative;">
                    <div
                        style="width: 52px; height: 52px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid rgba(255,255,255,0.4);">
                        <img src="{{ $randomAgent['img'] }}" alt="{{ $randomAgent['name'] }}"
                            style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div
                        style="position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4ADE80; border: 2px solid white; border-radius: 50%;">
                    </div>
                </div>
                <div style="flex: 1;">
                    <h4 style="margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.2px;">
                        {{ $randomAgent['name'] }}
                    </h4>
                    <p style="margin: 4px 0 0 0; font-size: 12px; opacity: 0.9; font-weight: 500;">
                        {{ $randomAgent['role'] }} • Online
                    </p>
                </div>
                <button @click="open = false"
                    style="background: rgba(255,255,255,0.2); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;">
                    <i class="fas fa-times" style="font-size: 16px;"></i>
                </button>
            </div>

            <!-- Body (Messages Area) -->
            <div x-ref="chatBody"
                style="flex: 1 1 auto;padding: 20px;background: #e5ddd5;overflow-y: auto;background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');background-size: contain;display: flex;flex-direction: column;gap: 12px;height: 225px;">

                <!-- Message History -->
                <template x-for="(msg, index) in messages" :key="index">
                    <div :class="msg.sender === 'user' ? 'msg-user' : 'msg-bot'"
                        style="max-width: 90%; align-self: flex-start; position: relative;">
                        <div :style="msg.sender === 'user' 
                                 ? 'background: #dcf8c6; color: #1e293b; border-radius: 15px 15px 0 15px; padding: 12px 16px; margin-left: auto; box-shadow: 0 1px 1px rgba(0,0,0,0.1); font-size: 14px; line-height: 1.5; white-space: pre-wrap;' 
                                 : 'background: white; color: #1e293b; border-radius: 12px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); font-size: 14px; line-height: 1.5; white-space: pre-wrap;'"
                            x-html="msg.text">
                        </div>
                        <div :style="msg.sender === 'user' ? 'text-align: right;' : 'text-align: right;'"
                            style="font-size: 10px; color: #94a3b8; margin: 4px 5px 0 0; font-weight: 600;"
                            x-text="msg.time">
                        </div>
                    </div>
                </template>
            </div>

            <!-- Footer (Input Area) -->
            <div style="padding: 15px 20px 10px 20px; background: white; flex: 0 0 auto;">
                <div style="display: flex; flex-direction: column; gap: 15px; width: 100%;">
                    <textarea x-model="userInput" x-ref="messageInput" @keydown.enter.prevent="sendMessage()"
                        placeholder="Type your message here..."
                        style="width: 100%; min-height: 80px; max-height: 120px; border: 1px solid #25D366; border-radius: 12px; padding: 15px; font-size: 14px; resize: none; outline: none; transition: all 0.2s; color: #334155 !important; background: #ffffff !important; line-height: 1.5; margin: 0; box-sizing: border-box;"></textarea>

                    <button @click="sendMessage()"
                        style="width: 100%; height: 50px; background: #25D366; color: white; border: none; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s; font-weight: 700; font-size: 16px; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);"
                        onmouseover="this.style.background='#1cad51'; this.style.transform='translateY(-1px)'"
                        onmouseout="this.style.background='#25D366'; this.style.transform='translateY(0)'">
                        Chat on WhatsApp <i class="fab fa-whatsapp" style="font-size: 20px;"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Floating Bubble -->
        <button @click="open = !open; if(open) { $nextTick(() => { $refs.messageInput.focus(); scrollChat(); }) }"
            class="whatsapp-bubble"
            style="display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #25D366; color: white; border-radius: 50%; border: none; cursor: pointer; position: relative; box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 0;">

            <!-- WhatsApp Icon (Shown when closed) -->
            <i class="fab fa-whatsapp" x-show="!open" style="font-size: 32px; color: white;"></i>

            <!-- Close Icon (Shown when open) -->
            <i class="fas fa-times" x-show="open" style="font-size: 24px; color: white; display: none;"
                :style="open ? 'display: block' : 'display: none'"></i>

            <!-- Pulse Effect -->
            <div x-show="!open" class="whatsapp-pulse"></div>
        </button>
    </div>

    <script>
        function chatbot() {
            return {
                open: false,
                userInput: '',
                messages: [
                    {
                        sender: 'bot',
                        text: 'Hello! I am <strong>{{ explode(' ', $randomAgent['name'])[0] }}</strong> from OneHost BD Support. 👋<br><br>How can I help you today?',
                        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
                    }
                ],

                init() {
                    this.$watch('messages', () => this.scrollChat());
                    this.$nextTick(() => this.scrollChat());
                },

                sendMessage() {
                    if (!this.userInput.trim()) return;

                    const text = this.userInput.trim();

                    // Add user message to UI
                    this.messages.push({
                        sender: 'user',
                        text: text,
                        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
                    });

                    // Construct WhatsApp URL
                    const whatsappUrl = `https://wa.me/{{ $cleanWhatsapp }}?text=${encodeURIComponent(text)}`;

                    // Open in a new tab
                    window.open(whatsappUrl, '_blank');

                    // Clear input
                    this.userInput = '';
                },

                scrollChat() {
                    this.$nextTick(() => {
                        const body = this.$refs.chatBody;
                        if (body) {
                            body.scrollTo({
                                top: body.scrollHeight,
                                behavior: 'smooth'
                            });
                        }
                    });
                }
            }
        }
    </script>

    <style>
        [x-cloak] {
            display: none !important;
        }

        .msg-user {
            margin-left: auto;
        }

        .msg-bot {
            margin-right: auto;
        }

        @keyframes dot-bounce {

            0%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-6px);
            }
        }

        .wp-fade-in-up {
            animation: wp-slideIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

        .wp-fade-out-down {
            animation: wp-slideOut 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

        @keyframes wp-slideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(40px);
            }

            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes wp-slideOut {
            from {
                opacity: 1;
                transform: scale(1) translateY(0);
            }

            to {
                opacity: 0;
                transform: scale(0.9) translateY(20px);
            }
        }

        .whatsapp-pulse {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-color: #25D366;
            animation: wp-ping 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
            opacity: 0.5;
            z-index: -1;
        }

        @keyframes wp-ping {

            75%,
            100% {
                transform: scale(2.2);
                opacity: 0;
            }
        }

        @keyframes wp-bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-6px);
            }
        }

        .whatsapp-bubble:not(.open) i.fab.fa-whatsapp {
            animation: wp-bounce 2.5s infinite ease-in-out;
        }
    </style>
@endif