@extends('layouts.dashboard')

@section('title', 'المحادثات')

@section('content')
    <div class="space-y-6">
        <!-- Header -->
        <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <h1 class="text-2xl font-bold text-gray-800">💬 المحادثات</h1>
                <!-- Refresh Button -->
                <a href="javascript:window.location.reload(true)"
                    class="p-2 text-emerald-600 hover:bg-emerald-50 rounded-full transition" title="تحديث فوري">
                    <svg class="w-5 h-5" 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">
                        </path>
                    </svg>
                </a>
            </div>

            <!-- Filters Form -->
            <form method="GET" action="{{ route('dashboard.conversations') }}" class="flex flex-wrap gap-3 items-end">
                <!-- 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>

                <!-- Intent Filter -->
                <div>
                    <label class="block text-xs text-gray-500 mb-1">النية (Intent)</label>
                    <select name="intent"
                        class="rounded-lg border-gray-300 shadow-sm focus:ring-emerald-500 focus:border-emerald-500 text-sm">
                        <option value="">كل النوايا</option>
                        @foreach($intents as $intent)
                            @if($intent)
                                <option value="{{ $intent }}" {{ request('intent') === $intent ? 'selected' : '' }}>{{ $intent }}
                                </option>
                            @endif
                        @endforeach
                    </select>
                </div>

                <!-- Date Filter -->
                <div>
                    <label class="block text-xs text-gray-500 mb-1">التاريخ</label>
                    <input type="date" name="date" value="{{ request('date') }}"
                        class="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 h-9">
                    🔍 تصفية
                </button>
                @if(request()->hasAny(['channel', 'intent', 'date']))
                    <a href="{{ route('dashboard.conversations') }}"
                        class="text-gray-500 hover:text-red-600 text-sm py-2 px-2 transition underline">مسح الفلاتر</a>
                @endif
            </form>
        </div>

        <!-- Conversations 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">اللغة</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">التاريخ</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($conversations as $conversation)
                        <tr class="transition-colors {{ $conversation->lead ? 'hover:bg-emerald-50 cursor-pointer' : 'hover:bg-gray-50' }}"
                            @if($conversation->lead)
                            onclick="window.location.href='{{ route('leads.show', $conversation->lead->id) }}'" @endif
                            title="{{ $conversation->lead ? 'عرض ملف العميل المرتبط' : 'لا يوجد عميل مرتبط' }}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($conversation->channel === 'whatsapp')
                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">📱 واتساب</span>
                                @elseif($conversation->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">
                                <p class="text-gray-900 line-clamp-1">{{ Str::limit($conversation->text, 60) }}</p>
                                @if($conversation->ai_response)
                                    <p class="text-gray-500 text-sm line-clamp-1 mt-1">←
                                        {{ Str::limit($conversation->ai_response, 50) }}</p>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $conversation->language ?? '-' }}
                                @if($conversation->dialect)
                                    <span class="text-emerald-600">({{ $conversation->dialect }})</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($conversation->detected_intent)
                                    <span
                                        class="bg-emerald-100 text-emerald-800 px-2 py-1 rounded-full text-xs">{{ $conversation->detected_intent }}</span>
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($conversation->sent)
                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">✓ تم الإرسال</span>
                                @elseif($conversation->ai_response)
                                    <span class="bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs">⏳ في الانتظار</span>
                                @else
                                    <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">🔄 قيد المعالجة</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ $conversation->created_at->format('Y-m-d H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                                لا توجد محادثات بعد
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="mt-4">
            {{ $conversations->appends(request()->query())->links() }}
        </div>
    </div>

    <!-- Replaced hardcoded script -->
@endsection