@extends('layouts.app')

@section('title', 'المحاسب الذكي')
@section('page_title', 'مساعد التحليل المحاسبي الذكي')

@section('content')
<div class="space-y-8" x-data="assistantChat()">
    <!-- Assistant Intro Card -->
    <div class="bg-gradient-to-r from-primary-700 via-primary-600 to-indigo-700 rounded-3xl p-6 md:p-8 text-white relative overflow-hidden shadow-lg border border-primary-600">
        <div class="absolute -top-24 -left-24 w-60 h-60 bg-white/5 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-24 -right-24 w-60 h-60 bg-emerald-500/10 rounded-full blur-3xl"></div>
        
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative">
            <div class="space-y-3.5">
                <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md px-3.5 py-1.5 rounded-full text-xs font-bold border border-white/20">
                    <i class="fa-solid fa-brain text-secondary-500"></i> خوارزمية ذكاء الأعمال المدمجة
                </div>
                <h2 class="text-xl md:text-2xl font-extrabold">المحاسب المالي الذكي (مساعد المحادثة التفاعلي)</h2>
                <p class="text-xs text-slate-200 leading-relaxed max-w-xl">يقوم المحاسب الذكي بفحص ميزان المراجعة وحركة المخزون ومديونيات العملاء باستمرار، وتحليل معدلات النمو تلقائياً وتقديم الإجابات الفورية عن أداء شركتك المالي.</p>
            </div>
            <div class="h-24 w-24 bg-white/10 rounded-3xl flex items-center justify-center text-4xl text-secondary-500 border border-white/10 shadow-inner self-start md:self-center">
                <i class="fa-solid fa-robot animate-pulse"></i>
            </div>
        </div>
    </div>

    <!-- Chat & Live Stats Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Interactive AI Chat Panel (2 Cols) -->
        <div class="lg:col-span-2 flex flex-col bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden h-[600px]">
            <!-- Header -->
            <div class="px-6 py-4 border-b border-slate-100 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/30 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="h-3 w-3 rounded-full bg-secondary-500 animate-ping"></div>
                    <span class="font-extrabold text-sm text-slate-700 dark:text-slate-200">الدردشة التفاعلية مع المحاسب الذكي</span>
                </div>
                <button @click="clearChat" class="text-xs text-slate-400 hover:text-red-500 transition-colors flex items-center gap-1">
                    <i class="fa-solid fa-trash-can"></i> مسح المحادثة
                </button>
            </div>

            <!-- Messages Container -->
            <div class="flex-1 overflow-y-auto p-6 space-y-4" id="chat-messages-box">
                <!-- Welcome Message -->
                <div class="flex items-start gap-3.5 max-w-[85%]">
                    <div class="h-9 w-9 rounded-2xl bg-secondary-500/10 text-secondary-600 dark:text-secondary-400 flex items-center justify-center text-sm border border-secondary-500/20 shrink-0">
                        <i class="fa-solid fa-robot"></i>
                    </div>
                    <div class="p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-100 dark:border-slate-700 text-xs text-slate-700 dark:text-slate-200 space-y-2 leading-relaxed">
                        <p class="font-semibold text-slate-800 dark:text-white">أهلاً بك! أنا محاسبك الذكي.</p>
                        <p>يمكنني إجابتك على أي أسئلة مالية حول مبيعاتك، المصاريف، الأرباح، أرصدة الخزينة والبنك، مديونيات العملاء والمنتجات الراكدة. جرب النقر على أحد الأسئلة المقترحة أدناه أو اكتب سؤالك مباشرة.</p>
                    </div>
                </div>

                <!-- Live Message List -->
                <template x-for="(msg, index) in messages" :key="index">
                    <div class="flex items-start gap-3.5" :class="msg.sender === 'user' ? 'justify-end' : ''">
                        <!-- Icon for Assistant -->
                        <template x-if="msg.sender === 'assistant'">
                            <div class="h-9 w-9 rounded-2xl bg-secondary-500/10 text-secondary-600 dark:text-secondary-400 flex items-center justify-center text-sm border border-secondary-500/20 shrink-0">
                                <i class="fa-solid fa-robot"></i>
                            </div>
                        </template>

                        <!-- Content Body -->
                        <div class="p-4 rounded-2xl border max-w-[80%] text-xs leading-relaxed" 
                             :class="msg.sender === 'user' 
                                ? 'bg-primary-600 border-primary-500 text-white rounded-tl-none font-medium' 
                                : 'bg-slate-50 dark:bg-slate-700/50 border-slate-100 dark:border-slate-700 text-slate-700 dark:text-slate-200 rounded-tr-none'">
                            <p class="whitespace-pre-line" x-text="msg.text"></p>
                            <!-- Custom HTML block (for tables and lists) -->
                            <template x-if="msg.html">
                                <div class="mt-2" x-html="msg.html"></div>
                            </template>
                        </div>
                    </div>
                </template>

                <!-- Loading Message -->
                <div x-show="loading" class="flex items-start gap-3.5">
                    <div class="h-9 w-9 rounded-2xl bg-secondary-500/10 text-secondary-600 dark:text-secondary-400 flex items-center justify-center text-sm border border-secondary-500/20 shrink-0">
                        <i class="fa-solid fa-spinner animate-spin"></i>
                    </div>
                    <div class="p-4 bg-slate-50 dark:bg-slate-700/50 rounded-2xl border border-slate-100 dark:border-slate-700 text-xs text-slate-400">
                        جاري فحص الدفاتر والقيود وحساب النتائج المحدثة...
                    </div>
                </div>
            </div>

            <!-- Pre-defined Suggested Questions Pills Grouped by Module -->
            <div class="px-6 py-3 border-t border-slate-100 dark:border-slate-700/50 bg-slate-50/50 dark:bg-slate-900/10 space-y-3" x-data="{ activeTab: 'accounting' }">
                <!-- Tab Headers -->
                <div class="flex items-center gap-1.5 overflow-x-auto pb-1 border-b border-slate-200 dark:border-slate-700 scrollbar-none">
                    <button type="button" @click="activeTab = 'accounting'" :class="activeTab === 'accounting' ? 'text-primary-600 dark:text-primary-400 border-primary-500 dark:border-primary-400 bg-primary-50/30' : 'text-slate-400 border-transparent hover:text-slate-600 dark:hover:text-slate-300'" class="px-3 py-1.5 text-[10px] font-bold border-b-2 transition-all flex items-center gap-1 shrink-0 rounded-t-lg">
                        <i class="fa-solid fa-calculator"></i> الحسابات والمبيعات
                    </button>
                    <button type="button" @click="activeTab = 'inventory'" :class="activeTab === 'inventory' ? 'text-primary-600 dark:text-primary-400 border-primary-500 dark:border-primary-400 bg-primary-50/30' : 'text-slate-400 border-transparent hover:text-slate-600 dark:hover:text-slate-300'" class="px-3 py-1.5 text-[10px] font-bold border-b-2 transition-all flex items-center gap-1 shrink-0 rounded-t-lg">
                        <i class="fa-solid fa-boxes-stacked"></i> العملاء والمخازن
                    </button>
                    <button type="button" @click="activeTab = 'hr'" :class="activeTab === 'hr' ? 'text-primary-600 dark:text-primary-400 border-primary-500 dark:border-primary-400 bg-primary-50/30' : 'text-slate-400 border-transparent hover:text-slate-600 dark:hover:text-slate-300'" class="px-3 py-1.5 text-[10px] font-bold border-b-2 transition-all flex items-center gap-1 shrink-0 rounded-t-lg">
                        <i class="fa-solid fa-users"></i> الموارد والرواتب
                    </button>
                    <button type="button" @click="activeTab = 'system'" :class="activeTab === 'system' ? 'text-primary-600 dark:text-primary-400 border-primary-500 dark:border-primary-400 bg-primary-50/30' : 'text-slate-400 border-transparent hover:text-slate-600 dark:hover:text-slate-300'" class="px-3 py-1.5 text-[10px] font-bold border-b-2 transition-all flex items-center gap-1 shrink-0 rounded-t-lg">
                        <i class="fa-solid fa-gears"></i> النظام والأمان
                    </button>
                </div>

                <!-- Tab Contents -->
                <!-- Accounting & Sales -->
                <div x-show="activeTab === 'accounting'" class="flex flex-wrap gap-2">
                    <button type="button" @click="askSuggested('ما هي حالة المبيعات هذا الشهر؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-chart-line ml-1"></i> مبيعات هذا الشهر
                    </button>
                    <button type="button" @click="askSuggested('كم رصيد الخزينة والبنك حالياً؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-vault ml-1"></i> أرصدة الخزينة والبنك
                    </button>
                    <button type="button" @click="askSuggested('ما هو صافي الأرباح والأداء المالي؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-scale-balanced ml-1"></i> صافي الأرباح والأداء
                    </button>
                    <button type="button" @click="askSuggested('هل لدي قيود يومية؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-receipt ml-1"></i> أحدث قيود اليومية
                    </button>
                    <button type="button" @click="askSuggested('قائمة أسعار الأصناف والمنتجات')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-tags ml-1"></i> قائمة أسعار المنتجات
                    </button>
                </div>

                <!-- Customers & Inventory -->
                <div x-show="activeTab === 'inventory'" class="flex flex-wrap gap-2" style="display: none;">
                    <button type="button" @click="askSuggested('من هم العملاء المتأخرين في السداد؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-user-tag ml-1"></i> العملاء المتأخرين
                    </button>
                    <button type="button" @click="askSuggested('ما هي الأصناف الراكدة في المخزن؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-box-archive ml-1"></i> المخزون الراكد
                    </button>
                    <button type="button" @click="askSuggested('ما هي المنتجات التي قاربت على النفاد؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-triangle-exclamation ml-1"></i> سلع شارفت على النفاد
                    </button>
                </div>

                <!-- HR & Salaries -->
                <div x-show="activeTab === 'hr'" class="flex flex-wrap gap-2" style="display: none;">
                    <button type="button" @click="askSuggested('كم عدد الموظفين النشطين ورواتبهم؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-users ml-1"></i> الموظفون والرواتب
                    </button>
                    <button type="button" @click="askSuggested('حالة حضور وغياب الموظفين اليوم')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-clipboard-user ml-1"></i> حضور وغياب اليوم
                    </button>
                    <button type="button" @click="askSuggested('ما هي طلبات الإجازات المعلقة؟')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-calendar-day ml-1"></i> الإجازات المعلقة
                    </button>
                    <button type="button" @click="askSuggested('القروض والسلف النشطة للموظفين')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-hand-holding-dollar ml-1"></i> القروض والسلف القائمة
                    </button>
                </div>

                <!-- System & Security -->
                <div x-show="activeTab === 'system'" class="flex flex-wrap gap-2" style="display: none;">
                    <button type="button" @click="askSuggested('سجل الأنشطة والتدقيق المحاسبي')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-user-shield ml-1"></i> سجل الأنشطة والأمان
                    </button>
                    <button type="button" @click="askSuggested('حالة النسخ الاحتياطي وحماية البيانات')" class="px-3 py-1.5 bg-white dark:bg-slate-700 text-[10px] font-bold text-primary-600 dark:text-primary-400 rounded-xl hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all border border-slate-200 dark:border-slate-600 shadow-sm cursor-pointer">
                        <i class="fa-solid fa-shield-halved ml-1"></i> النسخ الاحتياطي والترخيص
                    </button>
                </div>
            </div>

            <!-- Input Bar -->
            <div class="p-4 border-t border-slate-100 dark:border-slate-700/80 bg-slate-50 dark:bg-slate-900/20">
                <form @submit.prevent="sendQuery" class="flex gap-3">
                    <input type="text" x-model="userInput" placeholder="اسأل المحاسب الذكي شيئاً مثل: 'كم رصيد الصندوق والبنك؟' أو اكتب 'مساعدة'..." 
                           class="flex-1 px-4 py-3 bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 rounded-2xl text-xs focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-500 outline-none text-slate-800 dark:text-white"
                           :disabled="loading">
                    <button type="submit" class="px-5 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-2xl font-bold text-xs transition-colors flex items-center gap-1.5 shadow-sm"
                            :disabled="loading || !userInput.trim()">
                        <i class="fa-solid fa-paper-plane"></i> إرسال
                    </button>
                </form>
            </div>
        </div>

        <!-- Sidebar Advisories & Critical Health Stats (1 Col) -->
        <div class="space-y-6">
            <!-- AI Financial Insights -->
            <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-5">
                <h3 class="font-extrabold text-sm text-slate-800 dark:text-white"><i class="fa-solid fa-lightbulb text-secondary-500 ml-2"></i>التوصيات والتحذيرات المالية</h3>
                <div class="space-y-4">
                    @foreach($insights as $ins)
                        <div class="p-4 rounded-2xl border flex gap-3.5 {{ $ins['type'] === 'danger' ? 'bg-red-50/60 border-red-100 text-red-900 dark:bg-red-950/20 dark:border-red-900/40 dark:text-red-300' : ($ins['type'] === 'warning' ? 'bg-amber-50/60 border-amber-100 text-amber-900 dark:bg-amber-950/20 dark:border-amber-900/40 dark:text-amber-300' : 'bg-blue-50/60 border-blue-100 text-blue-900 dark:bg-blue-950/20 dark:border-blue-900/40 dark:text-blue-300') }}">
                            <div class="text-lg">
                                @if($ins['type'] === 'danger')
                                    <i class="fa-solid fa-circle-radiation"></i>
                                @elseif($ins['type'] === 'warning')
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                @else
                                    <i class="fa-solid fa-circle-info"></i>
                                @endif
                            </div>
                            <div class="space-y-1">
                                <h4 class="font-bold text-xs">{{ $ins['title'] }}</h4>
                                <p class="text-[11px] leading-relaxed opacity-90">{{ $ins['description'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Stagnant products list -->
            <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-5">
                <h3 class="font-extrabold text-sm text-slate-800 dark:text-white"><i class="fa-solid fa-boxes-stacked text-primary-500 ml-2"></i>السلع الراكدة (لم تبع منذ 30 يوماً)</h3>
                <div class="space-y-3">
                    @forelse($stagnantProducts as $p)
                        <div class="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-700/30 border border-slate-100 dark:border-slate-600/30 rounded-2xl">
                            <div>
                                <span class="font-bold text-xs text-slate-800 dark:text-white">{{ $p->name }}</span>
                                <span class="text-[10px] text-slate-400 block mt-0.5">رمز: {{ $p->code }}</span>
                            </div>
                            <div class="text-left">
                                <span class="text-xs font-bold text-slate-700 dark:text-slate-300 font-mono">{{ number_format($p->stock_quantity, 0) }}</span>
                                <span class="text-[9px] text-amber-600 block mt-0.5">راكد</span>
                            </div>
                        </div>
                    @empty
                        <p class="text-slate-400 text-xs text-center py-6">حركة مخزونية ممتازة بجميع الفئات!</p>
                    @endforelse
                </div>
            </div>
        </div>

    </div>

    <!-- Supplementary Statistics Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Top Products sales -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-5">
            <h3 class="font-extrabold text-sm text-slate-800 dark:text-white"><i class="fa-solid fa-fire text-orange-500 ml-2"></i>السلع الأكثر رواجاً وطلباً</h3>
            <div class="overflow-x-auto rounded-2xl border border-slate-100 dark:border-slate-700/40">
                <table class="w-full text-right text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 font-bold border-b border-slate-100 dark:border-slate-700/40">
                        <tr>
                            <th class="p-3.5">المنتج</th>
                            <th class="p-3.5 text-center">الكمية المباعة</th>
                            <th class="p-3.5 text-left">صافي الإيراد</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/40 text-slate-700 dark:text-slate-200">
                        @forelse($topProducts as $item)
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20">
                                <td class="p-3.5 font-bold">{{ $item->product->name }}</td>
                                <td class="p-3.5 text-center font-mono font-semibold">{{ number_format($item->total_qty, 0) }}</td>
                                <td class="p-3.5 text-left font-mono font-bold text-emerald-600">{{ number_format($item->total_revenue, 2) }} ر.س</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="p-8 text-center text-slate-400">لا توجد مبيعات مسجلة حتى الآن.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top customers purchase value -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm space-y-5">
            <h3 class="font-extrabold text-sm text-slate-800 dark:text-white"><i class="fa-solid fa-medal text-primary-500 ml-2"></i>كبار العملاء (الأعلى قيمة شرائية)</h3>
            <div class="overflow-x-auto rounded-2xl border border-slate-100 dark:border-slate-700/40">
                <table class="w-full text-right text-xs">
                    <thead class="bg-slate-50 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 font-bold border-b border-slate-100 dark:border-slate-700/40">
                        <tr>
                            <th class="p-3.5">العميل</th>
                            <th class="p-3.5 text-left">إجمالي المشتريات</th>
                            <th class="p-3.5 text-left">الرصيد المدين المتبقي</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700/40 text-slate-700 dark:text-slate-200">
                        @forelse($topCustomers as $item)
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-700/20">
                                <td class="p-3.5 font-bold">{{ $item->customer->name }}</td>
                                <td class="p-3.5 text-left font-mono font-bold text-indigo-500">{{ number_format($item->total_spent, 2) }} ر.س</td>
                                <td class="p-3.5 text-left font-mono text-slate-500">{{ number_format($item->customer->balance, 2) }} ر.س</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="p-8 text-center text-slate-400">لا توجد سجلات عملاء بعد.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    function assistantChat() {
        return {
            userInput: '',
            loading: false,
            messages: [],
            
            clearChat() {
                this.messages = [];
                localStorage.removeItem('assistant_chat_history');
            },

            init() {
                // Restore history if exists
                const saved = localStorage.getItem('assistant_chat_history');
                if (saved) {
                    this.messages = JSON.parse(saved);
                }
                this.scrollToBottom();
            },

            scrollToBottom() {
                this.$nextTick(() => {
                    const box = document.getElementById('chat-messages-box');
                    if (box) {
                        box.scrollTop = box.scrollHeight;
                    }
                });
            },

            askSuggested(text) {
                this.userInput = text;
                this.sendQuery();
            },

            sendQuery() {
                const text = this.userInput.trim();
                if (!text || this.loading) return;

                // 1. Add user message
                this.messages.push({
                    sender: 'user',
                    text: text
                });
                this.userInput = '';
                this.loading = true;
                this.scrollToBottom();

                // 2. Fetch answer
                fetch('{{ route('assistant.ask') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ message: text })
                })
                .then(res => res.json())
                .then(data => {
                    this.messages.push({
                        sender: 'assistant',
                        text: data.response,
                        html: data.html || null
                    });
                    localStorage.setItem('assistant_chat_history', JSON.stringify(this.messages));
                })
                .catch(err => {
                    this.messages.push({
                        sender: 'assistant',
                        text: 'عذراً، حدث خطأ أثناء الاتصال بالنظام المحاسبي الذكي. يرجى التحقق من اتصالك بالشبكة.'
                    });
                })
                .finally(() => {
                    this.loading = false;
                    this.scrollToBottom();
                });
            }
        };
    }

    // Global accessibility handler to trigger from clicked suggested questions inside chat boxes
    function askQuestion(text) {
        const chatEl = document.querySelector('[x-data="assistantChat()"]');
        if (chatEl && chatEl.__x) {
            chatEl.__x.$data.askSuggested(text);
        }
    }
</script>
@endsection