@props(['recipient', 'messages' => []])
@php
    $groupedMessages = $messages->groupBy(function($msg) {
        return $msg->created_at->format('M j, Y');
    });
@endphp

<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description="offline"/>
<div class="bg-gray-50 h-full overflow-hidden flex-shrink-0">
    <div id="chat-container" data-auth-id="{{ auth()->id() }}" data-partner-id="{{ $recipient->id }}"
         class="text-sm flex flex-col-reverse overflow-y-scroll h-full max-h-screen pb-50 scroll-snap-y-container">
        @forelse($groupedMessages as $date => $dayMessages)
            @foreach($dayMessages as $message)
                <x-chat.message :right="$message->user_id === auth()->id()">
                    <p>{{ $message->message }}</p>
                    <span class="text-[10px] opacity-70 block text-right mt-1">
                    {{ $message->created_at->format('g:i A') }}
                </span>
                </x-chat.message>
            @endforeach

            {{-- The Date Divider --}}
            <div class="flex justify-center my-4 top-0">
            <span class="bg-gray-200 text-gray-600 text-xs px-3 py-1 rounded-full shadow-sm">
                {{ $date }}
            </span>
            </div>
        @empty
            <div id="no-messages-placeholder">No Messages Found !</div>
        @endforelse
    </div>
    <x-chat.message-input :recipient_id="$recipient->id"/>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const container = document.getElementById('chat-container');

        if (container) {
            const authId = parseInt(container.dataset.authId);
            const partnerId = parseInt(container.dataset.partnerId);

            // Sort IDs for consistent channel naming
            const user1 = Math.min(authId, partnerId);
            const user2 = Math.max(authId, partnerId);

            window.Echo.private(`chat.${user1}.${user2}`)
                .listen('MessageSent', (e) => {
                    const message = e.message;
                    if (!message) return;
                    // Check if user is the recipient of the message
                    if (message.user_id === partnerId) {
                        addMessageToChat({message: e.message.message}, false);
                    }
                });
        }
    });
</script>