@php
    $afiaGreeting = "Hi, I'm Afia 👋 Ask me about storefronts — creating one, accepting orders, payouts, or the 9% platform fee…";
    $afiaSuggestions = [
        'How do I create a storefront?',
        'How do supporters give online?',
        'When do payouts reach my wallet?',
        'What is the platform fee?',
    ];
@endphp
{{-- Afia — Ladill AI assistant slide-over. Opened via $dispatch('afia-open'). --}}
<div x-data="afia({
    chatUrl: '{{ route('merchant.afia.chat') }}',
    csrf: '{{ csrf_token() }}',
    greeting: @js($afiaGreeting),
    suggestions: @js($afiaSuggestions),
})">
    <div x-show="open" x-cloak @click="close()" class="fixed inset-0 z-50 bg-slate-900/20"></div>

    <section x-show="open" x-cloak
             x-transition:enter="transition transform ease-out duration-200"
             x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
             x-transition:leave="transition transform ease-in duration-150"
             x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
             class="fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col bg-white shadow-2xl">
        <div class="flex items-center justify-between border-b border-slate-100 px-5 py-3.5">
            <div class="flex items-center gap-2.5">
                <span class="relative flex h-8 w-8 shrink-0 items-center justify-center">
                    <svg viewBox="0 0 36 36" class="h-8 w-8" aria-hidden="true">
                        <defs>
                            <radialGradient id="afia-orb" cx="40%" cy="35%" r="60%">
                                <stop offset="0%" stop-color="#a5b4fc"/>
                                <stop offset="50%" stop-color="#6366f1"/>
                                <stop offset="100%" stop-color="#3730a3"/>
                            </radialGradient>
                        </defs>
                        <circle cx="18" cy="18" r="14" fill="url(#afia-orb)">
                            <animate attributeName="r" values="14;14.8;14" dur="3s" repeatCount="indefinite"/>
                        </circle>
                        <circle cx="18" cy="18" r="11" fill="none" stroke="#c7d2fe" stroke-width=".6" opacity=".5">
                            <animate attributeName="r" values="11;12.5;11" dur="4s" repeatCount="indefinite"/>
                            <animate attributeName="opacity" values=".5;.15;.5" dur="4s" repeatCount="indefinite"/>
                        </circle>
                        <circle r="1.2" fill="#c7d2fe" opacity=".8">
                            <animateMotion dur="3s" repeatCount="indefinite" path="M18,8 A10,10 0 1,1 17.99,8" rotate="auto"/>
                        </circle>
                    </svg>
                    <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-white bg-emerald-400"></span>
                </span>
                <div class="leading-tight">
                    <p class="text-sm font-semibold text-slate-900">Afia</p>
                    <p class="text-[11px] text-slate-400">Merchant assistant</p>
                </div>
            </div>
            <div class="flex items-center gap-1">
                <a href="{{ ladill_account_url('ai') }}"
                   class="rounded-lg px-2 py-1 text-[11px] font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-700"
                   title="AI usage history on your Ladill account">History</a>
                <button @click="close()" class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 hover:text-slate-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
                </button>
            </div>
        </div>

        <div class="flex-1 overflow-y-auto px-4 py-4" x-ref="scroll">
            <div class="space-y-3">
                <template x-for="(m, i) in messages" :key="i">
                    <div class="flex" :class="m.role === 'user' ? 'justify-end' : 'justify-start'">
                        <div class="max-w-[85%] whitespace-pre-line rounded-2xl px-3.5 py-2.5 text-[13px] leading-relaxed"
                             :class="m.role === 'user' ? 'bg-indigo-600 text-white rounded-br-md' : 'bg-slate-100 text-slate-700 rounded-bl-md'"
                             x-html="m.text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\*\*([^*]+?)\*\*/g,'<strong>$1</strong>')"></div>
                    </div>
                </template>
                <div x-show="loading" class="flex justify-start">
                    <div class="rounded-2xl rounded-bl-md bg-slate-100 px-4 py-3">
                        <div class="flex gap-1">
                            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" style="animation-delay:0ms"></span>
                            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" style="animation-delay:150ms"></span>
                            <span class="h-1.5 w-1.5 animate-bounce rounded-full bg-slate-400" style="animation-delay:300ms"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div x-show="messages.length <= 1 && suggestions.length" class="mt-4 space-y-2">
                <template x-for="s in suggestions" :key="s">
                    <button @click="useSuggestion(s)" :disabled="loading"
                            class="flex w-full items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-left text-[13px] font-medium text-slate-700 transition hover:border-indigo-200 hover:bg-indigo-50 disabled:opacity-50">
                        <span class="text-indigo-400">→</span><span x-text="s"></span>
                    </button>
                </template>
            </div>
        </div>

        <div class="border-t border-slate-100 px-4 pb-4 pt-3">
            <form @submit.prevent="send()" class="flex items-end gap-2">
                <input type="text" x-ref="input" x-model="input" :disabled="loading" placeholder="Message Afia…"
                       class="flex-1 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                <button type="submit" :disabled="loading || !input.trim()"
                        class="btn-fab shrink-0 disabled:opacity-40">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"/></svg>
                </button>
            </form>
            <p class="mt-2 text-center text-[10px] text-slate-400">Afia can make mistakes — verify important details.</p>
        </div>
    </section>
</div>