@php
    use GletraChatBox\App\Support\SocialVideoParser;
    use GletraChatBox\App\Models\Status as StatusModel;

    $msgType = $message->effectiveType();
    $meta = $message->metadata ?? [];
    $isStatusReply = $msgType === 'status_reply' || !empty($meta['status_id']);
    $isSent = $message->sender_id == auth()->id();
    $socialVideos = ($msgType === 'text' && $message->message)
        ? SocialVideoParser::collect($message->message)
        : [];
    $plainMessageText = $socialVideos
        ? SocialVideoParser::stripSocialUrls($message->message ?? '')
        : ($message->message ?? '');
@endphp

@if($isStatusReply)
    @php
        $statusMeta = $meta;
        $statusOwnerName = $statusMeta['status_owner_name'] ?? 'Status';
        $isReaction = ($statusMeta['status_interaction'] ?? 'reply') === 'reaction';
        $statusLabel = $isReaction
            ? ($isSent ? '@ Reacted to '.$statusOwnerName."'s status" : '@ Reacted to your status')
            : ($isSent
                ? '@ Reply to '.$statusOwnerName."'s status"
                : '@ Reply to your status');
        $statusType = $statusMeta['status_type'] ?? 'text';
        $statusSnippet = match ($statusType) {
            'image' => 'Photo',
            'video' => 'Video',
            'audio' => 'Voice status',
            default => Str::limit($statusMeta['status_content'] ?? 'Text status', 80),
        };
        $statusPreviewUrl = $statusMeta['status_preview_url'] ?? null;
        if (! $statusPreviewUrl && ! empty($statusMeta['status_id'])) {
            $statusModel = StatusModel::query()->find($statusMeta['status_id']);
            if ($statusModel) {
                $statusPreviewUrl = $statusModel->replyPreviewUrl();
            }
        }
        if (! $statusPreviewUrl && $statusType === 'image' && ! empty($statusMeta['status_media_url'])) {
            $statusPreviewUrl = $statusMeta['status_media_url'];
        }
    @endphp
    <button
        type="button"
        class="msg-status-reply"
        data-status-id="{{ $statusMeta['status_id'] }}"
        data-status-snapshot="{{ rawurlencode(json_encode($statusMeta)) }}"
        aria-label="View status"
    >
        <div class="msg-status-reply-preview">
            @if($statusType === 'image' && $statusPreviewUrl)
                <img src="{{ $statusPreviewUrl }}" alt="" class="msg-status-reply-thumb" loading="lazy">
            @elseif($statusType === 'video')
                @if($statusPreviewUrl)
                    <img src="{{ $statusPreviewUrl }}" alt="" class="msg-status-reply-thumb" loading="lazy">
                @else
                    <span class="msg-status-reply-icon msg-status-reply-icon--video"><i class="fa-solid fa-play"></i></span>
                @endif
            @elseif($statusType === 'audio')
                <span class="msg-status-reply-icon"><i class="fa-solid fa-microphone"></i></span>
            @else
                <span
                    class="msg-status-reply-text-slide"
                    style="background: {{ $statusMeta['status_background_color'] ?? '#128C7E' }}; color: {{ $statusMeta['status_text_color'] ?? '#ffffff' }};"
                >{{ Str::limit($statusMeta['status_content'] ?? 'Status', 28) }}</span>
            @endif
            <div class="msg-status-reply-meta">
                <span class="msg-status-reply-label">{{ $statusLabel }}</span>
                <span class="msg-status-reply-snippet">{{ $statusSnippet }}</span>
            </div>
        </div>
    </button>
    @if(!empty($message->sticker_id))
        <img src="{{ $message->displayUrl() }}" alt="Sticker" class="msg-sticker" loading="lazy">
    @elseif(!empty($message->gif_url))
        <img src="{{ $message->gif_url }}" alt="GIF" class="msg-gif" loading="lazy">
    @endif
    @if($message->message)
        <p class="msg-status-reply-message {{ ($statusMeta['status_interaction'] ?? 'reply') === 'reaction' ? 'msg-status-reaction-emoji' : '' }}">{{ $message->message }}</p>
    @endif
@elseif($msgType === 'sticker')
    <img src="{{ $message->displayUrl() }}" alt="Sticker" class="msg-sticker" loading="lazy">
