@extends('layouts.dashboard')

@section('title', 'الإعدادات')

@section('content')
    <div class="space-y-6">
        <!-- Header -->
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-800">⚙️ الإعدادات</h1>
                <p class="text-gray-500 mt-1">إدارة إعدادات البوت والتكاملات</p>
            </div>
        </div>

        <!-- Success Message -->
        @if(session('success'))
            <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2">
                <span>✅</span>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        <!-- Webhook Info -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-6">
            <h3 class="text-lg font-bold text-blue-800 mb-3">🔗 معلومات Webhook</h3>
            <p class="text-blue-700 mb-4">استخدم هذه البيانات عند تسجيل الـ Webhook في Meta Developer Console:</p>

            <div class="grid md:grid-cols-2 gap-4">
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Callback URL</label>
                    <div class="flex items-center gap-2">
                        <input type="text" readonly value="{{ $webhookUrl }}"
                            class="flex-1 bg-gray-50 border-gray-200 rounded-lg text-sm" id="webhook-url">
                        <button onclick="copyToClipboard('webhook-url')"
                            class="bg-blue-100 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-200 transition">
                            📋
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <label class="block text-sm font-medium text-gray-600 mb-1">Verify Token</label>
                    <div class="flex items-center gap-2">
                        <input type="text" readonly value="{{ $verifyToken }}"
                            class="flex-1 bg-gray-50 border-gray-200 rounded-lg text-sm" id="verify-token">
                        <button onclick="copyToClipboard('verify-token')"
                            class="bg-blue-100 text-blue-700 px-3 py-2 rounded-lg hover:bg-blue-200 transition">
                            📋
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('settings.save') }}" method="POST" class="space-y-6">
            @csrf

            <!-- AI Providers Section -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 px-6 py-4 border-b">
                    <h3 class="text-lg font-bold text-gray-800">🤖 مزودي الذكاء الاصطناعي</h3>
                    <p class="text-gray-500 text-sm">إعدادات Gemini و OpenRouter (يدعم مفاتيح متعددة)</p>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Provider Order -->
                    <div class="grid md:grid-cols-3 gap-4 items-start">
                        <div>
                            <label class="block font-medium text-gray-700">ترتيب المزودين</label>
                            <p class="text-sm text-gray-500">ترتيب الأولوية (يبدأ بالأول)</p>
                        </div>
                        <div class="md:col-span-2">
                            <input type="text" name="settings[ai_provider_order]"
                                value="{{ $settings['ai_provider_order'] ?? 'gemini,openrouter' }}"
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-purple-500 focus:border-purple-500"
                                placeholder="gemini,openrouter">
                            <p class="text-xs text-gray-400 mt-1">مثال: gemini,openrouter</p>
                        </div>
                    </div>

                    <hr class="border-gray-200">

                    <!-- Gemini Section -->
                    <div class="bg-blue-50/50 rounded-xl p-5 border border-blue-100">
                        <h4 class="font-bold text-blue-800 mb-4 flex items-center gap-2">
                            🌟 Google Gemini
                            <span class="text-xs bg-blue-100 text-blue-600 px-2 py-1 rounded">Primary</span>
                        </h4>

                        <!-- Gemini Model -->
                        <div class="grid md:grid-cols-3 gap-4 items-start mb-4">
                            <div>
                                <label class="block font-medium text-gray-700">اسم النموذج</label>
                                <p class="text-sm text-gray-500">أدخل اسم النموذج يدوياً</p>
                            </div>
                            <div class="md:col-span-2">
                                <input type="text" name="settings[gemini_model]"
                                    value="{{ $settings['gemini_model'] ?? 'gemini-2.5-flash' }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="gemini-2.5-flash">
                                <p class="text-xs text-gray-400 mt-1">أمثلة: gemini-2.5-flash, gemini-2.5-pro,
                                    gemini-2.5-flash-lite</p>
                            </div>
                        </div>

                        <!-- Gemini API Keys -->
                        <div class="grid md:grid-cols-3 gap-4 items-start">
                            <div>
                                <label class="block font-medium text-gray-700">مفاتيح API</label>
                                <p class="text-sm text-gray-500">مفتاح واحد في كل سطر</p>
                            </div>
                            <div class="md:col-span-2">
                                <textarea name="settings[gemini_api_keys_text]" rows="4"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
                                    placeholder="AIzaSy...&#10;AIzaSy...&#10;AIzaSy...">{{ $geminiKeysText ?? '' }}</textarea>
                                <p class="text-xs text-gray-400 mt-1">
                                    يمكنك إضافة عدة مفاتيح للتناوب التلقائي عند استنفاد الـ quota
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- OpenRouter Section -->
                    <div class="bg-orange-50/50 rounded-xl p-5 border border-orange-100">
                        <h4 class="font-bold text-orange-800 mb-4 flex items-center gap-2">
                            🚀 OpenRouter
                            <span class="text-xs bg-orange-100 text-orange-600 px-2 py-1 rounded">Fallback</span>
                        </h4>

                        <!-- OpenRouter Model -->
                        <div class="grid md:grid-cols-3 gap-4 items-start mb-4">
                            <div>
                                <label class="block font-medium text-gray-700">اسم النموذج</label>
                                <p class="text-sm text-gray-500">أدخل اسم النموذج يدوياً</p>
                            </div>
                            <div class="md:col-span-2">
                                <input type="text" name="settings[openrouter_model]"
                                    value="{{ $settings['openrouter_model'] ?? 'deepseek/deepseek-chat' }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-orange-500 focus:border-orange-500"
                                    placeholder="deepseek/deepseek-chat">
                                <p class="text-xs text-gray-400 mt-1">أمثلة: deepseek/deepseek-chat, qwen/qwen3-72b,
                                    anthropic/claude-3.5-sonnet</p>
                            </div>
                        </div>

                        <!-- OpenRouter API Keys -->
                        <div class="grid md:grid-cols-3 gap-4 items-start">
                            <div>
                                <label class="block font-medium text-gray-700">مفاتيح API</label>
                                <p class="text-sm text-gray-500">مفتاح واحد في كل سطر</p>
                            </div>
                            <div class="md:col-span-2">
                                <textarea name="settings[openrouter_api_keys_text]" rows="4"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-orange-500 focus:border-orange-500 font-mono text-sm"
                                    placeholder="sk-or-v1-...&#10;sk-or-v1-...">{{ $openrouterKeysText ?? '' }}</textarea>
                                <p class="text-xs text-gray-400 mt-1">
                                    يمكنك إضافة عدة مفاتيح للتناوب التلقائي عند استنفاد الـ quota
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Test Buttons -->
                    <div class="pt-4 border-t flex flex-wrap gap-3">
                        <button type="button" onclick="testConnection('gemini')"
                            class="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg hover:bg-blue-200 transition flex items-center gap-2">
                            🌟 اختبار Gemini
                        </button>
                        <button type="button" onclick="testConnection('openrouter')"
                            class="bg-orange-100 text-orange-700 px-4 py-2 rounded-lg hover:bg-orange-200 transition flex items-center gap-2">
                            🚀 اختبار OpenRouter
                        </button>
                        <button type="button" onclick="testConnection('all')"
                            class="bg-purple-100 text-purple-700 px-4 py-2 rounded-lg hover:bg-purple-200 transition flex items-center gap-2">
                            🔄 اختبار الكل
                        </button>
                    </div>
                </div>
            </div>

            <!-- AI Instructions Section -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="bg-gradient-to-r from-emerald-50 to-teal-50 px-6 py-4 border-b">
                    <h3 class="text-lg font-bold text-gray-800">📝 تعليمات الذكاء الاصطناعي (Instructions)</h3>
                    <p class="text-gray-500 text-sm">البرومبت الأساسي الذي يحدد أسلوب وسلوك الذكاء الاصطناعي في الردود</p>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Source Selector -->
                    <div class="grid md:grid-cols-3 gap-4 items-start">
                        <div>
                            <label class="block font-medium text-gray-700">مصدر التعليمات</label>
                            <p class="text-sm text-gray-500">من أين يقرأ الذكاء الاصطناعي التعليمات</p>
                        </div>
                        <div class="md:col-span-2">
                            <select name="settings[ai_instructions_source]" id="instructions-source"
                                class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                                onchange="toggleInstructionsSource(this.value)">
                                <option value="database" {{ ($aiInstructionsSource ?? 'database') === 'database' ? 'selected' : '' }}>
                                    📦 قاعدة البيانات (تعديل مباشر من لوحة التحكم)
                                </option>
                                <option value="file" {{ ($aiInstructionsSource ?? 'database') === 'file' ? 'selected' : '' }}>
                                    📄 ملف نصي (storage/app/ai_instructions.txt)
                                </option>
                            </select>
                        </div>
                    </div>

                    <!-- Database Instructions (textarea) -->
                    <div id="instructions-database"
                        class="{{ ($aiInstructionsSource ?? 'database') === 'file' ? 'hidden' : '' }}">
                        <div class="grid md:grid-cols-3 gap-4 items-start">
                            <div>
                                <label class="block font-medium text-gray-700">التعليمات</label>
                                <p class="text-sm text-gray-500">اكتب التعليمات التي تحدد سلوك البوت</p>
                                <div class="mt-3 bg-gray-50 rounded-lg p-3 text-xs text-gray-500 space-y-1">
                                    <p class="font-bold text-gray-600">📌 متغيرات متاحة:</p>
                                    <p><code class="bg-gray-200 px-1 rounded">{agency_name}</code> — اسم الوكالة</p>
                                    <p><code class="bg-gray-200 px-1 rounded">{language_instruction}</code> — تعليمات اللغة
                                    </p>
                                </div>
                            </div>
                            <div class="md:col-span-2">
                                <textarea name="settings[ai_instructions]" rows="14" id="ai-instructions-textarea"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 font-mono text-sm leading-relaxed"
                                    placeholder="اكتب تعليمات الذكاء الاصطناعي هنا..."
                                    dir="rtl">{{ $aiInstructions ?? '' }}</textarea>
                                <div class="flex items-center justify-between mt-2">
                                    <p class="text-xs text-gray-400">
                                        💡 يمكنك استخدام Markdown لتنسيق النص
                                    </p>
                                    <span id="char-count" class="text-xs text-gray-400"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- File Instructions -->
                    <div id="instructions-file"
                        class="{{ ($aiInstructionsSource ?? 'database') !== 'file' ? 'hidden' : '' }}">
                        <div class="bg-amber-50 rounded-xl p-5 border border-amber-200">
                            <h4 class="font-bold text-amber-800 mb-3 flex items-center gap-2">
                                📄 ملف التعليمات
                                @if($aiInstructionsFileExists ?? false)
                                    <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded">✅ موجود</span>
                                @else
                                    <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">❌ غير موجود</span>
                                @endif
                            </h4>
                            <p class="text-sm text-amber-700 mb-4">
                                المسار: <code
                                    class="bg-amber-100 px-2 py-1 rounded text-xs">storage/app/ai_instructions.txt</code>
                            </p>

                            <div class="flex flex-wrap gap-3">
                                <a href="{{ route('settings.instructions.download') }}"
                                    class="bg-white text-amber-700 px-4 py-2 rounded-lg border border-amber-300 hover:bg-amber-50 transition flex items-center gap-2 text-sm">
                                    ⬇️ تحميل الملف الحالي
                                </a>
                            </div>
                        </div>

                        <!-- File Upload -->
                        <div class="mt-4 bg-gray-50 rounded-xl p-5 border border-gray-200">
                            <h4 class="font-medium text-gray-700 mb-3">⬆️ رفع ملف تعليمات جديد</h4>
                            <div class="flex items-center gap-3">
                                <input type="file" id="instructions-file-input" accept=".txt"
                                    form="upload-instructions-form" name="instructions_file"
                                    class="block w-full text-sm text-gray-500 file:ml-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100">
                                <button type="submit" form="upload-instructions-form"
                                    class="bg-emerald-100 text-emerald-700 px-4 py-2 rounded-lg hover:bg-emerald-200 transition text-sm font-medium whitespace-nowrap">
                                    ⬆️ رفع
                                </button>
                            </div>
                            <p class="text-xs text-gray-400 mt-2">ملف نصي .txt فقط، حجم أقصى 512 كيلوبايت</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Other Settings Groups -->
            @foreach($groups as $groupKey => $group)
                @if($groupKey !== 'ai_providers' && $groupKey !== 'ai_internal')
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b">
                            <h3 class="text-lg font-bold text-gray-800">{{ $group['title'] }}</h3>
                            <p class="text-gray-500 text-sm">{{ $group['description'] }}</p>
                        </div>

                        <div class="p-6 space-y-4">
                            @foreach($group['settings'] as $setting)
                                <div class="grid md:grid-cols-3 gap-4 items-start">
                                    <div>
                                        <label class="block font-medium text-gray-700">{{ $setting->label }}</label>
                                        <p class="text-sm text-gray-500">{{ $setting->description }}</p>
                                    </div>
                                    <div class="md:col-span-2">
                                        @if($setting->type === 'textarea')
                                            <textarea name="settings[{{ $setting->key }}]" rows="3"
                                                class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                                                placeholder="{{ $setting->label }}">{{ $setting->decrypted_value }}</textarea>

                                        @elseif($setting->type === 'password')
                                            <div class="relative">
                                                <input type="password" name="settings[{{ $setting->key }}]"
                                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 pl-10"
                                                    placeholder="{{ $setting->value ? '••••••••' : 'أدخل القيمة' }}"
                                                    id="field-{{ $setting->key }}">
                                                <button type="button" onclick="togglePassword('field-{{ $setting->key }}')"
                                                    class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                                    👁️
                                                </button>
                                            </div>
                                            @if($setting->value)
                                                <p class="text-xs text-gray-400 mt-1">القيمة الحالية: {{ $setting->display_value }}</p>
                                            @endif

                                        @elseif($setting->type === 'select')
                                            <select name="settings[{{ $setting->key }}]"
                                                class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500">
                                                @foreach($setting->options as $optionValue => $optionLabel)
                                                    <option value="{{ $optionValue }}" {{ $setting->value == $optionValue ? 'selected' : '' }}>
                                                        {{ $optionLabel }}
                                                    </option>
                                                @endforeach
                                            </select>

                                        @else
                                            <input type="text" name="settings[{{ $setting->key }}]" value="{{ $setting->decrypted_value }}"
                                                class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500"
                                                placeholder="{{ $setting->label }}">
                                        @endif
                                    </div>
                                </div>
                            @endforeach

                            <!-- Test Buttons for Meta -->
                            @if($groupKey === 'meta')
                                <div class="pt-4 border-t flex flex-wrap gap-3">
                                    <button type="button" onclick="testConnection('meta')"
                                        class="bg-blue-100 text-blue-700 px-4 py-2 rounded-lg hover:bg-blue-200 transition flex items-center gap-2">
                                        🔄 اختبار Messenger
                                    </button>
                                    <button type="button" onclick="testConnection('whatsapp')"
                                        class="bg-green-100 text-green-700 px-4 py-2 rounded-lg hover:bg-green-200 transition flex items-center gap-2">
                                        📱 اختبار WhatsApp
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            @endforeach

            <!-- Save Button -->
            <div class="flex justify-end">
                <button type="submit"
                    class="bg-gradient-to-r from-emerald-500 to-teal-600 text-white px-8 py-3 rounded-lg font-bold shadow-lg hover:shadow-xl transition flex items-center gap-2">
                    💾 حفظ الإعدادات
                </button>
            </div>
        </form>

        <!-- Upload Instructions Form (separate from main form) -->
        <form id="upload-instructions-form" action="{{ route('settings.instructions.upload') }}" method="POST"
            enctype="multipart/form-data">
            @csrf
        </form>
    </div>

    <!-- Test Result Modal -->
    <div id="test-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl">
            <div id="test-result" class="text-center">
                <div class="animate-spin text-4xl mb-4">⏳</div>
                <p>جاري الاختبار...</p>
            </div>
            <button onclick="closeModal()"
                class="mt-4 w-full bg-gray-100 text-gray-700 py-2 rounded-lg hover:bg-gray-200 transition">
                إغلاق
            </button>
        </div>
    </div>

    @push('scripts')
        <script>
            function copyToClipboard(id) {
                const input = document.getElementById(id);
                input.select();
                document.execCommand('copy');
                alert('تم النسخ! ✅');
            }

            function togglePassword(id) {
                const input = document.getElementById(id);
                input.type = input.type === 'password' ? 'text' : 'password';
            }

            function testConnection(type) {
                const modal = document.getElementById('test-modal');
                const result = document.getElementById('test-result');

                modal.classList.remove('hidden');
                modal.classList.add('flex');
                result.innerHTML = '<div class="animate-spin text-4xl mb-4">⏳</div><p>جاري الاختبار...</p>';

                const urls = {
                    'meta': '{{ route("settings.test.meta") }}',
                    'whatsapp': '{{ route("settings.test.whatsapp") }}',
                    'gemini': '{{ route("settings.test.gemini") }}',
                    'openrouter': '{{ route("settings.test.openrouter") }}',
                    'all': '{{ route("settings.test.all") }}'
                };

                fetch(urls[type])
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            let extraInfo = '';
                            if (data.data) {
                                if (data.data.keys_count !== undefined) {
                                    extraInfo = `<p class="text-sm text-gray-500 mt-2">عدد المفاتيح: ${data.data.keys_count}</p>`;
                                }
                                if (data.data.gemini || data.data.openrouter) {
                                    extraInfo = '<div class="mt-4 text-right text-sm">';
                                    for (const [provider, info] of Object.entries(data.data)) {
                                        const statusIcon = info.status === 'connected' ? '✅' : (info.status === 'not_configured' ? '⚪' : '❌');
                                        extraInfo += `<p>${statusIcon} <strong>${provider}</strong>: ${info.message}</p>`;
                                    }
                                    extraInfo += '</div>';
                                }
                            }
                            result.innerHTML = `
                                            <div class="text-6xl mb-4">✅</div>
                                            <p class="text-green-600 font-bold text-lg">${data.message}</p>
                                            ${extraInfo}
                                        `;
                        } else {
                            result.innerHTML = `
                                            <div class="text-6xl mb-4">❌</div>
                                            <p class="text-red-600 font-bold text-lg">${data.message}</p>
                                        `;
                        }
                    })
                    .catch(error => {
                        result.innerHTML = `
                                        <div class="text-6xl mb-4">❌</div>
                                        <p class="text-red-600 font-bold">خطأ في الاتصال</p>
                                        <p class="text-gray-500 text-sm mt-2">${error.message}</p>
                                    `;
                    });
            }

            function closeModal() {
                document.getElementById('test-modal').classList.add('hidden');
                document.getElementById('test-modal').classList.remove('flex');
            }

            // AI Instructions toggle
            function toggleInstructionsSource(value) {
                const dbSection = document.getElementById('instructions-database');
                const fileSection = document.getElementById('instructions-file');

                if (value === 'file') {
                    dbSection.classList.add('hidden');
                    fileSection.classList.remove('hidden');
                } else {
                    dbSection.classList.remove('hidden');
                    fileSection.classList.add('hidden');
                }
            }

            // Character counter for instructions textarea
            const textarea = document.getElementById('ai-instructions-textarea');
            const charCount = document.getElementById('char-count');
            if (textarea && charCount) {
                function updateCount() {
                    charCount.textContent = textarea.value.length + ' حرف';
                }
                textarea.addEventListener('input', updateCount);
                updateCount();
            }
        </script>
    @endpush
@endsection