@extends('layouts.dashboard')

@section('title', 'العملاء المحتملين')

@section('content')
<div class="space-y-6">
    <!-- Sales Funnel Visualization -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-bold text-gray-800">📊 مسار المبيعات (Sales Funnel)</h2>
            <span class="bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full text-sm font-medium">نسبة التحويل: {{ $stats['total'] > 0 ? round(($stats['converted'] / $stats['total']) * 100, 1) : 0 }}%</span>
        </div>

        <div class="relative">
            <!-- Connecting Line -->
            <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-100 -translate-y-1/2 z-0 hidden md:block"></div>

            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 relative z-10">
                <!-- Total Stage -->
                <div class="bg-white rounded-xl shadow-md p-4 text-center border-t-4 border-gray-400 relative group hover:-translate-y-1 transition duration-300">
                    <div class="w-12 h-12 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center mx-auto mb-3 shadow-inner text-xl group-hover:bg-gray-200 transition">🌍</div>
                    <p class="text-3xl font-black text-gray-800">{{ number_format($stats['total'] ?? 0) }}</p>
                    <p class="text-sm font-medium text-gray-500 mt-1">إجمالي العملاء</p>
                    <div class="mt-3 text-xs bg-gray-50 text-gray-400 py-1 rounded-md">100% من البداية</div>
                </div>

                <!-- New Stage -->
                <div class="bg-white rounded-xl shadow-md p-4 text-center border-t-4 border-blue-400 relative group hover:-translate-y-1 transition duration-300">
                    <div class="w-12 h-12 bg-blue-50 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-inner text-xl group-hover:bg-blue-100 transition">🆕</div>
                    <p class="text-3xl font-black text-gray-800">{{ number_format($stats['new'] ?? 0) }}</p>
                    <p class="text-sm font-medium text-gray-500 mt-1">جديد</p>
                    <div class="mt-3 text-xs bg-blue-50 text-blue-600 py-1 rounded-md">{{ $stats['total'] > 0 ? round((($stats['new'] ?? 0) / $stats['total']) * 100, 1) : 0 }}% من الإجمالي</div>
                </div>

                <!-- Engaged Stage -->
                <div class="bg-white rounded-xl shadow-md p-4 text-center border-t-4 border-amber-400 relative group hover:-translate-y-1 transition duration-300">
                    <div class="w-12 h-12 bg-amber-50 text-amber-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-inner text-xl group-hover:bg-amber-100 transition">💬</div>
                    <p class="text-3xl font-black text-gray-800">{{ number_format($stats['engaged'] ?? 0) }}</p>
                    <p class="text-sm font-medium text-gray-500 mt-1">متفاعل</p>
                    <div class="mt-3 text-xs bg-amber-50 text-amber-600 py-1 rounded-md">مهتم مبدئياً</div>
                </div>

                <!-- Qualified Stage -->
                <div class="bg-white rounded-xl shadow-md p-4 text-center border-t-4 border-indigo-400 relative group hover:-translate-y-1 transition duration-300">
                    <div class="w-12 h-12 bg-indigo-50 text-indigo-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-inner text-xl group-hover:bg-indigo-100 transition">⭐</div>
                    <p class="text-3xl font-black text-gray-800">{{ number_format($stats['qualified'] ?? 0) }}</p>
                    <p class="text-sm font-medium text-gray-500 mt-1">مؤهل (VIP)</p>
                    <div class="mt-3 text-xs bg-indigo-50 text-indigo-600 py-1 rounded-md">نقاط > 100</div>
                </div>

                <!-- Converted Stage -->
                <div class="bg-white rounded-xl shadow-md p-4 text-center border-t-4 border-green-500 relative group hover:-translate-y-1 transition duration-300">
                    <div class="w-12 h-12 bg-green-50 text-green-500 rounded-full flex items-center justify-center mx-auto mb-3 shadow-inner text-xl group-hover:bg-green-100 transition">🎯</div>
                    <p class="text-3xl font-black text-gray-800">{{ number_format($stats['converted'] ?? 0) }}</p>
                    <p class="text-sm font-medium text-gray-500 mt-1">محوّل (مبيعة)</p>
                    <div class="mt-3 text-xs bg-green-50 text-green-600 py-1 rounded-md font-bold">أغلقت الصفقة</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Header + Filters -->
    <div class="bg-white rounded-xl shadow-sm p-4">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold text-gray-800">👥 العملاء المحتملين</h1>
            <a href="{{ route('leads.export', request()->query()) }}" 
               class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-lg text-sm transition">
                📤 تصدير CSV
            </a>
        </div>

        <form method="GET" action="{{ route('leads.index') }}" class="flex flex-wrap gap-3 items-end">
            <!-- Search -->
            <div class="flex-1 min-w-[200px]">
                <label class="block text-xs text-gray-500 mb-1">البحث</label>
                <input type="text" name="search" value="{{ request('search') }}" 
                       placeholder="اسم، هاتف، بريد..."
                       class="w-full rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
            </div>

            <!-- Status Filter -->
            <div>
                <label class="block text-xs text-gray-500 mb-1">الحالة</label>
                <select name="status" class="rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                    <option value="">كل الحالات</option>
                    <option value="new" {{ request('status') === 'new' ? 'selected' : '' }}>🆕 جديد</option>
                    <option value="engaged" {{ request('status') === 'engaged' ? 'selected' : '' }}>💬 متفاعل</option>
                    <option value="qualified" {{ request('status') === 'qualified' ? 'selected' : '' }}>⭐ مؤهل</option>
                    <option value="converted" {{ request('status') === 'converted' ? 'selected' : '' }}>✅ محوّل</option>
                    <option value="lost" {{ request('status') === 'lost' ? 'selected' : '' }}>❌ مفقود</option>
                </select>
            </div>

            <!-- Channel Filter -->
            <div>
                <label class="block text-xs text-gray-500 mb-1">القناة</label>
                <select name="channel" class="rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                    <option value="">كل القنوات</option>
                    <option value="whatsapp" {{ request('channel') === 'whatsapp' ? 'selected' : '' }}>📱 واتساب</option>
                    <option value="messenger" {{ request('channel') === 'messenger' ? 'selected' : '' }}>💬 ماسنجر</option>
                    <option value="instagram" {{ request('channel') === 'instagram' ? 'selected' : '' }}>📷 انستغرام</option>
                </select>
            </div>

            <!-- Min Score -->
            <div>
                <label class="block text-xs text-gray-500 mb-1">الحد الأدنى للنقاط</label>
                <input type="number" name="min_score" value="{{ request('min_score') }}" placeholder="0"
                       class="w-24 rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
            </div>

            <!-- Tag Filter -->
            <div>
                <label class="block text-xs text-gray-500 mb-1">الوسوم (Tags)</label>
                <input type="text" name="tag" value="{{ request('tag') }}" placeholder="vip, عاجل..."
                       class="w-32 rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
            </div>

            <button type="submit" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg text-sm transition">
                🔍 بحث
            </button>

            @if(request()->hasAny(['search', 'status', 'channel', 'min_score', 'tag']))
                <a href="{{ route('leads.index') }}" class="text-gray-500 hover:text-gray-700 text-sm underline py-2">
                    مسح الفلاتر
                </a>
            @endif
        </form>
    </div>

    <!-- Leads Table -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">العميل</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">القناة</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        <a href="{{ route('leads.index', array_merge(request()->query(), ['sort' => 'lead_score', 'dir' => request('sort') === 'lead_score' && request('dir') !== 'asc' ? 'asc' : 'desc'])) }}"
                           class="hover:text-gray-800">
                            النقاط {!! request('sort') === 'lead_score' ? (request('dir') === 'asc' ? '↑' : '↓') : '' !!}
                        </a>
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">الحالة</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">الرسائل</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                        <a href="{{ route('leads.index', array_merge(request()->query(), ['sort' => 'last_contact_date', 'dir' => request('sort') === 'last_contact_date' && request('dir') !== 'asc' ? 'asc' : 'desc'])) }}"
                           class="hover:text-gray-800">
                            آخر تواصل {!! request('sort') === 'last_contact_date' ? (request('dir') === 'asc' ? '↑' : '↓') : '' !!}
                        </a>
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">الإجراءات</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($leads as $lead)
                    <tr class="hover:bg-gray-50 transition" id="lead-row-{{ $lead->id }}">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <a href="{{ route('leads.show', $lead) }}" class="block hover:text-emerald-600">
                                <p class="font-medium text-gray-900">{{ $lead->display_name }}</p>
                                @if($lead->phone)
                                    <p class="text-sm text-gray-500">{{ $lead->phone }}</p>
                                @endif
                            </a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($lead->channel === 'whatsapp')
                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">📱 واتساب</span>
                            @elseif($lead->channel === 'messenger')
                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">💬 ماسنجر</span>
                            @else
                                <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs">📷 انستغرام</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $scoreColor = $lead->lead_score >= 100 ? 'from-red-500 to-orange-500' : 
                                             ($lead->lead_score >= 70 ? 'from-orange-400 to-amber-400' : 
                                             ($lead->lead_score >= 40 ? 'from-amber-400 to-yellow-400' : 'from-gray-400 to-gray-500'));
                            @endphp
                            <span class="bg-gradient-to-r {{ $scoreColor }} text-white px-3 py-1 rounded-full text-sm font-bold">
                                {{ $lead->lead_score }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $statusColors = [
                                    'new' => 'bg-blue-100 text-blue-800',
                                    'engaged' => 'bg-amber-100 text-amber-800',
                                    'qualified' => 'bg-emerald-100 text-emerald-800',
                                    'converted' => 'bg-green-100 text-green-800',
                                    'lost' => 'bg-red-100 text-red-800',
                                ];
                                $statusNames = [
                                    'new' => 'جديد',
                                    'engaged' => 'متفاعل',
                                    'qualified' => 'مؤهل',
                                    'converted' => 'محوّل',
                                    'lost' => 'مفقود',
                                ];
                            @endphp
                            <span class="{{ $statusColors[$lead->status] ?? 'bg-gray-100 text-gray-800' }} px-2 py-1 rounded-full text-xs">
                                {{ $statusNames[$lead->status] ?? $lead->status }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="text-emerald-600" title="واردة">{{ $lead->total_messages_received }}</span> / 
                            <span class="text-blue-600" title="صادرة">{{ $lead->total_messages_sent }}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $lead->last_contact_date ? $lead->last_contact_date->diffForHumans() : 'لم يتواصل بعد' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm space-x-1 space-x-reverse">
                            <!-- View Conversations -->
                            <a href="{{ route('leads.show', $lead) }}" 
                               class="inline-block text-emerald-600 hover:text-emerald-800 p-1 rounded hover:bg-emerald-50 transition" 
                               title="عرض المحادثات">
                                💬
                            </a>

                            <!-- Mark as Converted -->
                            @if($lead->status !== 'converted')
                                <form method="POST" action="{{ route('leads.status.update', $lead) }}" class="inline">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="status" value="converted">
                                    <button type="submit" 
                                            class="text-green-600 hover:text-green-800 p-1 rounded hover:bg-green-50 transition"
                                            title="تحويل"
                                            onclick="return confirm('هل تريد تحويل هذا العميل؟')">
                                        ✅
                                    </button>
                                </form>
                            @endif

                            <!-- Mark as Lost -->
                            @if($lead->status !== 'lost')
                                <form method="POST" action="{{ route('leads.status.update', $lead) }}" class="inline">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="status" value="lost">
                                    <button type="submit" 
                                            class="text-red-600 hover:text-red-800 p-1 rounded hover:bg-red-50 transition"
                                            title="فقدان"
                                            onclick="return confirm('هل تريد وضع علامة فقدان على هذا العميل؟')">
                                        ❌
                                    </button>
                                </form>
                            @endif

                            <!-- Memory -->
                            <a href="{{ route('leads.memory.show', $lead) }}" 
                               class="inline-block text-purple-600 hover:text-purple-800 p-1 rounded hover:bg-purple-50 transition"
                               title="ذاكرة العميل">
                                🧠
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                            @if(request()->hasAny(['search', 'status', 'channel', 'min_score']))
                                لا يوجد نتائج مطابقة للفلتر الحالي
                            @else
                                لا يوجد عملاء محتملين بعد
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {{ $leads->links() }}
    </div>
</div>
@endsection