@elseif($msgType === 'gif')
    <img src="{{ $message->displayUrl() ?? $message->gif_url }}" alt="GIF" class="msg-gif" loading="lazy">
@elseif($msgType === 'contact')
    <div class="msg-attachment-card msg-contact-card">
        @foreach($meta['contacts'] ?? [] as $contact)
            <div class="msg-contact-row">
                @if(!empty($contact['avatar']))
                    <img src="{{ $contact['avatar'] }}" alt="" class="msg-contact-avatar">
                @else
                    <span class="msg-contact-avatar placeholder"><i class="fa-solid fa-user"></i></span>
                @endif
                <div>
                    <strong>{{ $contact['name'] ?? 'Contact' }}</strong>
                    @if(!empty($contact['phone']))
                        <span>{{ $contact['phone'] }}</span>
                    @endif
                </div>
            </div>
        @endforeach
    </div>
@elseif(in_array($msgType, ['location', 'live_location']))
    <a href="{{ $meta['external_url'] ?? '#' }}" target="_blank" rel="noopener" class="msg-attachment-card msg-location-card">
        <div class="msg-location-map">
            <i class="fa-solid fa-location-dot"></i>
        </div>
        <div class="msg-location-info">
            <strong>{{ $meta['label'] ?? 'Location' }}</strong>
            @if($msgType === 'live_location')
                <span>Live · {{ $meta['duration_minutes'] ?? 15 }} min</span>
            @else
                <span>{{ number_format($meta['latitude'] ?? 0, 5) }}, {{ number_format($meta['longitude'] ?? 0, 5) }}</span>
            @endif
        </div>
    </a>
@elseif($msgType === 'product')
    <a href="{{ $meta['url'] ?? '#' }}" target="_blank" rel="noopener noreferrer" class="msg-attachment-card msg-product-card">
        @if(!empty($meta['image']))
            <img src="{{ $meta['image'] }}" alt="" class="msg-product-thumb" loading="lazy">
        @else
            <div class="msg-product-thumb msg-product-thumb--placeholder"><i class="fa-solid fa-bag-shopping"></i></div>
        @endif
        <div class="msg-product-body">
            @if(!empty($meta['category']))
                <span class="msg-product-category">{{ $meta['category'] }}</span>
            @endif
            <strong>{{ $meta['name'] ?? $message->message }}</strong>
            @if(!empty($meta['price_label']))
                <span class="msg-product-price">{{ $meta['price_label'] }}</span>
            @endif
        </div>
    </a>
@elseif($msgType === 'link')
    <a href="{{ $meta['url'] ?? '#' }}" target="_blank" rel="noopener noreferrer" class="msg-attachment-card msg-link-card">
        @if(!empty($meta['image']))
            <img src="{{ $meta['image'] }}" alt="" class="msg-link-thumb" loading="lazy">
        @else
            <div class="msg-link-thumb msg-social-video-thumb--placeholder"><i class="fa-solid fa-link"></i></div>
        @endif
        <div class="msg-link-body">
            <strong>{{ $meta['title'] ?? $meta['url'] }}</strong>
            @if(!empty($meta['description']))
                <p>{{ Str::limit($meta['description'], 120) }}</p>
            @endif
            <span class="msg-link-url">{{ $meta['url'] ?? '' }}</span>
        </div>
    </a>
@elseif($msgType === 'poll')
    <div class="msg-attachment-card msg-poll-card" data-poll-id="{{ $message->id }}">
        <strong class="msg-poll-question">{{ $meta['question'] ?? $message->message }}</strong>
        @foreach($meta['options'] ?? [] as $idx => $option)
            @php
                $totals = $meta['totals'] ?? [];
                $count = $totals[$idx] ?? 0;
                $totalVotes = max(1, array_sum($totals));
                $pct = round(($count / $totalVotes) * 100);
            @endphp
            <button type="button" class="msg-poll-option" data-option="{{ $idx }}">
                <span>{{ $option }}</span>
                <span class="msg-poll-bar" style="width: {{ $pct }}%"></span>
                <em>{{ $count }}</em>
            </button>
        @endforeach
    </div>
