@extends('layouts.app')

@section('title', 'البحث بالذكاء الاصطناعي')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8" dir="rtl">
        <!-- Enhanced Header -->
        <header class="mb-10 relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 rounded-3xl p-8 shadow-2xl">
            <div class="absolute inset-0 bg-black opacity-10"></div>
            <div class="relative z-10 text-center">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full mb-6">
                    <i class="fas fa-robot text-white text-4xl"></i>
                </div>
                <h1 class="text-5xl font-black text-white mb-4">🤖 البحث بالذكاء الاصطناعي</h1>
                <p class="text-xl text-white/90 max-w-3xl mx-auto">اكتب وصفًا للشريك الذي تبحث عنه، وسيقوم الذكاء الاصطناعي بمساعدتك في العثور على أفضل تطابق</p>
                <div class="mt-6 flex justify-center space-x-4 space-x-reverse">
                    <div class="bg-white/20 rounded-full px-4 py-2 text-white text-sm">
                        <i class="fas fa-brain ml-2"></i>
                        تحليل ذكي متقدم
                    </div>
                    <div class="bg-white/20 rounded-full px-4 py-2 text-white text-sm">
                        <i class="fas fa-chart-line ml-2"></i>
                        نتائج دقيقة
                    </div>
                    <div class="bg-white/20 rounded-full px-4 py-2 text-white text-sm">
                        <i class="fas fa-clock ml-2"></i>
                        نتائج فورية
                    </div>
                </div>
            </div>
        </header>

        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 border border-gray-100 dark:border-gray-700">
            <div id="ai-search-form-container">
                <form id="ai-search-form" class="space-y-6">
                    @csrf
                    <div>
                        <label for="description" class="block text-lg font-semibold text-gray-800 dark:text-white mb-3">وصف الشريك المطلوب</label>
                        <textarea id="description" name="description" rows="6"
                                  class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-2xl p-4 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"
                                  placeholder="مثال: أبحث عن شريك يكون محبًا للسفر، ويستمتع بالطبيعة، ويكون من نفس مدينتي، ويحب القراءة والرياضة..." required></textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit" id="search-button"
                                class="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                            🔍 ابدأ البحث
                        </button>
                    </div>
                </form>
            </div>

            <!-- Loading Indicator -->
            <div id="loading-indicator" class="mt-8 text-center hidden">
                <div class="bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-2xl p-8">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full flex items-center justify-center animate-spin">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                    </div>
                    <p class="text-lg font-semibold text-gray-800 dark:text-white mb-2">جاري البحث بالذكاء الاصطناعي</p>
                    <p class="text-gray-600 dark:text-gray-400">يرجى الانتظار، نقوم بتحليل طلبك...</p>
                </div>
            </div>

            <!-- Results Container -->
            <div id="results-container" class="mt-8 space-y-6 hidden">
                <div class="text-center mb-8">
                    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">نتائج البحث</h2>
                    <p class="text-gray-600 dark:text-gray-400">تم العثور على <span id="results-count" class="font-bold text-purple-600">0</span> نتيجة</p>
                    <div class="mt-4 flex flex-wrap items-center justify-center gap-3">
                        <label class="text-sm text-gray-600 dark:text-gray-300">الترتيب:</label>
                        <select id="sort-select" class="text-sm rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-3 py-2">
                            <option value="score_desc">الأعلى توافقاً</option>
                            <option value="score_asc">الأقل توافقاً</option>
                            <option value="name_asc">الاسم (أ-ي)</option>
                            <option value="name_desc">الاسم (ي-أ)</option>
                        </select>
                        <label class="text-sm text-gray-600 dark:text-gray-300 ml-4">أدنى درجة:</label>
                        <input id="min-score" type="number" min="0" max="100" value="0" class="w-20 text-sm rounded-lg border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 px-2 py-2" />
                        <button id="apply-filters" class="px-3 py-2 text-sm bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg">تطبيق</button>
                    </div>
                </div>

                <div id="results-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    <!-- Results will be displayed here -->
                </div>

                <div id="no-results-message" class="text-center py-12 hidden">
                    <div class="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 rounded-2xl p-8 max-w-md mx-auto">
                        <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-500 rounded-full flex items-center justify-center">
                            <span class="text-3xl">🔍</span>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">لم يتم العثور على نتائج</h3>
                        <p class="text-gray-600 dark:text-gray-400 mb-4">حاول تعديل وصفك أو إضافة المزيد من التفاصيل</p>
                        <button onclick="document.getElementById('description').focus()" class="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300">
                            تعديل البحث
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('body-end')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('ai-search-form');
    const descriptionInput = document.getElementById('description');
    const searchButton = document.getElementById('search-button');
    const resultsContainer = document.getElementById('results-container');
    const resultsList = document.getElementById('results-list');
    const loadingIndicator = document.getElementById('loading-indicator');
    const noResultsMessage = document.getElementById('no-results-message');
    const resultsCount = document.getElementById('results-count');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    const sortSelect = document.getElementById('sort-select');
    const minScoreInput = document.getElementById('min-score');
    const applyFiltersBtn = document.getElementById('apply-filters');
    let lastUsers = [];

    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        const description = descriptionInput.value.trim();
        if (!description) {
            alert('يرجى كتابة وصف للشريك المطلوب');
            return;
        }

        loadingIndicator.classList.remove('hidden');
        resultsContainer.classList.add('hidden');
        noResultsMessage.classList.add('hidden');
        searchButton.disabled = true;

        try {
            const response = await fetch("{{ route('search.ai.perform') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ description })
            });

            const data = await response.json();

            if (!response.ok) {
                alert(data.message || 'حدث خطأ غير متوقع');
                return;
            }

            if (data.users && data.users.length > 0) {
                lastUsers = data.users.slice();
                displayResults(applyClientFilters(lastUsers));
            } else {
                showNoResults();
            }
        } catch (error) {
            console.error('Error:', error);
            alert('حدث خطأ في الاتصال. يرجى المحاولة مرة أخرى.');
        } finally {
            loadingIndicator.classList.add('hidden');
            searchButton.disabled = false;
        }
    });

    function displayResults(users) {
        resultsCount.textContent = users.length;
        resultsList.innerHTML = '';

        users.forEach(user => {
            const card = document.createElement('div');
            card.className = 'group relative bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 overflow-hidden';

            // Gradient Border Effect
            const gradientBorder = document.createElement('div');
            gradientBorder.className = 'absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl opacity-0 group-hover:opacity-10 transition-opacity duration-500 -z-10 blur-xl';
            card.appendChild(gradientBorder);

            // Profile Image
            const imgContainer = document.createElement('div');
            imgContainer.className = 'relative mb-4';

            const img = document.createElement('img');
            img.className = 'w-24 h-24 mx-auto rounded-full overflow-hidden border-4 border-white dark:border-gray-700 shadow-xl group-hover:scale-110 transition-transform duration-500 object-cover';
            img.alt = user.name || '';
            img.src = user.avatar ? '/storage/avatars/' + encodeURIComponent(user.avatar) : '/images/default-avatar.png';
            imgContainer.appendChild(img);

            // Online Status
            const onlineStatus = document.createElement('div');
            onlineStatus.className = 'absolute bottom-0 right-1/3 w-4 h-4 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full animate-pulse';
            imgContainer.appendChild(onlineStatus);
            card.appendChild(imgContainer);

            // User Info
            const userInfo = document.createElement('div');
            userInfo.className = 'text-center mb-4';

            const name = document.createElement('h3');
            name.className = 'font-bold text-lg text-gray-800 dark:text-white mb-1 group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors';
            name.textContent = user.name || 'غير محدد';
            userInfo.appendChild(name);

            const location = document.createElement('p');
            location.className = 'text-sm text-gray-500 dark:text-gray-400';
            location.textContent = `${user.city || 'غير محدد'}، ${user.country || 'غير محدد'}`;
            userInfo.appendChild(location);

            // Match Score Badge
            const scoreWrap = document.createElement('div');
            scoreWrap.className = 'mt-2 flex items-center justify-center';
            const badge = document.createElement('span');
            const score = Math.max(0, Math.min(100, parseInt(user.score || 0)));
            badge.textContent = `توافق ${score}%`;
            badge.className = 'inline-block text-xs px-3 py-1 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300';
            scoreWrap.appendChild(badge);
            userInfo.appendChild(scoreWrap);
            card.appendChild(userInfo);

            // Profile Completion
            const completionContainer = document.createElement('div');
            completionContainer.className = 'mb-4';

            const completionHeader = document.createElement('div');
            completionHeader.className = 'flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1';
            completionHeader.innerHTML = '<span>اكتمال الملف</span><span class="font-semibold">' + (user.profile_completeness || 0) + '%</span>';
            completionContainer.appendChild(completionHeader);

            const progressBar = document.createElement('div');
            progressBar.className = 'w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden';
            const progress = document.createElement('div');
            progress.className = 'h-2 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full transition-all duration-1000';
            progress.style.width = (user.profile_completeness || 0) + '%';
            progressBar.appendChild(progress);
            completionContainer.appendChild(progressBar);
            card.appendChild(completionContainer);

            // View Profile Button
            const viewButton = document.createElement('a');
            viewButton.href = '/profile/' + (user.id || '');
            viewButton.className = 'block w-full px-4 py-2 bg-gradient-to-r from-gray-600 to-gray-700 text-white text-sm font-bold rounded-xl hover:from-gray-700 hover:to-gray-800 transition-all duration-300 text-center shadow-lg hover:shadow-xl transform hover:scale-105';
            viewButton.textContent = '👁️ عرض الملف';
            card.appendChild(viewButton);

            resultsList.appendChild(card);
        });

        resultsContainer.classList.remove('hidden');
        noResultsMessage.classList.add('hidden');
    }

    function showNoResults() {
        resultsContainer.classList.remove('hidden');
        noResultsMessage.classList.remove('hidden');
        resultsList.innerHTML = '';
    }

    function applyClientFilters(users){
        const minScore = parseInt(minScoreInput.value || '0');
        let arr = users.filter(u => (parseInt(u.score || 0) >= minScore));
        switch (sortSelect.value){
            case 'score_asc':
                arr.sort((a,b)=>(a.score||0)-(b.score||0));
                break;
            case 'name_asc':
                arr.sort((a,b)=>String(a.name||'').localeCompare(String(b.name||''), 'ar'));
                break;
            case 'name_desc':
                arr.sort((a,b)=>String(b.name||'').localeCompare(String(a.name||''), 'ar'));
                break;
            case 'score_desc':
            default:
                arr.sort((a,b)=>(b.score||0)-(a.score||0));
        }
        return arr;
    }

    applyFiltersBtn?.addEventListener('click', function(){
        if(lastUsers && lastUsers.length){
            displayResults(applyClientFilters(lastUsers));
        }
    });
});
</script>
@endpush