@php
    /** @var \Illuminate\Support\Collection<int,\App\Models\Place> $places */
    $placePayload = $places
        ->map(fn (\App\Models\Place $place) => [
            'id' => $place->id,
            'publicId' => $place->public_id,
            'name' => $place->name,
            'chatUrl' => route('filament.resources.places.chat', $place),
            'unread' => $unreadTotals[$place->id] ?? 0,
        ])
        ->values();
@endphp

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const places = @json($placePayload);
        const echoClient = window.Echo;
        const NotificationConstructor = (window.Notification && typeof window.Notification === 'function' && 'send' in (window.Notification.prototype || {}))
            ? window.Notification
            : null;

        if (!echoClient || !places.length) {
            return;
        }

        const totals = Object.fromEntries(
            places.map((place) => [place.publicId, Number(place.unread || 0)]),
        );

        const findBadge = (link) => {
            return link.querySelector('[data-chat-badge]') ||
                link.querySelector('span.inline-flex.items-center.justify-center');
        };

        const renderBadge = (place, value) => {
            const total = Number(value !== undefined && value !== null ? value : (totals[place.publicId] || 0));
            const link = document.querySelector(`a[href="${place.chatUrl}"]`);

            if (!link) {
                return;
            }

            let badge = findBadge(link);

            if (total > 0) {
                if (!badge) {
                    badge = document.createElement('span');
                    badge.className = 'inline-flex items-center justify-center ml-auto rtl:ml-0 rtl:mr-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal text-danger-700 bg-danger-500/10';
                    link.appendChild(badge);
                }

                badge.dataset.chatBadge = '1';
                badge.textContent = total;
            } else if (badge) {
                badge.remove();
            }
        };

        places.forEach((place) => renderBadge(place));

        window.addEventListener('place-chat-unread-updated', (event) => {
            const detail = event && event.detail ? event.detail : {};
            const placeId = detail.placePublicId;

            if (!placeId) {
                return;
            }

            totals[placeId] = Number(detail.total || 0);

            const place = places.find((p) => p.publicId === placeId);

            if (place) {
                renderBadge(place, totals[placeId]);
            }
        });

        const summarize = (payload) => {
            const sender = (payload && payload.acting_as && payload.acting_as.name)
                || (payload && payload.sender && payload.sender.name)
                || '';
            const body = payload && typeof payload.body === 'string' ? payload.body.trim() : '';
            const hasAttachment = payload && Array.isArray(payload.attachments) && payload.attachments.length > 0;
            const text = body !== '' ? body : (hasAttachment ? 'Sent an attachment' : 'New message');

            return {sender, text};
        };

        const triggerToast = (place, payload) => {
            if (!NotificationConstructor) {
                return;
            }

            const summary = summarize(payload);
            const title = summary.sender ? `${summary.sender}` : 'New message';
            const description = summary.text.length > 140
                ? `${summary.text.slice(0, 137)}...`
                : summary.text;

            new NotificationConstructor()
                .title(`New message - ${place.name}`)
                .body(description)
                .icon('heroicon-o-chat-alt-2')
                .seconds(8)
                .send();
        };

        const handleMessage = (place, payload) => {
            if (
                payload
                && payload.sender
                && payload.sender.type === 'place'
                && payload.sender.public_id === place.publicId
            ) {
                return;
            }

            totals[place.publicId] = (totals[place.publicId] ?? 0) + 1;
            renderBadge(place, totals[place.publicId]);
            triggerToast(place, payload);

            if (payload && payload.public_id) {
                markDelivered(payload.public_id);
            }

            if (window.Livewire) {
                window.Livewire.emit('refreshConversations');
            }
        };

        const markDelivered = (messagePublicId) => {
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
            if (!csrf || !messagePublicId) {
                return;
            }

            fetch(`/admin/chat/messages/${messagePublicId}/receipts`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ status: 'DELIVERED' }),
                credentials: 'same-origin',
            }).catch((error) => {
                console.error('Failed to mark delivered', error);
            });
        };

        places.forEach((place) => {
            try {
                echoClient
                    .private(`place.${place.publicId}.chat`)
                    .listen('.message.sent', (payload) => handleMessage(place, payload))
                    .listen('.message.receipt', (payload) => {
                        if (
                            !payload
                            || !payload.recipient
                            || payload.recipient.type !== 'place'
                            || payload.recipient.public_id !== place.publicId
                        ) {
                            return;
                        }

                        if (payload.status !== 'read') {
                            return;
                        }

                        totals[place.publicId] = Math.max(0, (totals[place.publicId] || 0) - 1);
                        renderBadge(place, totals[place.publicId]);
                    });
            } catch (error) {
                console.error('Chat notifications listener error', error);
            }
        });
    });
</script>