@extends('layouts.app')
@section('title', 'Messages')
@section('page-title', 'Messages')

@section('content')
<div class="grid lg:grid-cols-3 gap-6" style="min-height: 75vh;">

    {{-- LEFT: Conversations List --}}
    <div class="lg:col-span-2 flex flex-col">
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden flex-1 flex flex-col">
            <div class="px-5 py-4 border-b border-stone-100 flex items-center justify-between">
                <h3 class="font-bold text-stone-800">
                    <i class="fas fa-comments text-amber-500 mr-2"></i>Conversations
                </h3>
                <button onclick="document.getElementById('newMessageModal').classList.remove('hidden')"
                        class="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                    <i class="fas fa-plus mr-1.5"></i> New Message
                </button>
            </div>

            <div class="flex-1 overflow-y-auto divide-y divide-stone-50">
                @forelse($conversations as $conv)
                @php
                    $other = $conv->participants->where('id', '!=', auth()->id())->first();
                    $lastMsg = $conv->latestMessage;
                    $unread = false;
                    $pivot = $conv->participants->where('id', auth()->id())->first()?->pivot;
                    if ($lastMsg && $pivot) {
                        $unread = !$pivot->last_read_at || $lastMsg->created_at->gt($pivot->last_read_at);
                    }
                    $childrenInfo = $other?->_children_info ?? null;
                @endphp
                <a href="{{ route('communication.chat', $conv) }}"
                   class="flex items-center gap-4 px-5 py-4 hover:bg-stone-50 transition {{ $unread ? 'bg-amber-50/40' : '' }}">
                    <div class="w-11 h-11 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-sm
                        {{ $unread ? 'bg-amber-500 text-white' : 'bg-stone-200 text-stone-600' }}">
                        {{ strtoupper(substr($other->name ?? '?', 0, 1)) }}{{ strtoupper(substr(explode(' ', $other->name ?? '')[1] ?? '', 0, 1)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center justify-between">
                            <p class="font-semibold text-stone-800 text-sm truncate">
                                {{ $other->name ?? 'Unknown' }}
                            </p>
                            <span class="text-[10px] text-stone-400 flex-shrink-0 ml-2">
                                {{ $lastMsg?->created_at?->diffForHumans(short: true) ?? '' }}
                            </span>
                        </div>
                        <div class="flex items-center gap-1.5 mt-0.5 flex-wrap">
                            <span class="text-[10px] px-1.5 py-0.5 rounded bg-stone-100 text-stone-500 capitalize font-medium">
                                {{ $other->role ?? '' }}
                            </span>
                            @if($childrenInfo)
                            <span class="text-[10px] text-amber-600 font-medium truncate">
                                <i class="fas fa-child text-[8px] mr-0.5"></i>{{ $childrenInfo }}
                            </span>
                            @endif
                        </div>
                        <p class="text-xs text-stone-400 truncate mt-0.5 {{ $unread ? 'text-stone-600 font-medium' : '' }}">
                            @if($lastMsg)
                                {{ $lastMsg->sender_id === auth()->id() ? 'You: ' : '' }}{{ Str::limit($lastMsg->message, 50) }}
                            @else
                                No messages yet
                            @endif
                        </p>
                    </div>
                    @if($unread)
                    <div class="w-2.5 h-2.5 bg-amber-500 rounded-full flex-shrink-0"></div>
                    @endif
                </a>
                @empty
                <div class="flex-1 flex flex-col items-center justify-center p-12 text-center">
                    <div class="w-16 h-16 bg-stone-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-comments text-2xl text-stone-300"></i>
                    </div>
                    <p class="text-stone-500 font-medium">No conversations yet</p>
                    <p class="text-xs text-stone-400 mt-1">Start a new message to begin chatting</p>
                    <button onclick="document.getElementById('newMessageModal').classList.remove('hidden')"
                            class="mt-4 px-4 py-2 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition">
                        <i class="fas fa-plus mr-1"></i> New Message
                    </button>
                </div>
                @endforelse
            </div>

            @if($conversations->hasPages())
            <div class="px-5 py-3 border-t border-stone-100">{{ $conversations->links() }}</div>
            @endif
        </div>
    </div>

    {{-- RIGHT: Contacts Panel --}}
    <div class="space-y-4">
        <div class="bg-white rounded-2xl ring-1 ring-stone-200/60 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-stone-100">
                <h3 class="font-bold text-stone-800 text-sm">
                    <i class="fas fa-address-book text-amber-500 mr-2"></i>Contacts
                </h3>
                <p class="text-[10px] text-stone-400 mt-0.5">Click to start a conversation</p>
            </div>

            <div class="max-h-[60vh] overflow-y-auto">
                @forelse($contacts as $group => $members)
                <div class="border-b border-stone-100 last:border-0">
                    <div class="px-5 py-2 bg-stone-50 sticky top-0 z-10">
                        <p class="text-[10px] font-bold text-stone-500 uppercase tracking-wider">{{ $group }}</p>
                    </div>
                    @foreach($members as $contact)
                    <button onclick="openNewMessage({{ $contact['id'] }}, '{{ addslashes($contact['name']) }}')"
                            class="w-full flex items-center gap-3 px-5 py-2.5 hover:bg-amber-50 transition text-left">
                        <div class="w-8 h-8 bg-stone-200 rounded-full flex items-center justify-center flex-shrink-0">
                            <span class="text-[10px] font-bold text-stone-500">
                                {{ strtoupper(substr($contact['name'], 0, 1)) }}
                            </span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-1.5">
                                <p class="text-sm font-medium text-stone-700 truncate">{{ $contact['name'] }}</p>
                                @if(!empty($contact['badge']))
                                <span class="text-[8px] px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded-full font-bold flex-shrink-0 whitespace-nowrap">
                                    {{ $contact['badge'] }}
                                </span>
                                @endif
                            </div>
                            <p class="text-[10px] text-stone-400 truncate">{{ $contact['subtitle'] }}</p>
                        </div>
                        <i class="fas fa-paper-plane text-[10px] text-stone-300"></i>
                    </button>
                    @endforeach
                </div>
                @empty
                <div class="p-8 text-center text-stone-400 text-sm">No contacts available</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

{{-- New Message Modal --}}
<div id="newMessageModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md">
        <div class="px-6 py-4 border-b border-stone-100 flex items-center justify-between">
            <h3 class="text-lg font-bold text-stone-800">New Message</h3>
            <button onclick="document.getElementById('newMessageModal').classList.add('hidden')" class="text-stone-400 hover:text-stone-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('communication.chat.start') }}" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">To</label>
                <select name="user_id" id="newMsgRecipient" required
                        class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm">
                    <option value="">Select a contact...</option>
                    @foreach($contacts as $group => $members)
                    <optgroup label="{{ $group }}">
                        @foreach($members as $contact)
                        <option value="{{ $contact['id'] }}">
                            {{ $contact['name'] }}{{ !empty($contact['badge']) ? ' ★ '.$contact['badge'] : '' }} — {{ $contact['subtitle'] }}
                        </option>
                        @endforeach
                    </optgroup>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-stone-700 mb-1">Message</label>
                <textarea name="message" id="newMsgContent" rows="4" required
                          class="w-full border border-stone-300 rounded-xl px-3 py-2.5 text-sm resize-none"
                          placeholder="Type your message..."></textarea>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('newMessageModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-stone-600 hover:text-stone-800">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-amber-500 text-white rounded-xl text-sm font-semibold hover:bg-amber-600 transition shadow-sm">
                    <i class="fas fa-paper-plane mr-1.5"></i> Send
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openNewMessage(userId, userName) {
    document.getElementById('newMessageModal').classList.remove('hidden');
    document.getElementById('newMsgRecipient').value = userId;
    document.getElementById('newMsgContent').focus();
}
</script>
@endsection