@php

   $isSameAsNext = ($message?->sendable_id === $nextMessage?->sendable_id) && ($message?->sendable_type === $nextMessage?->sendable_type);
   $isNotSameAsNext = !$isSameAsNext;
   $isSameAsPrevious = ($message?->sendable_id === $previousMessage?->sendable_id) && ($message?->sendable_type === $previousMessage?->sendable_type);
   $isNotSameAsPrevious = !$isSameAsPrevious;
@endphp



@php
    $isQr = str_starts_with($attachment?->mime_type ?? '', 'image/svg');
    $appUrl = rtrim(config('app.url'), '/');
    $msgBody = trim($message?->body ?? '');
    $transactionLinkPattern = '#^' . preg_quote($appUrl, '#') . '/[a-z]{2}/[a-z\-]+/(\d+)$#';
    $isTransactionBody = $isQr && preg_match($transactionLinkPattern, $msgBody, $qrMatches);
    $transactionLinkId = $isTransactionBody ? $qrMatches[1] : null;
    $attachmentUrl = $attachment ? route('wirechat.attachment.serve', $attachment) : null;
@endphp
<div x-data="{ open: false }" class="inline-block">
    @if ($isQr)
        <div @class([
                'bg-white p-3 overflow-hidden rounded-xl',
                'rounded-br-md rounded-tr-2xl' => ($isSameAsNext && $isNotSameAsPrevious && $belongsToAuth),
                'rounded-r-md' => ($isSameAsPrevious && $belongsToAuth),
                'rounded-br-xl rounded-r-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && $belongsToAuth),
                'rounded-br-2xl' => ($isNotSameAsNext && $belongsToAuth),
                'rounded-bl-md rounded-tl-2xl' => ($isSameAsNext && $isNotSameAsPrevious && !$belongsToAuth),
                'rounded-l-md' => ($isSameAsPrevious && !$belongsToAuth),
                'rounded-bl-xl rounded-l-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && !$belongsToAuth),
                'rounded-bl-2xl' => ($isNotSameAsNext && !$belongsToAuth),
            ])>
            <div class="flex flex-col items-center">
                <img loading="lazy" src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
                     class="h-[100px] w-[100px] object-contain rounded-none cursor-pointer" @click="open = true">
                @if ($isTransactionBody)
                    <a href="{{ $msgBody }}" class="text-center text-base text-gray-700 underline px-4 pt-3 pb-1 hover:text-theme-brand transition-colors">
                        {{ __('View transaction') }} #{{ $transactionLinkId }}
                    </a>
                @endif
            </div>
        </div>
    @else
        <img @class([
                'max-w-max  h-[200px] min-h-[210px] bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)]   object-scale-down  grow-0 shrink  overflow-hidden  rounded-3xl cursor-pointer',
                'rounded-br-md rounded-tr-2xl' => ($isSameAsNext && $isNotSameAsPrevious && $belongsToAuth),
                'rounded-r-md' => ($isSameAsPrevious && $belongsToAuth),
                'rounded-br-xl rounded-r-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && $belongsToAuth),
                'rounded-br-2xl' => ($isNotSameAsNext && $belongsToAuth),
                'rounded-bl-md rounded-tl-2xl' => ($isSameAsNext && $isNotSameAsPrevious && !$belongsToAuth),
                'rounded-l-md' => ($isSameAsPrevious && !$belongsToAuth),
                'rounded-bl-xl rounded-l-xl' => ($isNotSameAsPrevious && $isNotSameAsNext && !$belongsToAuth),
                'rounded-bl-2xl' => ($isNotSameAsNext && !$belongsToAuth),
                ])
                loading="lazy" src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
                @click="open = true">
    @endif

    {{-- Fullscreen lightbox --}}
    <template x-teleport="body">
        <div x-show="open"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="open = false"
             @keydown.escape.window="open = false"
             class="fixed inset-0 z-[9999] flex items-center justify-center cursor-zoom-out {{ $isQr ? 'bg-white' : 'bg-black' }}"
             style="display: none;">
            @if ($isQr)
                <img src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
                     class="max-h-screen max-w-screen w-full h-full object-contain select-none p-8">
            @else
                <img src="{{ $attachmentUrl }}" alt="{{ __('wirechat::chat.labels.attachment') }}"
                     class="max-h-screen max-w-screen object-contain select-none">
            @endif
        </div>
    </template>
</div>