{{-- =========================================================
   SriCourier AI Chatbot
   ========================================================= --}}

<!-- Alpine.js (load once in layout if possible) -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="chatBot()" x-init="autoOpen()" class="fixed bottom-6 right-6 z-50">

    <!-- ================= CHATBOT FLOAT BUTTON ================= -->
    <button @click="toggle"
        class="bg-primary text-white w-14 h-14 rounded-full shadow-xl
               flex items-center justify-center text-2xl
               hover:scale-110 active:scale-95 transition">
        🤖
    </button>

    <!-- ================= CHAT WINDOW ================= -->
    <div x-show="open" x-transition
         class="fixed bottom-24 right-6 w-80 max-w-[95%]
                bg-white rounded-2xl shadow-2xl overflow-hidden">

        <!-- Header -->
        <div class="bg-primary text-white p-4 flex justify-between items-center">
            <div>
                <p class="font-semibold leading-tight">SriCourier AI Assistant</p>
                <p class="text-xs text-white/80">Online • Ready to help</p>
            </div>
            <button @click="toggle" class="text-lg">✖</button>
        </div>

        <!-- Messages -->
        <div class="p-4 space-y-4 h-72 overflow-y-auto bg-gray-50">

            <template x-for="msg in messages" :key="msg.id">
                <div :class="msg.me ? 'flex justify-end' : 'flex gap-2'">

                    <!-- Bot avatar -->
                    <template x-if="!msg.me">
                        <div class="w-7 h-7 bg-primary text-white rounded-full
                                    flex items-center justify-center text-sm">
                            🤖
                        </div>
                    </template>

                    <!-- Bubble -->
                    <div class="px-4 py-2 rounded-xl text-sm max-w-[80%]"
                         :class="msg.me
                            ? 'bg-primary text-white'
                            : 'bg-white shadow'">
                        <span x-html="msg.text"></span>
                    </div>
                </div>
            </template>

            <!-- Typing indicator -->
            <template x-if="typing">
                <div class="text-xs italic text-gray-400">
                    SriCourier AI is typing…
                </div>
            </template>

        </div>

        <!-- Quick Options -->
        <div class="px-4 pb-3" x-show="showOptions">
            <div class="flex flex-wrap gap-2">
                <template x-for="opt in options" :key="opt.text">
                    <button
                        @click="selectOption(opt.text)"
                        class="px-3 py-1 rounded-full text-xs
                               bg-gray-100 hover:bg-primary hover:text-white
                               transition">
                        <span x-text="opt.icon"></span>
                        <span x-text="opt.text"></span>
                    </button>
                </template>
            </div>
        </div>

        <!-- Input -->
        <div class="border-t p-3 flex gap-2 bg-white">
            <input x-model="input"
                   @keydown.enter="send"
                   class="flex-1 px-3 py-2 rounded-xl border text-sm
                          focus:outline-none focus:ring-2 focus:ring-primary"
                   placeholder="Ask me something…" />

            <button @click="send"
                class="bg-primary text-white px-4 rounded-xl
                       hover:bg-orange-600 transition">
                ➤
            </button>
        </div>

    </div>
</div>

{{-- ================= CHATBOT LOGIC ================= --}}
@push('scripts')
<script>
function chatBot() {
    return {
        open: false,
        input: '',
        typing: false,
        showOptions: true,

        messages: [
            {
                id: 1,
                me: false,
                text: '👋 Hi! I’m <strong>SriCourier AI</strong>.<br>How can I help you today?'
            }
        ],

        options: [
            { text: 'Track parcel', icon: '📦' },
            { text: 'Pricing & COD', icon: '💰' },
            { text: 'Become a merchant', icon: '🏪' },
            { text: 'Become a driver', icon: '🚛' },
            { text: 'AI insights', icon: '🧠' }
        ],

        toggle() {
            this.open = !this.open;
        },

        autoOpen() {
            // Auto-open on tracking page
            if (window.location.pathname.includes('track')) {
                this.open = true;
            }
        },

        selectOption(text) {
            this.input = text;
            this.send();
        },

        send() {
            if (!this.input.trim()) return;

            const text = this.input;
            this.messages.push({ id: Date.now(), me: true, text });
            this.input = '';
            this.typing = true;
            this.showOptions = false;

            const lower = text.toLowerCase();

            // Track parcel shortcut
            if (lower.includes('track')) {
                setTimeout(() => {
                    this.typing = false;
                    this.messages.push({
                        id: Date.now(),
                        me: false,
                        text: `📦 Track your parcel here:<br>
                               <a href="{{ route('track') }}"
                               class="text-primary underline">
                               Open Tracking Page</a>`
                    });
                }, 700);
                return;
            }

            // Merchant
            if (lower.includes('merchant')) {
                setTimeout(() => {
                    this.typing = false;
                    this.messages.push({
                        id: Date.now(),
                        me: false,
                        text: `🏪 Start shipping smarter.<br>
                               <a href="{{ route('merchant.register') }}"
                               class="text-primary underline">
                               Become a Merchant</a>`
                    });
                }, 700);
                return;
            }

            // Driver
            if (lower.includes('driver')) {
                setTimeout(() => {
                    this.typing = false;
                    this.messages.push({
                        id: Date.now(),
                        me: false,
                        text: `🚛 Earn with flexible deliveries.<br>
                               <a href="{{ route('driver.register') }}"
                               class="text-primary underline">
                               Join as Driver</a>`
                    });
                }, 700);
                return;
            }

            // AI backend (OpenAI-ready)
            fetch('/chatbot/ai', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ message: text })
            })
            .then(r => r.json())
            .then(res => {
                this.typing = false;
                this.messages.push({
                    id: Date.now(),
                    me: false,
                    text: res.reply
                });
            })
            .catch(() => {
                this.typing = false;
                this.messages.push({
                    id: Date.now(),
                    me: false,
                    text: '⚠️ Sorry, something went wrong. Please try again.'
                });
            });
        }
    }
}
</script>
@endpush