@extends('layouts.customer')

@section('page-title', 'Chats')

@push('styles')
<style>
    .chat-panel { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
    .chat-sidebar { background: #fafbfc; border-right: 1px solid #e8eaed; }
    .chat-item { transition: all 0.15s ease; border-bottom: 1px solid #f0f1f3; }
    .chat-item:hover { background: #f5f7fa; }
    .chat-item.active { background: #fff; border-left: 3px solid #4338ca; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .avatar-circle { font-weight: 600; letter-spacing: 0.02em; }
    .message-bubble-sent { background: #4338ca; color: #fff; border-radius: 18px 18px 4px 18px; }
    .message-bubble-received { background: #fff; color: #1f2937; border: 1px solid #e8eaed; border-radius: 18px 18px 18px 4px; }
    .message-bg { background-color: #f8f9fb; background-image: radial-gradient(circle at 25% 25%, #eef0f3 1px, transparent 1px); background-size: 24px 24px; }
    .input-area { background: #fff; border-top: 1px solid #e8eaed; }
    emoji-picker { --background: #fff; --border-color: #e8eaed; --emoji-size: 18px; --border-radius: 12px; }
    .empty-state { color: #9ca3af; }
    .badge-customer { background: #eff6ff; color: #1d4ed8; }
    .badge-vendor { background: #ecfdf5; color: #059669; }
    .badge-promoter { background: #f5f3ff; color: #7c3aed; }
    .badge-admin { background: #fef2f2; color: #dc2626; }
    .btn-primary { background: #4338ca; color: #fff; transition: all 0.15s ease; }
    .btn-primary:hover { background: #3730a3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(67,56,202,0.25); }
    .text-input { background: #f8f9fb; border: 1px solid #e8eaed; transition: all 0.15s ease; }
    .text-input:focus { background: #fff; border-color: #4338ca; box-shadow: 0 0 0 3px rgba(67,56,202,0.08); }
    .modal-backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
    .modal-content { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
    .unread-dot { box-shadow: 0 0 0 2px #fafbfc; }
</style>
@endpush

@section('content')
<div class="chat-panel flex h-[calc(100vh-180px)] rounded-2xl overflow-hidden shadow-xl border border-gray-200/50">
    <div class="chat-sidebar w-80 flex flex-col">
        <div class="p-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm">
            <div class="flex justify-between items-center">
                <div><h3 class="font-semibold text-gray-900 text-base tracking-tight">Inbox</h3><p class="text-[11px] text-gray-400 mt-0.5 font-medium">{{ $chats->count() }} conversations</p></div>
                <button onclick="document.getElementById('new-chat-modal').classList.remove('hidden')" class="btn-primary px-4 py-2 text-xs font-semibold rounded-lg shadow-sm">New Chat</button>
            </div>
        </div>
        <div class="overflow-y-auto flex-1">
            @forelse($chats as $chat)
                @php
                    $participant = $chat->vendor ?? $chat->promoter ?? $chat->admin;
                    $participantType = $chat->vendor_id ? 'vendor' : ($chat->promoter_id ? 'promoter' : 'admin');
                    $initial = $participant ? substr($participant->name, 0, 1) : '?';
                    $lastMessage = $chat->messages()->latest()->first();
                    $unreadCount = $chat->messages()->where('is_read', false)->where('sender_id', '!=', auth()->id())->count();
                    $isActive = isset($activeChat) && $chat->id === $activeChat->id;
                    $avatarClass = $participantType === 'vendor' ? 'bg-emerald-50 text-emerald-600' : ($participantType === 'promoter' ? 'bg-purple-50 text-purple-600' : 'bg-red-50 text-red-600');
                    $badgeClass = 'badge-' . $participantType;
                @endphp
                <a href="{{ route('customer.chats.show', $chat) }}" class="chat-item flex items-center p-4 {{ $isActive ? 'active' : '' }}">
                    <div class="relative flex-shrink-0">
                        <div class="w-10 h-10 rounded-full {{ $avatarClass }} avatar-circle flex items-center justify-center text-sm">{{ $initial }}</div>
                        @if($unreadCount > 0)<span class="absolute -top-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full unread-dot"></span>@endif
                    </div>
                    <div class="ml-3 flex-1 min-w-0">
                        <div class="flex items-center justify-between">
                            <p class="font-medium text-gray-900 truncate text-sm">{{ $participant->name ?? 'Unknown' }}</p>
                            @if($lastMessage)<span class="text-[10px] text-gray-400 ml-2 whitespace-nowrap font-medium">{{ $lastMessage->created_at->diffForHumans(short: true) }}</span>@endif
                        </div>
                        <div class="flex items-center justify-between mt-0.5">
                            @if($lastMessage)<p class="text-xs text-gray-500 truncate pr-2">{{ Str::limit($lastMessage->message ?: 'Sent an image', 35) }}</p>@elseif($chat->product)<p class="text-xs text-gray-400 truncate">{{ $chat->product->name }}</p>@endif
                            @if($unreadCount > 0)<span class="text-[10px] font-bold text-white bg-red-500 rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1">{{ $unreadCount }}</span>@endif
                        </div>
                    </div>
                </a>
            @empty
                <div class="flex flex-col items-center justify-center py-20 px-6 text-center">
                    <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4"><svg class="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg></div>
                    <p class="text-gray-600 font-medium text-sm">No conversations</p>
                    <p class="text-gray-400 text-xs mt-1">Start a new chat to begin messaging</p>
                </div>
            @endforelse
        </div>
    </div>

    <div class="flex-1 flex flex-col bg-white">
        @if($activeChat)
            @php
                $participant = $activeChat->vendor ?? $activeChat->promoter ?? $activeChat->admin;
                $participantType = $activeChat->vendor_id ? 'vendor' : ($activeChat->promoter_id ? 'promoter' : 'admin');
                $initial = $participant ? substr($participant->name, 0, 1) : '?';
                $avatarClass = $participantType === 'vendor' ? 'bg-emerald-50 text-emerald-600' : ($participantType === 'promoter' ? 'bg-purple-50 text-purple-600' : 'bg-red-50 text-red-600');
                $badgeClass = 'badge-' . $participantType;
            @endphp
            <div class="px-6 py-4 border-b border-gray-200/60 bg-white flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-9 h-9 rounded-full {{ $avatarClass }} avatar-circle flex items-center justify-center text-sm">{{ $initial }}</div>
                    <div class="ml-3">
                        <div class="flex items-center gap-2">
                            <p class="font-semibold text-gray-900 text-sm">{{ $participant->name ?? 'Unknown' }}</p>
                            <span class="text-[9px] uppercase tracking-wider font-bold px-2 py-0.5 rounded-full {{ $badgeClass }}">{{ $participantType }}</span>
                        </div>
                        @if($activeChat->product)<p class="text-[11px] text-gray-400 mt-0.5">{{ $activeChat->product->name }}</p>@endif
                    </div>
                </div>
                <form action="{{ route('customer.chats.clear', $activeChat) }}" method="POST" onsubmit="return confirm('Clear all messages?')" class="ml-4">@csrf<button type="submit" class="text-xs text-gray-400 hover:text-red-600 px-3 py-1.5 rounded-lg transition-colors font-medium"><svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>Clear</button></form>
            </div>
            <div id="messages-container" class="flex-1 overflow-y-auto p-6 space-y-5 message-bg">
                @foreach($activeChat->messages()->with('sender')->orderBy('created_at')->get() as $message)
                    <div class="flex {{ $message->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}">
                        <div class="max-w-xs sm:max-w-sm lg:max-w-md">
                            @if($message->sender_id !== auth()->id())<p class="text-[10px] text-gray-400 font-medium mb-1 ml-1">{{ $message->sender?->name }}</p>@endif
                            <div class="px-4 py-2.5 shadow-sm {{ $message->sender_id === auth()->id() ? 'message-bubble-sent' : 'message-bubble-received' }}">
                                @if($message->message)<p class="text-sm leading-relaxed break-words">{{ $message->message }}</p>@endif
                                @if($message->attachments)@foreach(json_decode($message->attachments) as $image)<a href="{{ asset('storage/' . $image) }}" target="_blank" class="block mt-2 rounded-xl overflow-hidden"><img src="{{ asset('storage/' . $image) }}" class="max-w-full cursor-pointer hover:opacity-90 transition-opacity" style="max-height: 180px;"></a>@endforeach @endif
                                <p class="text-[10px] mt-1.5 text-right text-gray-400">{{ $message->created_at->format('h:i A') }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="input-area px-5 py-4">
                <form id="chat-form" action="{{ route('customer.chats.messages', $activeChat) }}" method="POST" enctype="multipart/form-data">@csrf
                    <div id="image-preview" class="hidden mb-3"><div class="relative inline-block"><img id="preview-img" class="h-14 w-14 object-cover rounded-xl border border-gray-200 shadow-sm"><button type="button" onclick="clearImage()" class="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 text-white rounded-full flex items-center justify-center text-[10px] hover:bg-red-600 shadow-sm transition-colors">&times;</button></div></div>
                    <div class="flex items-end gap-2">
                        <div class="relative"><button type="button" id="emoji-btn" class="p-2 text-gray-400 hover:text-gray-700 transition-colors rounded-lg hover:bg-gray-100"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"/></svg></button><div id="emoji-picker" class="hidden absolute bottom-12 left-0 bg-white border border-gray-200 rounded-xl shadow-2xl z-20" style="width: 300px; height: 340px;"></div></div>
                        <label class="p-2 text-gray-400 hover:text-gray-700 transition-colors rounded-lg hover:bg-gray-100 cursor-pointer"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M2.25 18h19.5"/></svg><input type="file" id="image-input" name="attachment" accept="image/*" class="hidden" onchange="previewImage(this)"></label>
                        <textarea id="message-input" name="message" placeholder="Write a message..." rows="1" class="text-input flex-1 px-4 py-2.5 rounded-xl text-sm resize-none outline-none" onkeydown="handleEnter(event)"></textarea>
                        <button type="submit" class="btn-primary p-2.5 rounded-xl shadow-sm"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg></button>
                    </div>
                </form>
            </div>
        @else
            <div class="flex-1 flex flex-col items-center justify-center empty-state"><div class="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center mb-5"><svg class="w-9 h-9 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg></div><p class="text-gray-600 font-semibold text-lg">Select a conversation</p><p class="text-gray-400 text-sm mt-1.5 font-medium">Choose from the sidebar to start messaging</p></div>
        @endif
    </div>
</div>

@if($activeChat)
<script src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.21.3/index.js" type="module"></script>
<script>
document.getElementById('chat-form').addEventListener('submit', function() { messageInput.style.height = 'auto'; clearImage(); });
const container = document.getElementById('messages-container');
if (container) container.scrollTop = container.scrollHeight;
const emojiBtn = document.getElementById('emoji-btn'), emojiPicker = document.getElementById('emoji-picker'), messageInput = document.getElementById('message-input');
messageInput.addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 120) + 'px'; });
emojiBtn.addEventListener('click', (e) => { e.stopPropagation(); emojiPicker.classList.toggle('hidden'); if (!emojiPicker.querySelector('emoji-picker')) { const picker = document.createElement('emoji-picker'); picker.style.cssText = 'width:100%;height:100%'; picker.addEventListener('emoji-click', (ev) => { messageInput.value += ev.detail.unicode; messageInput.focus(); }); emojiPicker.appendChild(picker); }});
document.addEventListener('click', (e) => { if (!emojiPicker.contains(e.target) && e.target !== emojiBtn) emojiPicker.classList.add('hidden'); });
function handleEnter(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); document.getElementById('chat-form').submit(); } }
function previewImage(input) { const preview = document.getElementById('image-preview'), img = document.getElementById('preview-img'); if (input.files && input.files[0]) { const reader = new FileReader(); reader.onload = (e) => { img.src = e.target.result; }; reader.readAsDataURL(input.files[0]); preview.classList.remove('hidden'); } }
function clearImage() { document.getElementById('image-input').value = ''; document.getElementById('image-preview').classList.add('hidden'); }
@auth
const chatId = {{ $activeChat->id }}, currentUserId = {{ auth()->id() }};
Echo.join(`chat.${chatId}`).listen('MessageSent', (e) => {
    let imageHtml = ''; if (e.attachments && e.attachments.length > 0) { e.attachments.forEach(img => { imageHtml += `<a href="/storage/${img}" target="_blank" class="block mt-2 rounded-xl overflow-hidden"><img src="/storage/${img}" class="max-w-full cursor-pointer hover:opacity-90 transition-opacity" style="max-height: 180px;"></a>`; }); }
    const bubbleClass = e.sender_id === currentUserId ? 'message-bubble-sent' : 'message-bubble-received';
    const align = e.sender_id === currentUserId ? 'justify-end' : 'justify-start';
    const html = `<div class="flex ${align}"><div class="max-w-xs sm:max-w-sm lg:max-w-md"><div class="px-4 py-2.5 shadow-sm ${bubbleClass}"><p class="text-sm leading-relaxed break-words">${e.message}</p>${imageHtml}<p class="text-[10px] mt-1.5 text-right text-gray-400">${e.created_at}</p></div></div></div>`;
    container.insertAdjacentHTML('beforeend', html); container.scrollTop = container.scrollHeight;
});
@endauth
</script>
@endif

<div id="new-chat-modal" class="hidden fixed inset-0 modal-backdrop flex items-center justify-center z-50">
    <div class="modal-content bg-white rounded-2xl w-full max-w-md p-6 mx-4">
        <div class="flex items-center justify-between mb-6"><h3 class="text-lg font-bold text-gray-900">New Conversation</h3><button onclick="document.getElementById('new-chat-modal').classList.add('hidden')" class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"><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="M6 18L18 6M6 6l12 12"/></svg></button></div>
        <form action="{{ route('customer.chats.start') }}" method="POST">@csrf<div class="space-y-4">
            <div><label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">Chat With</label><select id="participant-type" name="participant_type" required onchange="updateParticipantOptions()" class="text-input w-full px-3.5 py-2.5 rounded-lg text-sm outline-none"><option value="">Select role...</option><option value="vendor">Vendor</option><option value="promoter">Promoter</option><option value="admin">Admin</option></select></div>
            <div><label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">User</label><select id="participant-id" name="participant_id" required disabled class="text-input w-full px-3.5 py-2.5 rounded-lg text-sm outline-none disabled:opacity-50"><option value="">Select a role first...</option></select></div>
            <div><label class="block text-xs font-semibold text-gray-600 uppercase tracking-wider mb-1.5">Product <span class="text-gray-400 normal-case font-normal">(optional)</span></label><select name="product_id" class="text-input w-full px-3.5 py-2.5 rounded-lg text-sm outline-none"><option value="">No specific product</option>@foreach($products as $product)<option value="{{ $product->id }}">{{ $product->name }}</option>@endforeach</select></div>
            <div class="flex gap-3 pt-2"><button type="button" onclick="document.getElementById('new-chat-modal').classList.add('hidden')" class="flex-1 px-4 py-2.5 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium transition-colors">Cancel</button><button type="submit" class="btn-primary flex-1 px-4 py-2.5 rounded-lg text-sm font-semibold shadow-sm">Start Chat</button></div>
        </div></form>
    </div>
</div>
<script>
const participants = @json($participants);
function updateParticipantOptions() { const type = document.getElementById('participant-type').value, select = document.getElementById('participant-id'); select.innerHTML = ''; select.disabled = true; const mapping = { vendor: 'vendors', promoter: 'promoters', admin: 'admins' }; if (mapping[type]) { select.disabled = false; select.innerHTML = '<option value="">Select a user...</option>'; participants[mapping[type]].forEach(user => { const opt = document.createElement('option'); opt.value = user.id; opt.textContent = `${user.name} (${user.email})`; select.appendChild(opt); }); } else { select.innerHTML = '<option value="">Select a role first...</option>'; } }
</script>
@endsection