@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto mt-10 bg-white rounded-2xl shadow p-0 overflow-hidden" dir="rtl">
    <div class="relative h-36 bg-gradient-to-l from-pink-500 via-purple-600 to-indigo-600">
        <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_20%_20%,white,transparent_35%)]"></div>
        <div class="absolute bottom-3 right-4 text-white">
            <h1 class="text-2xl font-bold">محادثاتي</h1>
            <p class="text-white/80 text-sm">تواصل فوري، مكالمات صوتية ومرئية، وحماية متقدمة</p>
        </div>
    </div>
    <div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold">محادثاتي</h1>
        <div class="text-sm">
            @if(!($showArchived ?? false))
                <a class="text-blue-600 hover:underline" href="{{ route('chat.index',['archived'=>1]) }}">عرض المؤرشفة</a>
            @else
                <a class="text-blue-600 hover:underline" href="{{ route('chat.index') }}">العودة للمحادثات</a>
            @endif
        </div>
    </div>

    <div class="mb-6">
        <button id="start-chat-btn" type="button" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 shadow">بدء محادثة جديدة</button>
        <div id="start-chat-panel" class="mt-3 hidden bg-brand-secondary/60 backdrop-blur p-4 rounded-lg">
            <input id="user-search-input" type="text" class="w-full border rounded px-3 py-2 mb-3" placeholder="ابحث عن مستخدم بالاسم أو البريد..." />
            <div id="user-search-results" class="space-y-2 max-h-64 overflow-y-auto"></div>
        </div>
    </div>

    @if($conversations->isEmpty())
        <p class="text-center text-brand-text">لا توجد محادثات حتى الآن.</p>
    @else
        <div class="space-y-3">
            @foreach($conversations as $conversation)
                @php
                    // ✅ استخدام العلاقات المحمّلة مسبقاً بدلاً من الاستعلام داخل الحلقة
                    $otherUser = $conversation->userOne->id === auth()->id()
                        ? $conversation->userTwo
                        : $conversation->userOne;
                    $unread = \App\Models\Message::where('conversation_id',$conversation->id)
                        ->where('receiver_id', auth()->id())
                        ->where('is_read', false)->count();
                @endphp
                <a href="{{ route('chat.show', $otherUser->id) }}"
                   class="flex items-center justify-between bg-white p-4 rounded-xl border shadow-sm hover:shadow-md transition-all duration-200">
                    <div class="flex items-center space-x-4 space-x-reverse">
                        {{-- ✅ عرض الصورة الشخصية --}}
                        @php
                            $avatar = $otherUser->avatar ? basename($otherUser->avatar) : null;
                            $avatarKey = $avatar ? ('avatars/' . $avatar) : null;
                            $avatarUrl = ($avatarKey && \Illuminate\Support\Facades\Storage::disk('public')->exists($avatarKey))
                                ? \Illuminate\Support\Facades\Storage::disk('public')->url($avatarKey)
                                : asset('images/default-avatar.png');
                        @endphp
                        <div class="relative">
                            <img src="{{ $avatarUrl }}" alt="صورة {{ $otherUser->name }}" class="w-12 h-12 rounded-full object-cover ring-2 ring-white shadow"/>
                            @if($conversation->isPinnedFor(auth()->id()))
                                <span class="absolute -top-1 -left-1 text-[10px] bg-amber-400 text-white rounded px-1">مثبّت</span>
                            @endif
                        </div>
                        <div>
                            <p class="font-semibold">{{ $otherUser->name }}</p>
                            @if($conversation->latestMessage)
                                <p class="text-sm text-brand-text truncate max-w-xs">{{ $conversation->latestMessage->message }}</p>
                            @else
                                <p class="text-sm text-brand-text">لا توجد رسائل</p>
                            @endif
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <button type="button" class="text-xs text-emerald-700 hover:underline" onclick="startCallFromList(event, {{ $otherUser->id }}, 'audio')">اتصال</button>
                        <button type="button" class="text-xs text-rose-700 hover:underline" onclick="startCallFromList(event, {{ $otherUser->id }}, 'video')">فيديو</button>
                        <button type="button" class="text-xs text-amber-700 hover:underline" onclick="togglePin(event, {{ $conversation->id }})">{{ $conversation->isPinnedFor(auth()->id()) ? 'إلغاء التثبيت' : 'تثبيت' }}</button>
                        @if(!($showArchived ?? false))
                            <button type="button" class="text-xs text-gray-600 hover:underline" onclick="toggleArchive(event, {{ $conversation->id }})">أرشفة</button>
                            <button type="button" class="text-xs text-gray-600 hover:underline" onclick="toggleMute(event, {{ $conversation->id }})">{{ $conversation->isMutedFor(auth()->id()) ? 'إلغاء كتم' : 'كتم' }}</button>
                        @else
                            <button type="button" class="text-xs text-emerald-700 hover:underline" onclick="toggleUnarchive(event, {{ $conversation->id }})">استرجاع</button>
                        @endif
                        @if($unread > 0)
                            <span class="inline-flex items-center justify-center min-w-[20px] h-5 px-1 text-[11px] bg-blue-600 text-white rounded-full shadow">{{ $unread }}</span>
                        @endif
                    @if($conversation->latestMessage)
                        <span class="text-xs text-brand-text">
                            {{ optional($conversation->latestMessage->created_at)->diffForHumans() }}
                        </span>
                    @endif
                    </div>
                </a>
            @endforeach
        </div>
    @endif
</div>
@push('body-end')
<script>
const panel = document.getElementById('start-chat-panel');
document.getElementById('start-chat-btn')?.addEventListener('click', ()=> panel?.classList.toggle('hidden'));
let searchTimer=null; const input=document.getElementById('user-search-input'); const results=document.getElementById('user-search-results');
function tplItem(u){ return `<a href="/chat/${u.id}" class="flex items-center gap-3 p-2 bg-white rounded hover:bg-gray-50 border"><img src="${u.avatar}" class="w-8 h-8 rounded-full"/> <span>${u.name}</span></a>`; }
async function runSearch(q){
    if(!q||q.trim()===''){ results.innerHTML=''; return; }
    try{
        const res = await fetch(`/api/users/search?q=${encodeURIComponent(q)}`, {credentials:'same-origin', headers:{'Accept':'application/json'}});
        if(res.status===401){ location.href='/login'; return; }
        const data = await res.json(); const arr = data?.data || [];
        results.innerHTML = arr.length ? arr.map(tplItem).join('') : '<div class="text-sm text-gray-500">لا نتائج</div>';
    }catch(_){ results.innerHTML='<div class="text-sm text-rose-600">تعذر الجلب</div>'; }
}
input?.addEventListener('input', ()=>{ clearTimeout(searchTimer); searchTimer=setTimeout(()=> runSearch(input.value), 300); });

function startCallFromList(e, uid, mode){ e.preventDefault(); window.location.href = `{{ url('/chat') }}/${uid}?start=${mode}`; }
async function togglePin(e, id){ e.preventDefault(); try{ const r = await fetch(`/chat/${id}/pin`, {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}}); location.reload(); }catch(_){} }
async function toggleArchive(e, id){ e.preventDefault(); try{ const r = await fetch(`/chat/${id}/archive`, {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}}); location.reload(); }catch(_){} }
async function toggleUnarchive(e, id){ e.preventDefault(); try{ const r = await fetch(`/chat/${id}/unarchive`, {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}}); location.reload(); }catch(_){} }
async function toggleMute(e, id){ e.preventDefault(); try{ const r = await fetch(`/chat/${id}/mute`, {method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'}}); location.reload(); }catch(_){} }
</script>
@endpush
@endsection