@extends('layouts.admin')

@section('title', 'مدیریت هوش مصنوعی رام')

@section('content')
<div class="mb-6 flex flex-wrap justify-between items-center gap-4">
    <div>
        <h2 class="text-xl font-bold text-gray-800">🤖 مدیریت هوش مصنوعی رام (Botify)</h2>
        <p class="text-xs text-gray-500 mt-1">تنظیمات، پایگاه دانش دسته‌بندی‌شده و مدیریت گفتگوهای دستیار هوشمند رام بات</p>
    </div>
    
    <!-- Top-level Navigation Tabs -->
    <div class="flex bg-gray-100 p-1.5 rounded-xl border border-gray-200">
        <button onclick="switchMainTab('conversations')" id="tabBtn-conversations" class="main-tab-btn active px-4 py-2 text-xs font-bold rounded-lg transition duration-200">
            💬 گفتگو با کاربران
        </button>
        <button onclick="switchMainTab('botify')" id="tabBtn-botify" class="main-tab-btn px-4 py-2 text-xs font-bold rounded-lg transition duration-200">
            🔧 تنظیمات باتیفای
        </button>
    </div>
</div>

<!-- ================= SECTION 1: CONVERSATIONS ================= -->
<div id="section-conversations" class="main-section grid grid-cols-1 lg:grid-cols-4 gap-6 h-[calc(100vh-230px)]">
    <!-- Chats Sidebar -->
    <div class="lg:col-span-1 bg-white rounded-xl shadow-sm overflow-hidden flex flex-col h-full border border-gray-100">
        <div class="p-4 border-b border-gray-100 bg-gray-50 flex flex-col gap-3">
            <h3 class="font-bold text-gray-700 text-sm">💬 گفتگوهای اخیر</h3>
            <!-- Filter buttons -->
            <div class="flex gap-2">
                <a href="{{ route('admin.aichat.index', ['filter' => 'all']) }}" 
                   class="flex-1 text-center py-1.5 text-[10px] font-bold rounded-lg transition {{ $filter === 'all' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                    همه گفتگوها
                </a>
                <a href="{{ route('admin.aichat.index', ['filter' => 'unanswered']) }}" 
                   class="flex-1 text-center py-1.5 text-[10px] font-bold rounded-lg transition relative {{ $filter === 'unanswered' ? 'bg-red-600 text-white' : 'bg-gray-100 text-red-600 hover:bg-red-50' }}">
                    پاسخ داده نشده
                </a>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto divide-y divide-gray-100">
            @forelse ($activeChats as $chat)
                <a href="{{ route('admin.aichat.index', ['chat_id' => $chat->chat_id, 'filter' => $filter]) }}" 
                   class="flex flex-col gap-1 p-4 hover:bg-blue-50/50 transition border-r-4 {{ $selectedChatId == $chat->chat_id ? 'bg-blue-50/50 border-blue-600' : 'border-transparent' }}">
                    <div class="flex justify-between items-center">
                        <span class="font-bold text-gray-800 text-xs">{{ $chat->first_name }} {{ $chat->last_name }}</span>
                        <span class="text-[9px] text-gray-400 font-mono">
                            {{ $chat->last_message_time ? \Carbon\Carbon::parse($chat->last_message_time)->diffForHumans() : '' }}
                        </span>
                    </div>
                    <div class="flex justify-between items-center mt-0.5">
                        @if($chat->username)
                            <span class="text-[10px] text-blue-500 font-mono">@ {{ $chat->username }}</span>
                        @else
                            <span class="text-[9px] text-gray-400 font-mono">{{ $chat->chat_id }}</span>
                        @endif
                        @if($chat->last_message_role === 'user')
                            <span class="w-2.5 h-2.5 rounded-full bg-red-500" title="پاسخ داده نشده"></span>
                        @endif
                    </div>
                    <p class="text-[11px] text-gray-500 truncate mt-1.5">{{ $chat->last_message }}</p>
                </a>
            @empty
                <div class="text-center p-8 text-gray-400 text-xs">هیچ گفتگویی یافت نشد.</div>
            @endforelse
        </div>
    </div>

    <!-- Active Chat Panel -->
    <div class="lg:col-span-3 bg-white rounded-xl shadow-sm overflow-hidden flex flex-col h-full border border-gray-100">
        @if ($selectedChatId && $selectedUser)
            <!-- Chat Header -->
            <div class="p-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <!-- User Avatar -->
                    <div class="w-10 h-10 rounded-full overflow-hidden border border-gray-200/60 bg-gray-100 flex items-center justify-center flex-shrink-0">
                        <img src="{{ route('profile.photo', $selectedUser->chat_id) }}" alt="User" class="w-full h-full object-cover" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23ccc%22/%3E%3Ctext x=%2250%25%22 y=%2255%25%22 font-size=%2240%22 fill=%22%22 text-anchor=%22middle%22 dominant-baseline=%22central%22%3E👤%3C/text%3E%3C/svg%3E'">
                    </div>
                    <div>
                        <div class="flex items-center gap-2">
                            <h3 class="font-bold text-gray-800 text-sm">{{ $selectedUser->first_name }} {{ $selectedUser->last_name }}</h3>
                            @if($selectedUser->last_activity && \Carbon\Carbon::parse($selectedUser->last_activity)->gt(now()->subMinutes(5)))
                                <span class="text-[9px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">🟢 آنلاین در ربات</span>
                            @else
                                <span class="text-[9px] font-bold text-gray-400 bg-gray-100 px-1.5 py-0.5 rounded">⚫ آفلاین</span>
                            @endif
                        </div>
                        <span class="text-[10px] text-gray-500 font-mono">
                            شناسه چت: {{ $selectedChatId }} 
                            @if($selectedUser->username) | @ {{ $selectedUser->username }} @endif 
                            | آخرین فعالیت: {{ $selectedUser->last_activity ? \Carbon\Carbon::parse($selectedUser->last_activity)->diffForHumans() : 'نامشخص' }}
                        </span>
                    </div>
                </div>
                <div>
                    <form action="{{ route('admin.aichat.delete-chat', $selectedChatId) }}" method="POST" onsubmit="return confirm('⚠️ آیا مطمئن هستید که می‌خواهید کل گفتگوی این کاربر را حذف کنید؟ این عمل غیرقابل بازگشت است.');">
                        @csrf
                        <button type="submit" class="bg-red-50/50 text-red-600 hover:bg-red-100 border border-red-200 px-3.5 py-1.5 rounded-xl text-xs font-bold transition">
                            🗑️ حذف گفتگو
                        </button>
                    </form>
                </div>
            </div>

            <!-- Messages Thread -->
            <div class="flex-1 p-6 overflow-y-auto space-y-4 bg-gray-50/50">
                @foreach ($chatHistory as $msg)
                    <div class="flex gap-2.5 items-start {{ $msg->role === 'user' ? 'justify-start' : 'justify-end' }}">
                        @if($msg->role === 'user')
                            <!-- User Avatar Bubble -->
                            <div class="w-8 h-8 rounded-full overflow-hidden border border-gray-200/60 dark:border-gray-800 bg-gray-200 flex-shrink-0 flex items-center justify-center">
                                <img src="{{ route('profile.photo', $selectedUser->chat_id) }}" alt="User" class="w-full h-full object-cover" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23ccc%22/%3E%3Ctext x=%2250%25%22 y=%2255%25%22 font-size=%2240%22 fill=%22%22 text-anchor=%22middle%22 dominant-baseline=%22central%22%3E👤%3C/text%3E%3C/svg%3E'">
                            </div>
                        @endif

                        <div class="flex flex-col {{ $msg->role === 'user' ? 'items-start' : 'items-end' }} max-w-[70%]">
                            <div class="rounded-2xl p-4 shadow-sm text-xs leading-relaxed
                                @if($msg->role === 'user') 
                                    bg-white text-gray-800 border border-gray-100 rounded-tr-none dark:bg-gray-800 dark:text-gray-100 dark:border-gray-800
                                @else 
                                    bg-blue-600 text-white rounded-tl-none
                                @endif">
                                
                                @if($msg->message_type === 'text')
                                    <p class="whitespace-pre-line">{!! $msg->formatted_content !!}</p>
                                @elseif($msg->message_type === 'photo')
                                    <img src="{{ $msg->file_url }}" alt="Photo" class="rounded-lg max-h-60 mb-2">
                                    @if($msg->message_content)
                                        <p class="whitespace-pre-line">{!! $msg->formatted_content !!}</p>
                                    @endif
                                @endif
                            </div>
                            <span class="text-[9px] text-gray-400 mt-1 font-mono px-2">
                                {{ $msg->created_at }}
                            </span>
                        </div>

                        @if($msg->role === 'assistant')
                            <!-- Assistant Avatar Bubble -->
                            <div class="w-8 h-8 rounded-full overflow-hidden border border-blue-500/20 bg-gray-950 flex-shrink-0 flex items-center justify-center">
                                <img src="{{ asset('assets/images/Ramlogo.jpg') }}" alt="Bot" class="w-full h-full object-cover">
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Reply Input Box -->
            <div class="p-4 border-t border-gray-100 bg-white dark:bg-gray-900/50">
                <!-- Canned Responses Quick List -->
                @php
                    $cannedList = json_decode($botifySettings['botify_canned_responses'] ?? '[]', true) ?? [];
                @endphp
                @if(count($cannedList) > 0)
                    <div class="flex flex-wrap gap-2 mb-3 items-center">
                        <span class="text-[10px] text-gray-400 font-bold">💬 پاسخ‌های آماده سریع:</span>
                        @foreach($cannedList as $idx => $cr)
                            <button type="button" onclick="useCannedReply('{{ addslashes($cr['content'] ?? '') }}')" 
                                    class="text-[10px] bg-blue-50 text-blue-600 dark:bg-blue-900/40 dark:text-blue-400 border border-blue-100 dark:border-blue-800/40 px-2.5 py-1 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/60 transition duration-150">
                                💬 {{ $cr['title'] ?? 'پاسخ ' . ($idx + 1) }}
                            </button>
                        @endforeach
                    </div>
                @endif

                <form action="{{ route('admin.aichat.reply', $selectedChatId) }}" method="POST" class="flex gap-4">
                    @csrf
                    <input type="text" name="message" id="adminReplyInput" required autocomplete="off" 
                           class="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-xs focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" 
                           placeholder="پاسخ خود را بنویسید... (ارسال به تلگرام + دکمه شیشه ای ادامه در سایت)">
                    <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700 transition font-bold text-xs shadow-md">
                        🚀 ارسال
                    </button>
                </form>
            </div>
        @else
            <!-- Chat Empty State -->
            <div class="flex-1 flex flex-col items-center justify-center text-gray-400 p-8">
                <span class="text-6xl mb-4">💬</span>
                <p class="text-sm font-bold">یک گفتگو را برای مشاهده و پاسخ انتخاب کنید.</p>
                <p class="text-xs text-gray-400 mt-1">از لیست گفتگوهای سمت راست گفتگو با کاربران را مدیریت نمایید.</p>
            </div>
        @endif
    </div>
