@extends('layouts.admin')

@section('page-title', 'Chat System')

@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 #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .avatar-circle { font-weight: 600; letter-spacing: 0.02em; }
    .message-bubble-sent { background: #1f2937; 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: #1f2937; color: #fff; transition: all 0.15s ease; }
    .btn-primary:hover { background: #111827; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(31,41,55,0.15); }
    .text-input { background: #f8f9fb; border: 1px solid #e8eaed; transition: all 0.15s ease; }
    .text-input:focus { background: #fff; border-color: #1f2937; box-shadow: 0 0 0 3px rgba(31,41,55,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">
    {{-- Sidebar --}}
    <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->customer ?? $chat->promoter ?? $chat->vendor ?? $chat->admin;
                    $participantType = $chat->customer_id ? 'customer' : ($chat->promoter_id ? 'promoter' : ($chat->vendor_id ? 'vendor' : '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 === 'customer' ? 'bg-blue-50 text-blue-600' : ($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('admin.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>

    {{-- Chat Area --}}
    <div class="flex-1 flex flex-col bg-white">
        @if($activeChat)
            @php
                $participant = $activeChat->customer ?? $activeChat->promoter ?? $activeChat->vendor ?? $activeChat->admin;
                $participantType = $activeChat->customer_id ? 'customer' : ($activeChat->promoter_id ? 'promoter' : ($activeChat->vendor_id ? 'vendor' : 'admin'));
                $initial = $participant ? substr($participant->name, 0, 1) : '?';
                $avatarClass = $participantType === 'customer' ? 'bg-blue-50 text-blue-600' : ($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
            {{-- Header --}}
            <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('admin.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>

            {{-- Messages --}}
            <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())
                                @php $msgInitial = $message->sender ? substr($message->sender->name, 0, 1) : '?'; @endphp
                                <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 {{ $message->sender_id === auth()->id() ? 'text-gray-400' : 'text-gray-400' }}">{{ $message->created_at->format('h:i A') }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Input --}}
            <div class="input-area px-5 py-4">
                <form id="chat-form" action="{{ route('admin.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');
    const emojiPicker = document.getElementById('emoji-picker');
    const 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');
        const 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 }};
    const 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 timeColor = 'text-gray-400';
        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 ${timeColor}">${e.created_at}</p></div></div></div>`;
        container.insertAdjacentHTML('beforeend', html);
        container.scrollTop = container.scrollHeight;
    });
    @endauth
</script>
@endif

{{-- New Chat Modal --}}
<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('admin.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="customer">Customer</option>
                        <option value="promoter">Promoter</option>
                        <option value="vendor">Vendor</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;
    const select = document.getElementById('participant-id');
    select.innerHTML = ''; select.disabled = true;
    const mapping = { customer: 'customers', promoter: 'promoters', vendor: 'vendors', 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