@elseif($msgType === 'call')
    @php
        $callMeta = $meta;
        $isVideo = ($callMeta['call_type'] ?? '') === 'video';
        $callStatus = $callMeta['call_status'] ?? 'ended';
        $isMissed = in_array($callStatus, ['missed', 'declined', 'cancelled', 'busy'], true);
        $isOutgoing = ($callMeta['initiator_id'] ?? null) == auth()->id();
    @endphp
    <div class="msg-call-log {{ $isMissed ? 'missed' : '' }}">
        <div class="msg-call-body">
            <span class="msg-call-icons">
                <i class="fa-solid {{ $isVideo ? 'fa-video' : 'fa-phone' }}"></i>
                <i class="fa-solid {{ ($isMissed && !$isOutgoing) ? 'fa-phone-slash' : ($isOutgoing ? 'fa-arrow-up-right' : 'fa-arrow-down-left') }}"></i>
            </span>
            @php
                $callLabel = $message->message;
                $isGenericCallLabel = in_array($callLabel, ['Voice call', 'Video call'], true);
            @endphp
            @if(!$isGenericCallLabel)
            <span class="msg-call-label">{{ $callLabel }}</span>
            @endif
            <time class="msg-call-datetime" datetime="{{ \App\Support\DateFormat::utcIso($message->created_at) }}"></time>
        </div>
        @if($selectedUser ?? null)
            <button type="button" class="call-btn msg-call-back-btn" data-call="{{ $isVideo ? 'video' : 'audio' }}" data-user-id="{{ $selectedUser->id }}" data-user-name="{{ $selectedUser->name }}" data-user-avatar="{{ $selectedUser->avatarUrl() }}" title="Call back" aria-label="Call back">
                <i class="fa-solid {{ $isVideo ? 'fa-video' : 'fa-phone' }}"></i>
            </button>
        @endif
    </div>
@elseif($message->isMedia() && $message->media_path)
    @if($msgType === 'image')
        <div class="msg-media-bubble msg-media-image">
            <div class="msg-media-inner">
                <div class="msg-media-skeleton" aria-hidden="true"></div>
                <img src="{{ $message->thumbnailUrl() ?? $message->displayUrl() }}" alt="Image" class="msg-image" loading="lazy" data-full-src="{{ $message->displayUrl() }}">
            </div>
            @include('chat.partials.msg-meta', ['message' => $message, 'msgType' => $msgType])
        </div>
    @elseif($msgType === 'video')
        <div class="msg-media-bubble msg-media-video">
            <div class="msg-media-inner msg-media-inner--video {{ $message->thumbnail_path ? 'msg-media-ready' : '' }}">
                @if($message->thumbnail_path)
                    <img src="{{ $message->thumbnailUrl() }}" alt="" class="msg-video-poster" decoding="async" fetchpriority="high" loading="eager" data-media-poster="1">
                @else
                    <div class="msg-media-skeleton" aria-hidden="true"></div>
                    <div class="msg-video-poster-fallback" aria-hidden="true"><i class="fa-solid fa-film"></i></div>
                @endif
                <button type="button" class="msg-video-play" data-video-url="{{ $message->displayUrl() }}" data-media-type="video" aria-label="Play video">
                    <i class="fa-solid fa-play"></i>
                </button>
            </div>
            @include('chat.partials.msg-meta', ['message' => $message, 'msgType' => $msgType])
        </div>
    @elseif(in_array($msgType, ['voice', 'voice_note']))
        <x-voice-note :message="$message" :is-sent="$message->sender_id === auth()->id()" />
    @elseif($msgType === 'audio')
        <div class="msg-audio-wrap">
            <audio controls preload="metadata" src="{{ $message->displayUrl() }}"></audio>
        </div>
    @else
        <a href="{{ $message->displayUrl() }}" class="msg-attachment-card msg-document-card" download>
            <i class="fa-solid fa-file-lines"></i>
            <div>
                <strong>{{ $meta['original_name'] ?? 'Document' }}</strong>
                <span>{{ $meta['file_size_label'] ?? '' }}</span>
            </div>
        </a>
    @endif
@endif

@if($socialVideos !== [])
    @include('chat.partials.social-video-cards', ['videos' => $socialVideos])
@endif

@if($plainMessageText && !in_array($msgType, ['sticker', 'gif', 'poll', 'contact', 'location', 'live_location', 'link', 'voice', 'voice_note', 'call', 'status_reply']) && !$isStatusReply)
    <p class="msg-text">{{ $plainMessageText }}</p>
@endif