</div>

<!-- ================= SECTION 2: BOTIFY SETTINGS ================= -->
<div id="section-botify" class="main-section hidden bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col">
    <!-- Sub-tabs Navigation -->
    <div class="border-b border-gray-100 bg-gray-50 flex gap-6 px-6 overflow-x-auto">
        <button onclick="switchSubTab('sources')" id="subTabBtn-sources" class="sub-tab-btn active py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            📁 منابع دانش
        </button>
        <button onclick="switchSubTab('instructions')" id="subTabBtn-instructions" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            📝 دستورالعمل‌ها
        </button>
        <button onclick="switchSubTab('canned')" id="subTabBtn-canned" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            💬 پاسخ‌های آماده
        </button>
        <button onclick="switchSubTab('general')" id="subTabBtn-general" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            ⚙️ تنظیمات عمومی
        </button>
        <button onclick="switchSubTab('api')" id="subTabBtn-api" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            🔑 تنظیمات API
        </button>
        <button onclick="switchSubTab('reports')" id="subTabBtn-reports" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            📊 گزارش‌ها
        </button>
        <button onclick="switchSubTab('suggestions')" id="subTabBtn-suggestions" class="sub-tab-btn py-4 text-xs font-bold transition duration-200 border-b-2 border-transparent whitespace-nowrap">
            💡 پیشنهادات بهبود
        </button>
    </div>

    <!-- Forms/Tabs Content Container -->
    <div class="p-6">
        <form action="{{ route('admin.aichat.settings.save') }}" method="POST" id="botifySettingsForm">
            @csrf
            
            <!-- Hidden JSON fields for Advanced Knowledge -->
            <input type="hidden" name="botify_store_products" id="botify_store_products_hidden" value="{{ $botifySettings['botify_store_products'] }}">
            <input type="hidden" name="botify_web_pages" id="botify_web_pages_hidden" value="{{ $botifySettings['botify_web_pages'] }}">
            <input type="hidden" name="botify_long_texts" id="botify_long_texts_hidden" value="{{ $botifySettings['botify_long_texts'] }}">
            <input type="hidden" name="botify_files" id="botify_files_hidden" value="{{ $botifySettings['botify_files'] }}">
            <input type="hidden" name="botify_qna" id="botify_qna_hidden" value="{{ $botifySettings['botify_qna'] }}">
            <input type="hidden" name="botify_canned_responses" id="botify_canned_responses_hidden" value="{{ $botifySettings['botify_canned_responses'] }}">

            <!-- Sub Tab: Sources (Categorized list like image) -->
            <div id="subTab-sources" class="sub-tab-content space-y-6">
                <p class="text-xs text-gray-500 leading-relaxed border-b border-gray-100 pb-3">
                    چت‌بات هوشمند باتیفای، منابع دانشی که شما اضافه می‌کنید را پردازش می‌کند و پاسخ مشتریان شما را با استفاده از آن‌ها می‌دهد.
                </p>

                <div class="space-y-4">
                    <!-- Category 1: Products -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl p-2 bg-blue-100/50 text-blue-600 rounded-xl">📦</span>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">محصولات فروشگاهی</h4>
                                <p class="text-xs text-gray-500 mt-1">برای پاسخگویی دقیق به جزئیات و قیمت، اطلاعات محصولات خود را وارد کنید.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <span id="badge-products" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 دانش</span>
                            <button type="button" onclick="openProductManagerModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                                افزودن و مدیریت داده‌ها
                            </button>
                        </div>
                    </div>

                    <!-- Category 2: URL -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl p-2 bg-purple-100/50 text-purple-600 rounded-xl">🔗</span>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">صفحات وب (URL)</h4>
                                <p class="text-xs text-gray-500 mt-1">به دستیار هوشمند باتیفای اجازه بدهید تا داده‌های وبسایت شما را بخواند و از روی آن‌ها پاسخ دهد.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <span id="badge-web_pages" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 دانش</span>
                            <button type="button" onclick="openManagerModal('web_pages')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                                افزودن و مدیریت داده‌ها
                            </button>
                        </div>
                    </div>

                    <!-- Category 3: Long Texts -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl p-2 bg-emerald-100/50 text-emerald-600 rounded-xl">📝</span>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">متن‌های بلند</h4>
                                <p class="text-xs text-gray-500 mt-1">یک محتوای متنی برای باتیفای ایجاد کنید که در پاسخگویی به مشتریان از آن استفاده کند.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <span id="badge-long_texts" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 دانش</span>
                            <button type="button" onclick="openManagerModal('long_texts')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                                افزودن و مدیریت داده‌ها
                            </button>
                        </div>
                    </div>

                    <!-- Category 4: Files -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl p-2 bg-amber-100/50 text-amber-600 rounded-xl">📁</span>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">فایل‌ها</h4>
                                <p class="text-xs text-gray-500 mt-1">فایل‌های خود را آپلود کنید تا باتیفای محتوای داخل آن‌ها را پردازش کند.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <span id="badge-files" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 دانش</span>
                            <button type="button" onclick="openManagerModal('files')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                                افزودن و مدیریت داده‌ها
                            </button>
                        </div>
                    </div>

                    <!-- Category 5: Q&A -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                        <div class="flex items-start gap-4">
                            <span class="text-2xl p-2 bg-rose-100/50 text-rose-600 rounded-xl">❓</span>
                            <div>
                                <h4 class="font-bold text-gray-800 text-sm">سوال و جواب</h4>
                                <p class="text-xs text-gray-500 mt-1">جفت‌های سوال و جواب را اضافه کنید تا قابلیت‌های پشتیبانی بهبود یابد.</p>
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <span id="badge-qna" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 دانش</span>
                            <button type="button" onclick="openManagerModal('qna')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                                افزودن و مدیریت داده‌ها
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Custom Knowledge Sources (Raw text field) -->
                <div class="flex flex-col gap-2 mt-6 border-t border-gray-100 pt-6">
                    <label class="font-bold text-gray-700 text-sm">✍️ منابع دانش تکمیلی (متن خام عمومی)</label>
                    <textarea name="botify_knowledge_sources" rows="4" 
                              class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500"
                              placeholder="سایر اطلاعات پراکنده را در این کادر ثبت کنید...">{{ $botifySettings['botify_knowledge_sources'] }}</textarea>
                </div>
            </div>

            <!-- Sub Tab: Instructions -->
            <div id="subTab-instructions" class="sub-tab-content hidden space-y-6">
                <!-- Business Intro -->
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="font-bold text-gray-700 text-sm">🏢 معرفی کسب و کار</label>
                        <span class="text-[11px] text-gray-400" id="businessCharCount">0 / 400</span>
                    </div>
                    <p class="text-[11px] text-gray-500">درباره کسب و کار، خدمات و اطلاعات شرکت خود بنویسید (حداکثر ۴۰۰ کاراکتر).</p>
                    <textarea name="botify_business_info" id="businessInfoInput" rows="3" max-length="400"
                              class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500"
                              placeholder="مثال: آکادمی معماری رام بات، ارائه‌دهنده تخصصی دوره‌های نرم‌افزارهای مهندسی عمران و عمران...">{{ $botifySettings['botify_business_info'] }}</textarea>
                </div>

                <!-- Style Instructions -->
                <div class="flex flex-col gap-2">
                    <div class="flex justify-between items-center">
                        <label class="font-bold text-gray-700 text-sm">💬 دستورالعمل لحن و شیوه برقراری ارتباط</label>
                        <span class="text-[11px] text-gray-400" id="instructionCharCount">0 / 2000</span>
                    </div>
                    <p class="text-[11px] text-gray-500">لحن پاسخ‌دهی و قوانین رفتار چت‌باکس را بنویسید (حداکثر ۲۰۰۰ کاراکتر).</p>
                    <textarea name="botify_instructions" id="instructionsInput" rows="6" max-length="2000"
                              class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500">{{ $botifySettings['botify_instructions'] }}</textarea>
                </div>

                <!-- Banned Questions & Canned Response -->
                <div class="border border-red-100 bg-red-50/10 rounded-2xl p-5 space-y-4">
                    <h4 class="font-bold text-red-800 text-sm">⛔️ مدیریت سوالات غیرمرتبط و پاسخ آماده</h4>
                    <p class="text-[11px] text-gray-500">موضوعات عمومی، تفریحی یا نامربوط که هوش مصنوعی نباید به آن‌ها پاسخ دهد را به همراه پیام آماده مسدودسازی تعریف کنید.</p>
                    
                    <div class="grid grid-cols-1 gap-4">
                        <div class="flex flex-col gap-2">
                            <label class="font-bold text-gray-700 text-sm">موضوعات، کلمات کلیدی یا سوالات مسدود شده</label>
                            <input type="text" name="botify_banned_topics" value="{{ $botifySettings['botify_banned_topics'] }}" 
                                   class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500"
                                   placeholder="مثال: ۲+۲، طراحی ساختمان برای من، مسائل متفرقه ریاضی، تولید یا فرستادن عکس">
                        </div>

                        <div class="flex flex-col gap-2">
                            <label class="font-bold text-gray-700 text-sm">پیام آماده عدم پاسخگویی (Canned Response)</label>
                            <textarea name="botify_banned_reply" rows="2" 
                                      class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500"
                                      placeholder="مثال: کاربر محترم من یک چت بات مهندسی هستم...">{{ $botifySettings['botify_banned_reply'] }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sub Tab: Canned Responses -->
            <div id="subTab-canned" class="sub-tab-content hidden space-y-6">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-5 bg-gray-50 border border-gray-200/60 rounded-2xl gap-4 hover:border-blue-500/30 transition duration-300">
                    <div class="flex items-start gap-4">
                        <span class="text-2xl p-2 bg-blue-100/50 text-blue-600 rounded-xl">💬</span>
                        <div>
                            <h4 class="font-bold text-gray-800 text-sm">لیست پاسخ‌های آماده</h4>
                            <p class="text-xs text-gray-500 mt-1">پاسخ‌های آماده برای ارسال سریع به کاربران و همچنین دسترسی مستقیم هوش مصنوعی جهت پاسخگویی.</p>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <span id="badge-canned" class="text-xs font-bold text-gray-500 bg-gray-200/60 px-3 py-1.5 rounded-lg">0 پاسخ</span>
                        <button type="button" onclick="openManagerModal('canned')" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2 rounded-xl shadow-sm transition">
                            افزودن و مدیریت پاسخ‌ها
                        </button>
                    </div>
                </div>
            </div>

            <!-- Sub Tab: General Settings -->
            <div id="subTab-general" class="sub-tab-content hidden space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-gray-700 text-sm">🤖 نام نمایشی چت‌بات</label>
                        <input type="text" name="botify_display_name" value="{{ $botifySettings['botify_display_name'] }}"
                               class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500">
                    </div>
                    
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-gray-700 text-sm">👋 متن خوش‌آمدگویی باتیفای</label>
                        <input type="text" name="botify_welcome_text" value="{{ $botifySettings['botify_welcome_text'] }}"
                               placeholder="سلام! من دستیار هوش مصنوعی رام بات هستم..."
                               class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500">
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-gray-700 text-sm">🗣️ لحن مکالمه</label>
                        <select name="botify_tone" class="w-full p-3 text-sm border border-gray-200 rounded-xl bg-white focus:outline-none focus:border-blue-500">
                            <option value="conversational" {{ $botifySettings['botify_tone'] === 'conversational' ? 'selected' : '' }}>محاوره‌ای (عامیانه و صمیمی)</option>
                            <option value="formal" {{ $botifySettings['botify_tone'] === 'formal' ? 'selected' : '' }}>رسمی (کتابی و اداری)</option>
                        </select>
                    </div>

                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-gray-700 text-sm">🎨 میزان خلاقیت پاسخ‌دهی</label>
                        <select name="botify_creativity" class="w-full p-3 text-sm border border-gray-200 rounded-xl bg-white focus:outline-none focus:border-blue-500">
                            <option value="low" {{ $botifySettings['botify_creativity'] === 'low' ? 'selected' : '' }}>کم (دقیق‌ترین پاسخ‌ها)</option>
                            <option value="medium" {{ $botifySettings['botify_creativity'] === 'medium' ? 'selected' : '' }}>متوسط</option>
                            <option value="high" {{ $botifySettings['botify_creativity'] === 'high' ? 'selected' : '' }}>زیاد</option>
                        </select>
                    </div>
                </div>

                <div class="flex flex-col gap-2 border-t border-gray-100 pt-6">
                    <label class="font-bold text-gray-700 text-sm">⚠️ سناریوی عدم فهم سوال یا پاسخ در منابع دانش</label>
                    <textarea name="botify_fallback_text" rows="3"
                              class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500">{{ $botifySettings['botify_fallback_text'] }}</textarea>
                </div>
            </div>

            <!-- Sub Tab: API Configuration (New features) -->
            <div id="subTab-api" class="sub-tab-content hidden space-y-6">
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 text-xs text-amber-800 leading-relaxed">
                    🔑 تنظیمات اتصال به موتورهای پردازش هوش مصنوعی (OpenRouter API).
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- API Key -->
                    <div class="flex flex-col gap-2 md:col-span-2">
                        <label class="font-bold text-gray-700 text-sm">🔑 کلیدهای اختصاصی API Key (یک یا چند کلید)</label>
                        <textarea name="botify_api_key" placeholder="هر کلید را در یک خط وارد کنید. به عنوان مثال:
sk-or-v1-key1
sk-or-v1-key2"
                                  rows="3"
                                  class="w-full p-3 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500">{{ $botifySettings['botify_api_key'] }}</textarea>
                        <span class="text-[11px] text-gray-400">می‌توانید چندین کلید API را وارد کنید (هر کدام در یک خط). در صورت تمام شدن سهمیه یا خرابی یک کلید، سیستم به طور خودکار روی کلید بعدی سوئیچ خواهد کرد.</span>
                    </div>

                    <!-- Model Switcher -->
                    <div class="flex flex-col gap-2">
                        <label class="font-bold text-gray-700 text-xs">🤖 مدل هوش مصنوعی انتخابی</label>
                        <select name="botify_model" id="apiModelSelect" onchange="toggleCustomModelInput()" 
                                class="w-full p-3 text-xs border border-gray-200 rounded-xl bg-white focus:outline-none focus:border-blue-500">
                            <option value="nvidia/nemotron-nano-12b-v2-vl:free" {{ $botifySettings['botify_model'] === 'nvidia/nemotron-nano-12b-v2-vl:free' ? 'selected' : '' }}>Nvidia Nemotron Nano (رایگان - پیش‌فرض)</option>
                            <option value="meta-llama/llama-3-8b-instruct:free" {{ $botifySettings['botify_model'] === 'meta-llama/llama-3-8b-instruct:free' ? 'selected' : '' }}>Llama 3 8B Instruct (رایگان)</option>
                            <option value="google/gemma-2-9b-it:free" {{ $botifySettings['botify_model'] === 'google/gemma-2-9b-it:free' ? 'selected' : '' }}>Google Gemma 2 9B (رایگان)</option>
                            <option value="openai/gpt-4o-mini" {{ $botifySettings['botify_model'] === 'openai/gpt-4o-mini' ? 'selected' : '' }}>GPT-4o Mini (پولی - پیشرفته)</option>
                            <option value="anthropic/claude-3-haiku" {{ $botifySettings['botify_model'] === 'anthropic/claude-3-haiku' ? 'selected' : '' }}>Claude 3 Haiku (پولی)</option>
                            <option value="custom" {{ !in_array($botifySettings['botify_model'], ['nvidia/nemotron-nano-12b-v2-vl:free','meta-llama/llama-3-8b-instruct:free','google/gemma-2-9b-it:free','openai/gpt-4o-mini','anthropic/claude-3-haiku']) ? 'selected' : '' }}>مدل سفارشی دیگر...</option>
                        </select>
                        
                        <!-- Custom Model Text Input -->
                        <input type="text" id="customModelInput" name="botify_model_custom" 
                               value="{{ $botifySettings['botify_model'] }}"
                               class="w-full p-3 mt-2 text-xs border border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 hidden"
                               placeholder="مثال: meta-llama/llama-3-70b-instruct">
                    </div>
                </div>
            </div>

            <!-- Sub Tab: Reports (with Clear database option) -->
            <div id="subTab-reports" class="sub-tab-content hidden space-y-6">
                <!-- Statistics cards -->
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="bg-gray-50 border border-gray-100 rounded-xl p-4 flex flex-col justify-between">
                        <span class="text-[10px] text-gray-400 font-bold">💬 کل گفتگوها</span>
                        <span class="text-xl font-extrabold text-gray-800 mt-2">{{ $totalChatsCount }} گفتگو</span>
                    </div>
                    <div class="bg-gray-50 border border-gray-100 rounded-xl p-4 flex flex-col justify-between">
                        <span class="text-[10px] text-gray-400 font-bold">👤 کل پیام‌های کاربران</span>
                        <span class="text-xl font-extrabold text-blue-600 mt-2">{{ $totalUserMsgs }} پیام</span>
                    </div>
                    <div class="bg-gray-50 border border-gray-100 rounded-xl p-4 flex flex-col justify-between">
                        <span class="text-[10px] text-gray-400 font-bold">🤖 کل پیام‌های چت‌بات</span>
                        <span class="text-xl font-extrabold text-emerald-600 mt-2">{{ $totalAssistantMsgs }} پیام</span>
                    </div>
                    <div class="bg-gray-50 border border-gray-100 rounded-xl p-4 flex flex-col justify-between">
                        <span class="text-[10px] text-gray-400 font-bold">⚠️ نرخ خطا (انتقال به اپراتور)</span>
                        <span class="text-xl font-extrabold text-red-600 mt-2">{{ $fallbackRate }}% <span class="text-xs font-normal text-gray-400">({{ $totalFallbackMsgs }} مورد)</span></span>
                    </div>
                </div>

                <!-- Circular Chart Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
                    <!-- Chart 1: Chats Activity -->
                    <div class="bg-gray-50/50 border border-gray-100 rounded-2xl p-5 flex flex-col items-center">
                        <h4 class="font-bold text-gray-700 text-xs mb-4">📊 فعالیت مکالمات چت‌بات</h4>
                        <div class="w-60 h-60">
                            <canvas id="chatsActivityChart"></canvas>
                        </div>
                        <div class="flex gap-4 text-[10px] text-gray-500 mt-4">
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>کاربران</span>
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>هوش مصنوعی</span>
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>پاسخ اضطراری (سیستم)</span>
                        </div>
                    </div>

                    <!-- Chart 2: Knowledge Distribution -->
                    <div class="bg-gray-50/50 border border-gray-100 rounded-2xl p-5 flex flex-col items-center">
                        <h4 class="font-bold text-gray-700 text-xs mb-4">🗂️ توزیع منابع دانش پلتفرم</h4>
                        <div class="w-60 h-60">
                            <canvas id="knowledgeSourcesChart"></canvas>
                        </div>
                        <div class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-[10px] text-gray-500 mt-4 max-w-sm">
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-yellow-400"></span>محصولات</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-purple-500"></span>لینک‌ها</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-teal-500"></span>متن بلند</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-indigo-500"></span>فایل‌ها</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-rose-500"></span>سوال و جواب</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-orange-400"></span>فایل دیتابیس</span>
                            <span class="flex items-center gap-1"><span class="w-2 h-2 rounded-full bg-blue-600"></span>پوشه دیتابیس</span>
                        </div>
                    </div>
                </div>

                <!-- Danger Zone: Truncate history database -->
                <div class="border border-red-200 bg-red-50/50 rounded-2xl p-6 mt-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                    <div>
                        <h4 class="font-bold text-red-800 text-sm">🗑️ پاکسازی کامل تاریخچه گفتگوها</h4>
                        <p class="text-xs text-red-600 mt-1">با اجرای این دستور کل پیام‌های رد و بدل شده کاربران با هوش مصنوعی حذف شده و دیتابیس کاملاً خلوت خواهد شد.</p>
                    </div>
                    <button type="button" onclick="confirmClearHistory()" class="bg-red-600 hover:bg-red-700 text-white font-bold text-xs px-5 py-3 rounded-xl transition shadow-md">
                        🗑️ پاکسازی کامل چت‌ها
                    </button>
                </div>
            </div>

            <!-- Sub Tab: Suggestions -->
            <div id="subTab-suggestions" class="sub-tab-content hidden space-y-6">
                <p class="text-xs text-gray-500 leading-relaxed border-b border-gray-100 pb-3">
                    پیشنهاداتی که کاربران برای بهبود پاسخ‌های نامناسب (دیسلایک شده) ارسال کرده‌اند. می‌توانید این پیشنهادات را ویرایش کرده و به عنوان سوال و جواب به پایگاه دانش اضافه کنید.
                </p>

                @php
                    $suggestionsList = json_decode($botifySettings['botify_suggestions'] ?? '[]', true) ?? [];
                @endphp

                @if(count($suggestionsList) === 0)
                    <div class="text-center p-8 text-gray-400 text-xs">هیچ پیشنهادی ثبت نشده است.</div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-right text-xs">
                            <thead>
                                <tr class="bg-gray-50 border-b border-gray-200">
                                    <th class="p-3 font-bold text-gray-700">پرسش کاربر</th>
                                    <th class="p-3 font-bold text-gray-700">پاسخ ربات</th>
                                    <th class="p-3 font-bold text-gray-700">پیشنهاد بهبود کاربر</th>
                                    <th class="p-3 font-bold text-gray-700 w-40">تاریخ ثبت</th>
                                    <th class="p-3 font-bold text-gray-700 w-32">عملیات</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($suggestionsList as $s)
                                    <tr class="hover:bg-gray-50">
                                        <td class="p-3 text-gray-600 truncate max-w-xs" title="{{ $s['user_message'] ?? '' }}">{{ $s['user_message'] ?? '' }}</td>
                                        <td class="p-3 text-gray-600 truncate max-w-xs" title="{{ $s['bot_message'] ?? '' }}">{{ $s['bot_message'] ?? '' }}</td>
                                        <td class="p-3 text-gray-800 font-medium max-w-xs" title="{{ $s['suggestion'] ?? '' }}">{{ $s['suggestion'] ?? '' }}</td>
                                        <td class="p-3 text-gray-400 font-mono">{{ $s['created_at'] ?? '' }}</td>
                                        <td class="p-3">
                                            <div class="flex gap-2">
                                                <button type="button" onclick="document.getElementById('editForm-{{ $s['id'] }}').classList.toggle('hidden')" class="bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-100 text-[10px] px-2.5 py-1.5 rounded-lg font-bold">
                                                    💡 انتقال به پایگاه دانش
                                                </button>
                                                <form action="{{ route('admin.aichat.suggestion.delete', $s['id']) }}" method="POST" onsubmit="return confirm('آیا از حذف این پیشنهاد مطمئن هستید؟')" style="display:inline-block;">
                                                    @csrf
                                                    <button type="submit" class="bg-red-50 hover:bg-red-100 text-red-600 border border-red-100 text-[10px] px-2.5 py-1.5 rounded-lg font-bold">🗑️ حذف</button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr id="editForm-{{ $s['id'] }}" class="hidden bg-gray-50/50">
                                        <td colspan="5" class="p-4">
                                            <div class="max-w-2xl border border-gray-200 p-4 rounded-xl bg-white shadow-sm">
                                                <form action="{{ route('admin.aichat.suggestion.convert', $s['id']) }}" method="POST" class="space-y-3">
                                                    @csrf
                                                    <div>
                                                        <label class="block text-[10px] font-bold text-gray-500 mb-1">پرسش در پایگاه دانش:</label>
                                                        <input type="text" name="question" value="{{ $s['user_message'] ?? '' }}" class="w-full p-2.5 border border-gray-200 rounded-lg text-xs" required>
                                                    </div>
                                                    <div>
                                                        <label class="block text-[10px] font-bold text-gray-500 mb-1">پاسخ جدید اصلاح‌شده:</label>
                                                        <textarea name="answer" rows="3" class="w-full p-2.5 border border-gray-200 rounded-lg text-xs" required>{{ $s['suggestion'] ?? '' }}</textarea>
                                                    </div>
                                                    <div class="flex gap-2">
                                                        <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs px-3 py-1.5 rounded-lg font-bold">ذخیره در پایگاه دانش</button>
                                                        <button type="button" onclick="document.getElementById('editForm-{{ $s['id'] }}').classList.add('hidden')" class="bg-gray-200 hover:bg-gray-300 text-gray-700 text-xs px-3 py-1.5 rounded-lg">انصراف</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            <!-- Save button (Floating style footer) -->
            <div class="mt-6 border-t border-gray-100 pt-6 flex justify-end" id="botifySaveFooter">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-6 py-3 rounded-xl shadow-md transition">
                    💾 ذخیره تغییرات باتیفای
                </button>
            </div>
        </form>

        <!-- Truncate history hidden form -->
        <form action="{{ route('admin.aichat.clear-history') }}" method="POST" id="clearHistoryForm" class="hidden">
            @csrf
        </form>
    </div>
</div>

<!-- ================= DYNAMIC DATA MANAGER MODAL ================= -->
<div id="dataManagerModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[99999] hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl w-full max-w-2xl max-h-[85vh] overflow-hidden flex flex-col shadow-2xl">
        <!-- Modal Header -->
        <div class="p-5 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
            <h3 class="font-bold text-gray-800 text-sm" id="modalTitle">مدیریت داده‌ها</h3>
            <button onclick="closeManagerModal()" class="text-gray-400 hover:text-gray-600 font-bold text-xl">&times;</button>
        </div>

        <!-- Modal Body / Items List -->
        <div class="flex-1 p-6 overflow-y-auto space-y-4" id="modalItemsContainer">
            <!-- Items list will be generated by Javascript -->
        </div>

        <!-- Modal Footer (Add item form and Close actions) -->
        <div class="p-5 border-t border-gray-100 bg-gray-50 flex flex-col gap-3">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2" id="modalAddForm">
                <!-- Add Inputs will be generated dynamically -->
            </div>
            <div class="flex justify-between items-center mt-2">
                <button onclick="closeManagerModal()" class="text-xs font-bold text-gray-500 px-4 py-2 hover:bg-gray-200 rounded-lg">بستن</button>
                <button onclick="addNewItemToModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs px-4 py-2.5 rounded-xl shadow-sm">➕ افزودن داده جدید</button>
            </div>
        </div>
    </div>
</div>

<!-- ================= UPGRADED PRODUCT KNOWLEDGE SOURCE MODAL (Dark Aesthetic matching images) ================= -->
<div id="productManagerModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-[99999] hidden flex items-center justify-center p-4">
    <div class="bg-[#1e1e20] text-gray-100 rounded-3xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl border border-[#2d2d31]">
        <!-- Modal Header -->
        <div class="p-5 border-b border-[#2d2d31] bg-[#1a1a1c] flex justify-between items-center">
            <h3 class="font-bold text-sm text-gray-200">افزودن منبع دانش محصول</h3>
            <button onclick="closeProductManagerModal()" class="text-gray-400 hover:text-gray-200 font-bold text-xl">&times;</button>
        </div>

        <!-- Modal Body -->
        <div class="flex-1 p-6 overflow-y-auto space-y-6">
            <!-- Tabs / Radio Options -->
            <div class="space-y-3">
                <!-- Radio Option 1: Add Single Product -->
                <div class="border border-[#2d2d31] rounded-2xl bg-[#252529] p-4 transition">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="radio" name="product_source_type" value="single" checked onchange="toggleProductSourceSection()"
                               class="w-4 h-4 text-blue-600 bg-[#131314] border-[#2d2d31] focus:ring-blue-500">
                        <div class="text-right">
                            <span class="font-bold text-xs text-gray-200 block">اضافه کردن تک محصول</span>
                            <span class="text-[10px] text-gray-400">برای پاسخ‌گویی دقیق توسط بات، اطلاعات محصول را به‌صورت کامل وارد کنید.</span>
                        </div>
                    </label>
                    
                    <!-- Single Form Section -->
                    <div id="prodSection-single" class="mt-4 pt-4 border-t border-[#2d2d31] space-y-4">
                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">نام محصول *</label>
                            <input type="text" id="single_prod_title" placeholder="لطفاً نام محصول را دقیقاً مطابق با آنچه در وب‌سایت درج کرده‌اید وارد کنید."
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500" max-length="500">
                            <div class="text-left text-[9px] text-gray-500"><span id="title_counter">0</span> / 500</div>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">قیمت (تومان)</label>
                            <input type="text" id="single_prod_price" placeholder="قیمت محصول را با ارقام انگلیسی وارد کنید. حداکثر مجاز: 1,000,000,000 تومان"
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500">
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">لینک URL محصول</label>
                            <input type="url" id="single_prod_url" placeholder="https://gapify.ai"
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500">
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">جزئیات محصول</label>
                            <textarea id="single_prod_details" placeholder="در صورت نیاز، توضیحاتی درباره ویژگی‌ها و مشخصات محصول وارد کنید."
                                      class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500" rows="3" max-length="3000"></textarea>
                            <div class="text-left text-[9px] text-gray-500"><span id="details_counter">0</span> / 3000</div>
                        </div>
                    </div>
                </div>

                <!-- Radio Option 2: Upload CSV/Excel File -->
                <div class="border border-[#2d2d31] rounded-2xl bg-[#252529] p-4 transition">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="radio" name="product_source_type" value="file" onchange="toggleProductSourceSection()"
                               class="w-4 h-4 text-blue-600 bg-[#131314] border-[#2d2d31] focus:ring-blue-500">
                        <div class="text-right">
                            <span class="font-bold text-xs text-gray-200 block">آپلود فایل محصول</span>
                            <span class="text-[10px] text-gray-400">فایل CSV یا اکسل محصولات را بارگذاری کنید.</span>
                        </div>
                    </label>

                    <!-- File Upload Section -->
                    <div id="prodSection-file" class="mt-4 pt-4 border-t border-[#2d2d31] space-y-4 hidden">
                        <div class="border-2 border-dashed border-[#3a3a40] hover:border-blue-500 rounded-2xl p-8 text-center cursor-pointer bg-[#131314] transition relative"
                             onclick="document.getElementById('csvFileInput').click()">
                            <input type="file" id="csvFileInput" class="hidden" accept=".csv" onchange="handleCSVFileSelect(event)">
                            <div class="flex flex-col items-center gap-2">
                                <span class="text-3xl">📥</span>
                                <span class="text-xs text-gray-300 font-bold">برای افزودن فایل آن را بکشید و اینجا رها کنید.</span>
                                <button type="button" class="mt-2 bg-[#2563eb] text-white text-[11px] font-bold px-4 py-2 rounded-xl">انتخاب فایل‌ها</button>
                            </div>
                        </div>

                        <!-- CSV Warnings and Format Guide -->
                        <div class="bg-amber-950/20 border border-amber-800/40 rounded-xl p-4 text-[11px] text-amber-500 leading-relaxed">
                            <p class="font-bold mb-1">لطفاً فایل محصولات را با فرمت CSV بارگذاری کنید.</p>
                            <p class="mb-2">ردیف اول فایل باید شامل نام فیلدها و ستون‌ها دقیقاً با این ترتیب تنظیم شوند:</p>
                            <p class="font-bold font-mono">شناسه، SKU، نام محصول، توضیح کوتاه، نام برند، قیمت، قیمت نهایی، توضیحات، وضعیت موجودی (موجود یا ناموجود)، تعداد موجودی، لینک خرید، لینک تصویر</p>
                        </div>
                    </div>
                </div>

                <!-- Radio Option 3: WooCommerce integration -->
                <div class="border border-[#2d2d31] rounded-2xl bg-[#252529] p-4 transition">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="radio" name="product_source_type" value="woocommerce" onchange="toggleProductSourceSection()"
                               class="w-4 h-4 text-blue-600 bg-[#131314] border-[#2d2d31] focus:ring-blue-500">
                        <div class="text-right">
                            <span class="font-bold text-xs text-gray-200 block">اتصال به ووکامرس</span>
                            <span class="text-[10px] text-gray-400">برای دسترسی بات به لیست محصولات می‌توانید بات را به سایت ووکامرس خود متصل کنید.</span>
                        </div>
                    </label>

                    <!-- WooCommerce Sync Section -->
                    <div id="prodSection-woocommerce" class="mt-4 pt-4 border-t border-[#2d2d31] space-y-4 hidden">
                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">کلید عمومی (consumer key) *</label>
                            <input type="text" id="wc_consumer_key" placeholder="کلید عمومی ووکامرس خود را وارد کنید."
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500">
                            <span class="text-[9px] text-gray-500">راهنمایی: برای ایجاد کلید جدید، باید به مسیر ووکامرس > پیکربندی > پیشرفته > REST API بروید و یک کلید جدید با دسترسی خواندن (Read) ایجاد کنید و سپس کلید عمومی را کپی کنید.</span>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">کلید خصوصی (consumer secret) *</label>
                            <input type="password" id="wc_consumer_secret" placeholder="کلید خصوصی ووکامرس خود را وارد کنید."
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500">
                            <span class="text-[9px] text-gray-500">راهنمایی: برای ایجاد کلید جدید، باید به مسیر ووکامرس > پیکربندی > پیشرفته > REST API بروید و یک کلید جدید با دسترسی خواندن (Read) ایجاد کنید و سپس کلید خصوصی را کپی کنید.</span>
                        </div>

                        <div class="flex flex-col gap-1.5">
                            <label class="text-[11px] font-bold text-gray-300">آدرس وبسایت</label>
                            <input type="url" id="wc_website_url" placeholder="آدرس وبسایت خود را وارد کنید."
                                   class="w-full p-3 text-xs bg-[#131314] border border-[#2d2d31] rounded-xl text-gray-200 focus:outline-none focus:border-blue-500">
                        </div>

                        <div class="pt-2">
                            <button type="button" onclick="validateWooCommerceSync()" id="wcSyncBtn"
                                    class="w-full bg-[#3a3a40] hover:bg-[#4b4b53] text-gray-200 text-xs font-bold py-3 rounded-xl transition">
                                اعتبارسنجی ووکامرس
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Current Products List -->
            <div class="space-y-3">
                <h4 class="font-bold text-xs text-gray-300">📦 لیست محصولات فعلی در پایگاه دانش</h4>
                <div class="border border-[#2d2d31] rounded-2xl bg-[#131314] p-3 max-h-[160px] overflow-y-auto space-y-2" id="prodListContainer">
                    <!-- Current products list will be loaded here dynamically -->
                </div>
            </div>
        </div>

        <!-- Modal Footer -->
        <div class="p-5 border-t border-[#2d2d31] bg-[#1a1a1c] flex justify-between items-center">
            <button onclick="closeProductManagerModal()" class="text-xs font-bold text-gray-400 hover:text-gray-200 px-4 py-2 hover:bg-[#252529] rounded-lg">بستن</button>
            <button onclick="submitProductSource()" class="bg-[#3b82f6] hover:bg-[#2563eb] text-white font-bold text-xs px-6 py-2.5 rounded-xl shadow-md transition">ثبت</button>
        </div>
    </div>
</div>

<style>
    /* Styling Tabs active/inactive states */
    .main-tab-btn {
        color: #4b5563;
        background: transparent;
    }
    .main-tab-btn.active {
        color: #2563eb;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    .sub-tab-btn {
        color: #6b7280;
    }
    .sub-tab-btn.active {
        color: #2563eb;
        border-bottom-color: #2563eb;
    }
</style>

<script>
    let currentCategory = '';
    let categoryData = {
        products: [],
        web_pages: [],
        long_texts: [],
        files: [],
        qna: []
    };

    // Load initial JSON data from hidden fields
    document.addEventListener('DOMContentLoaded', () => {
        try {
            categoryData.products = JSON.parse(document.getElementById('botify_store_products_hidden').value || '[]');
            categoryData.web_pages = JSON.parse(document.getElementById('botify_web_pages_hidden').value || '[]');
            categoryData.long_texts = JSON.parse(document.getElementById('botify_long_texts_hidden').value || '[]');
            categoryData.files = JSON.parse(document.getElementById('botify_files_hidden').value || '[]');
            categoryData.qna = JSON.parse(document.getElementById('botify_qna_hidden').value || '[]');
            categoryData.canned = JSON.parse(document.getElementById('botify_canned_responses_hidden').value || '[]');
            
            updateBadgesCount();
            toggleCustomModelInput();
        } catch (e) {
            console.error("Error parsing settings JSON", e);
        }
    });

    function updateBadgesCount() {
        document.getElementById('badge-products').innerText = `${categoryData.products.length} محصول`;
        document.getElementById('badge-web_pages').innerText = `${categoryData.web_pages.length} آدرس`;
        document.getElementById('badge-long_texts').innerText = `${categoryData.long_texts.length} سند`;
        document.getElementById('badge-files').innerText = `${categoryData.files.length} فایل`;
        document.getElementById('badge-qna').innerText = `${categoryData.qna.length} پرسش و پاسخ`;
        const badgeCanned = document.getElementById('badge-canned');
        if (badgeCanned) badgeCanned.innerText = `${categoryData.canned.length} پاسخ`;
    }

    // Modal Manager Logic
    function openManagerModal(category) {
        currentCategory = category;
        const modal = document.getElementById('dataManagerModal');
        const modalTitle = document.getElementById('modalTitle');
        modal.classList.remove('hidden');

        // Set Title
        const titles = {
            products: '📦 مدیریت محصولات فروشگاهی',
            web_pages: '🔗 مدیریت صفحات وب (URL)',
            long_texts: '📝 مدیریت متن‌های بلند',
            files: '📁 مدیریت فایل‌ها',
            qna: '❓ مدیریت سوال و جواب‌ها',
            canned: '💬 مدیریت پاسخ‌های آماده'
        };
        modalTitle.innerText = titles[category];

        renderModalItems();
        renderModalAddForm();
    }

    function closeManagerModal() {
        document.getElementById('dataManagerModal').classList.add('hidden');
        // Update hidden inputs with latest data before closing
        document.getElementById(`botify_${currentCategory}_hidden`).value = JSON.stringify(categoryData[currentCategory]);
        updateBadgesCount();
    }

    function renderModalItems() {
        const container = document.getElementById('modalItemsContainer');
        container.innerHTML = '';
        const list = categoryData[currentCategory];

        if (list.length === 0) {
            container.innerHTML = '<div class="text-center text-gray-400 text-xs py-8">هیچ داده‌ای ثبت نشده است. از فرم زیر اضافه کنید.</div>';
            return;
        }

        list.forEach((item, index) => {
            let contentHtml = '';
            if (currentCategory === 'products') {
                contentHtml = `
                    <div class="font-bold text-gray-800">${item.title}</div>
                    <div class="text-[10px] text-gray-500 mt-1">جزئیات: ${item.details} | قیمت: ${item.price} تومان</div>
                `;
            } else if (currentCategory === 'web_pages') {
                contentHtml = `
                    <div class="font-bold text-blue-600 font-mono break-all">${item.url}</div>
                    <div class="text-[10px] text-gray-400 mt-1">توضیح: ${item.info}</div>
                `;
            } else if (currentCategory === 'long_texts') {
                contentHtml = `
                    <div class="font-bold text-gray-800">${item.title}</div>
                    <div class="text-[10px] text-gray-500 mt-1 line-clamp-2">${item.text}</div>
                `;
            } else if (currentCategory === 'files') {
                contentHtml = `
                    <div class="font-bold text-gray-800">${item.name}</div>
                    <div class="text-[10px] text-gray-500 mt-1 line-clamp-2">توضیح محتوا: ${item.content}</div>
                `;
            } else if (currentCategory === 'qna') {
                contentHtml = `
                    <div class="font-bold text-gray-800">سوال: ${item.question}</div>
                    <div class="text-[10px] text-gray-600 mt-1 bg-gray-50 p-2 rounded">پاسخ: ${item.answer}</div>
                `;
            } else if (currentCategory === 'canned') {
                contentHtml = `
                    <div class="font-bold text-gray-800">عنوان: ${item.title}</div>
                    <div class="text-[10px] text-gray-600 mt-1 bg-gray-50 p-2 rounded">پاسخ آماده: ${item.content}</div>
                `;
            }

            container.innerHTML += `
                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:bg-gray-50/50 gap-4">
                    <div class="flex-1 text-right text-xs">
                        ${contentHtml}
                    </div>
                    <button type="button" onclick="deleteItemFromCategory(${index})" class="text-red-500 hover:text-red-700 font-bold text-sm">حذف</button>
                </div>
            `;
        });
    }

    function renderModalAddForm() {
        const form = document.getElementById('modalAddForm');
        form.innerHTML = '';

        if (currentCategory === 'products') {
            form.innerHTML = `
                <input type="text" id="add_title" placeholder="عنوان محصول" class="p-2 border rounded-lg text-xs" required>
                <input type="text" id="add_details" placeholder="جزئیات/مشخصات" class="p-2 border rounded-lg text-xs" required>
                <input type="text" id="add_price" placeholder="قیمت" class="p-2 border rounded-lg text-xs" required>
            `;
        } else if (currentCategory === 'web_pages') {
            form.innerHTML = `
                <input type="url" id="add_url" placeholder="آدرس URL کامل" class="p-2 border rounded-lg text-xs sm:col-span-2" required>
                <input type="text" id="add_info" placeholder="توضیح کوتاه صفحه" class="p-2 border rounded-lg text-xs" required>
            `;
        } else if (currentCategory === 'long_texts') {
            form.innerHTML = `
                <input type="text" id="add_title" placeholder="عنوان محتوا" class="p-2 border rounded-lg text-xs" required>
                <textarea id="add_text" placeholder="متن کامل محتوا" class="p-2 border rounded-lg text-xs sm:col-span-2" rows="2" required></textarea>
            `;
        } else if (currentCategory === 'files') {
            form.innerHTML = `
                <input type="text" id="add_name" placeholder="نام فایل" class="p-2 border rounded-lg text-xs" required>
                <textarea id="add_content" placeholder="خلاصه یا محتوای پردازش شده فایل" class="p-2 border rounded-lg text-xs sm:col-span-2" rows="2" required></textarea>
            `;
        } else if (currentCategory === 'qna') {
            form.innerHTML = `
                <input type="text" id="add_question" placeholder="پرسش/سوال" class="p-2 border rounded-lg text-xs" required>
                <textarea id="add_answer" placeholder="پاسخ چت‌بات" class="p-2 border rounded-lg text-xs sm:col-span-2" rows="2" required></textarea>
            `;
        } else if (currentCategory === 'canned') {
            form.innerHTML = `
                <input type="text" id="add_title" placeholder="عنوان پاسخ آماده" class="p-2 border rounded-lg text-xs" required>
                <textarea id="add_content" placeholder="متن کامل پاسخ آماده" class="p-2 border rounded-lg text-xs sm:col-span-2" rows="2" required></textarea>
            `;
        }
    }

    function addNewItemToModal() {
        const item = {};
        if (currentCategory === 'products') {
            item.title = document.getElementById('add_title').value.trim();
            item.details = document.getElementById('add_details').value.trim();
            item.price = document.getElementById('add_price').value.trim();
            if (!item.title || !item.details || !item.price) return;
        } else if (currentCategory === 'web_pages') {
            item.url = document.getElementById('add_url').value.trim();
            item.info = document.getElementById('add_info').value.trim();
            if (!item.url || !item.info) return;
        } else if (currentCategory === 'long_texts') {
            item.title = document.getElementById('add_title').value.trim();
            item.text = document.getElementById('add_text').value.trim();
            if (!item.title || !item.text) return;
        } else if (currentCategory === 'files') {
            item.name = document.getElementById('add_name').value.trim();
            item.content = document.getElementById('add_content').value.trim();
            if (!item.name || !item.content) return;
        } else if (currentCategory === 'qna') {
            item.question = document.getElementById('add_question').value.trim();
            item.answer = document.getElementById('add_answer').value.trim();
            if (!item.question || !item.answer) return;
        } else if (currentCategory === 'canned') {
            item.title = document.getElementById('add_title').value.trim();
            item.content = document.getElementById('add_content').value.trim();
            if (!item.title || !item.content) return;
        }

        categoryData[currentCategory].push(item);
        renderModalItems();
        renderModalAddForm();
    }

    function deleteItemFromCategory(index) {
        categoryData[currentCategory].splice(index, 1);
        renderModalItems();
    }

    // Toggle Custom Model Input
    function toggleCustomModelInput() {
        const select = document.getElementById('apiModelSelect');
        const customInput = document.getElementById('customModelInput');
        if (select && customInput) {
            if (select.value === 'custom') {
                customInput.classList.remove('hidden');
                if (customInput.value === 'nvidia/nemotron-nano-12b-v2-vl:free' || customInput.value === 'meta-llama/llama-3-8b-instruct:free' || customInput.value === 'google/gemma-2-9b-it:free' || customInput.value === 'openai/gpt-4o-mini' || customInput.value === 'anthropic/claude-3-haiku') {
                    customInput.value = '';
                }
            } else {
                customInput.classList.add('hidden');
                customInput.value = select.value;
            }
        }
    }

    function switchMainTab(tabId) {
        document.querySelectorAll('.main-tab-btn').forEach(btn => btn.classList.remove('active'));
        document.getElementById('tabBtn-' + tabId).classList.add('active');

        document.querySelectorAll('.main-section').forEach(sec => sec.classList.add('hidden'));
        document.getElementById('section-' + tabId).classList.remove('hidden');
        if (tabId === 'botify') {
            document.getElementById('section-botify').classList.remove('hidden');
            document.getElementById('section-botify').classList.add('flex');
        } else {
            document.getElementById('section-conversations').classList.remove('hidden');
        }
    }

    function switchSubTab(subTabId) {
        document.querySelectorAll('.sub-tab-btn').forEach(btn => btn.classList.remove('active'));
        document.getElementById('subTabBtn-' + subTabId).classList.add('active');

        document.querySelectorAll('.sub-tab-content').forEach(content => content.classList.add('hidden'));
        document.getElementById('subTab-' + subTabId).classList.remove('hidden');

        const saveFooter = document.getElementById('botifySaveFooter');
        if (subTabId === 'reports' || subTabId === 'suggestions') {
            saveFooter.classList.add('hidden');
        } else {
            saveFooter.classList.remove('hidden');
        }
    }

    // Danger zone DB delete history confirmation
    function confirmClearHistory() {
        if (confirm("⚠️ آیا کاملاً مطمئن هستید که می‌خواهید تمامی تاریخچه گفتگوهای کاربران با هوش مصنوعی را برای همیشه از دیتابیس پاک کنید؟ این عملیات غیرقابل بازگشت است!")) {
            document.getElementById('clearHistoryForm').submit();
        }
    }

    // Textarea characters counters
    document.addEventListener('DOMContentLoaded', () => {
        const businessInput = document.getElementById('businessInfoInput');
        const businessCounter = document.getElementById('businessCharCount');
        if (businessInput && businessCounter) {
            const updateCount = () => {
                businessCounter.innerText = `${businessInput.value.length} / 400`;
            };
            businessInput.addEventListener('input', updateCount);
            updateCount();
        }

        const instructionsInput = document.getElementById('instructionsInput');
        const instructionsCounter = document.getElementById('instructionCharCount');
        if (instructionsInput && instructionsCounter) {
            const updateCount = () => {
                instructionsCounter.innerText = `${instructionsInput.value.length} / 2000`;
            };
            instructionsInput.addEventListener('input', updateCount);
            updateCount();
        }

        // Load Chart.js dynamically and render charts
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
        script.onload = () => {
            const ctxChats = document.getElementById('chatsActivityChart').getContext('2d');
            new Chart(ctxChats, {
                type: 'doughnut',
                data: {
                    labels: ['کاربران', 'هوش مصنوعی', 'پاسخ اضطراری (سیستم)'],
                    datasets: [{
                        data: [{{ $totalUserMsgs }}, {{ max(0, $totalAssistantMsgs - $totalFallbackMsgs) }}, {{ $totalFallbackMsgs }}],
                        backgroundColor: ['#3b82f6', '#10b981', '#ef4444'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    cutout: '70%'
                }
            });

            const ctxKnowledge = document.getElementById('knowledgeSourcesChart').getContext('2d');
            new Chart(ctxKnowledge, {
                type: 'doughnut',
                data: {
                    labels: ['محصولات', 'لینک‌ها', 'متن بلند', 'فایل‌ها', 'سوال و جواب', 'فایل دیتابیس', 'پوشه دیتابیس'],
                    datasets: [{
                        data: [
                            categoryData.products.length,
                            categoryData.web_pages.length,
                            categoryData.long_texts.length,
                            categoryData.files.length,
                            categoryData.qna.length,
                            {{ $dbFilesCount }},
                            {{ $dbFoldersCount }}
                        ],
                        backgroundColor: ['#facc15', '#a855f7', '#14b8a6', '#6366f1', '#f43f5e', '#fb923c', '#2563eb'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    cutout: '70%'
                }
            });
        };
        document.head.appendChild(script);
    });

    function useCannedReply(text) {
        const input = document.getElementById('adminReplyInput');
        if (input) {
            input.value = text;
            input.focus();
        }
    }

    // Upgraded Product Manager Modal Logic
    function openProductManagerModal() {
        const modal = document.getElementById('productManagerModal');
        modal.classList.remove('hidden');
        renderProductList();
        
        // Character counters listeners for single input
        const titleInput = document.getElementById('single_prod_title');
        const titleCounter = document.getElementById('title_counter');
        if (titleInput && titleCounter) {
            titleInput.addEventListener('input', () => {
                titleCounter.innerText = titleInput.value.length;
            });
        }

        const detailsInput = document.getElementById('single_prod_details');
        const detailsCounter = document.getElementById('details_counter');
        if (detailsInput && detailsCounter) {
            detailsInput.addEventListener('input', () => {
                detailsCounter.innerText = detailsInput.value.length;
            });
        }
    }

    function closeProductManagerModal() {
        document.getElementById('productManagerModal').classList.add('hidden');
        document.getElementById('botify_store_products_hidden').value = JSON.stringify(categoryData.products);
        updateBadgesCount();
    }

    function toggleProductSourceSection() {
        const selectedVal = document.querySelector('input[name="product_source_type"]:checked').value;
        document.getElementById('prodSection-single').classList.add('hidden');
        document.getElementById('prodSection-file').classList.add('hidden');
        document.getElementById('prodSection-woocommerce').classList.add('hidden');

        if (selectedVal === 'single') {
            document.getElementById('prodSection-single').classList.remove('hidden');
        } else if (selectedVal === 'file') {
            document.getElementById('prodSection-file').classList.remove('hidden');
        } else if (selectedVal === 'woocommerce') {
            document.getElementById('prodSection-woocommerce').classList.remove('hidden');
        }
    }

    function renderProductList() {
        const container = document.getElementById('prodListContainer');
        if (!container) return;
        container.innerHTML = '';
        const list = categoryData.products;

        if (list.length === 0) {
            container.innerHTML = '<div class="text-center text-gray-500 text-xs py-4">هیچ محصولی در پایگاه دانش ثبت نشده است.</div>';
            return;
        }

        list.forEach((item, index) => {
            container.innerHTML += `
                <div class="flex justify-between items-center p-2.5 border border-[#2d2d31] rounded-xl bg-[#1e1e20] gap-4">
                    <div class="flex-1 text-right text-xs text-gray-300">
                        <div class="font-bold">${item.title}</div>
                        <div class="text-[10px] text-gray-500 mt-0.5">قیمت: ${item.price} تومان ${item.url ? ` | <a href="${item.url}" target="_blank" class="text-blue-500 hover:underline">لینک خرید</a>` : ''}</div>
                        ${item.details ? `<div class="text-[9px] text-gray-400 mt-1 line-clamp-1">${item.details}</div>` : ''}
                    </div>
                    <button type="button" onclick="deleteProductItem(${index})" class="text-red-500 hover:text-red-400 text-xs font-bold px-2 py-1">حذف</button>
                </div>
            `;
        });
    }

    function deleteProductItem(index) {
        categoryData.products.splice(index, 1);
        renderProductList();
    }

    function handleCSVFileSelect(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(evt) {
            const text = evt.target.result;
            const parsed = parseCSV(text);
            if (parsed.length > 0) {
                categoryData.products = categoryData.products.concat(parsed);
                renderProductList();
                alert(`تعداد ${parsed.length} محصول با موفقیت از فایل CSV استخراج و به لیست اضافه شد.`);
            } else {
                alert('هیچ محصول معتبری در فایل یافت نشد. لطفاً ساختار ستون‌ها را بررسی کنید.');
            }
        };
        reader.readAsText(file, 'UTF-8');
    }

    function parseCSV(text) {
        let lines = text.split('\n');
        let results = [];
        for (let i = 0; i < lines.length; i++) {
            let line = lines[i].trim();
            if (!line) continue;
            
            let matches = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || line.split(',');
            let cleanCols = (matches || []).map(c => c.replace(/^"|"$/g, '').trim());
            
            if (i === 0) continue; // skip header
            
            let name = cleanCols[2] || '';
            let price = cleanCols[6] || cleanCols[5] || '0';
            let buyLink = cleanCols[10] || '';
            let details = cleanCols[7] || cleanCols[3] || '';
            
            if (name) {
                results.push({
                    title: name,
                    price: price,
                    url: buyLink,
                    details: details
                });
            }
        }
        return results;
    }

    function validateWooCommerceSync() {
        const consumerKey = document.getElementById('wc_consumer_key').value.trim();
        const consumerSecret = document.getElementById('wc_consumer_secret').value.trim();
        const websiteUrl = document.getElementById('wc_website_url').value.trim();
        const syncBtn = document.getElementById('wcSyncBtn');

        if (!consumerKey || !consumerSecret || !websiteUrl) {
            alert('لطفاً تمامی فیلدهای الزامی برای اتصال به ووکامرس را پر کنید.');
            return;
        }

        syncBtn.disabled = true;
        syncBtn.innerText = 'در حال اعتبارسنجی و دریافت محصولات...';
        syncBtn.style.opacity = '0.6';

        fetch("{{ route('admin.aichat.woocommerce.import') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                consumer_key: consumerKey,
                consumer_secret: consumerSecret,
                website_url: websiteUrl
            })
        })
        .then(res => res.json())
        .then(data => {
            syncBtn.disabled = false;
            syncBtn.innerText = 'اعتبارسنجی ووکامرس';
            syncBtn.style.opacity = '1';

            if (data.success) {
                categoryData.products = categoryData.products.concat(data.products);
                renderProductList();
                alert(`اتصال با موفقیت برقرار شد! تعداد ${data.products.length} محصول از فروشگاه ووکامرس شما وارد شد.`);
            } else {
                alert(data.message || 'خطا در ارتباط با ووکامرس.');
            }
        })
        .catch(err => {
            syncBtn.disabled = false;
            syncBtn.innerText = 'اعتبارسنجی ووکامرس';
            syncBtn.style.opacity = '1';
            alert('خطای شبکه. امکان ارتباط با سرور وجود ندارد.');
        });
    }

    function submitProductSource() {
        const type = document.querySelector('input[name="product_source_type"]:checked').value;
        if (type === 'single') {
            const title = document.getElementById('single_prod_title').value.trim();
            const price = document.getElementById('single_prod_price').value.trim();
            const url = document.getElementById('single_prod_url').value.trim();
            const details = document.getElementById('single_prod_details').value.trim();

            if (!title) {
                alert('لطفاً نام محصول را وارد کنید.');
                return;
            }

            categoryData.products.push({
                title: title,
                price: price || '0',
                url: url,
                details: details
            });

            // Reset inputs
            document.getElementById('single_prod_title').value = '';
            document.getElementById('single_prod_price').value = '';
            document.getElementById('single_prod_url').value = '';
            document.getElementById('single_prod_details').value = '';
            const titleCounter = document.getElementById('title_counter');
            if (titleCounter) titleCounter.innerText = '0';
            const detailsCounter = document.getElementById('details_counter');
            if (detailsCounter) detailsCounter.innerText = '0';

            renderProductList();
            alert('محصول با موفقیت به لیست اضافه شد.');
        } else {
            closeProductManagerModal();
        }
    }
</script>
@endsection