@props([
    'isMe' => true,
    'id' => null,
    'user' => null,
    'avatarClass' => 'bg-purple',
    'bubbleClass' => 'w-50',
    'replyClass' => 'w-45',
    'initials' => '',
    'time' => '',
    'content' => '',
    'message' => null, // Full message object for attachments
])

<div @class(['chat is-you mb-1']) id="message-{{ $id }}">
    <div class="chat-avatar" x-data="tooltip" data-bs-title="{{ $user->fullname }}">
        <x-user.avatar :$user />
    </div>
    <div class="chat-content w-100">
        <div class="chat-bubbles">
            @if($message && $message->isReply() && $message->parent)
                <!-- Reply Reference -->
                <div class="reply-reference {{ $replyClass }}">
                    <div class="reply-indicator">
                        <em class="icon ni ni-reply-fill text-muted"></em>
                        <span class="text-muted bold">{{ __('Replying to') }} {{ $message->parent->sender->name_and_surname }}</span>
                    </div>
                    <div class="reply-content">
                        <p class="mb-0 text-muted small">
                            @if($message->parent->hasMedia('attachments'))
                                <em class="icon ni ni-clip me-1"></em>
                            @endif
                            {!! $message->parent->body ? nl2br(strip_tags($message->parent->body, '<b><i><u><li><br><strong><em>')) : __('Attachment') !!}
                        </p>
                    </div>
                </div>
            @endif

            <div class="chat-bubble {{ $bubbleClass }}">
                @if($content)
                    <div class="chat-msg {{ $isMe ? 'is-me' : 'bg-white' }}" data-message-content>{!! $content !!}</div>
                @endif
                
                @if($content || ($message && ($message->hasMedia('attachments') || $message->hasMedia('audio'))))
                    <ul class="chat-msg-more" x-data="reactionPicker({{ $id }})" x-on:click.stop>
                        @if(! $isMe)    
                            <li><a href="#" class="btn btn-icon btn-sm btn-trigger" x-data="tooltip" data-bs-title="{{ __('Reply') }}" x-on:click="$wire.emit('setReplyingTo', {{ $id }})"><em class="icon ni ni-reply-fill"></em></a></li>
                        @else
                            <li><a href="#" class="btn btn-icon btn-sm btn-trigger" x-data="tooltip" data-bs-title="{{ __('Reply') }}" x-on:click="$wire.emit('setReplyingTo', {{ $id }})"><em class="icon ni ni-reply-fill"></em></a></li>
                        @endif
                        
                        {{-- Add Reaction Button --}}
                        <li>
                            <a href="#" class="btn btn-icon btn-sm btn-trigger add-reaction-btn" x-on:click.prevent="togglePicker()" x-data="tooltip" data-bs-title="{{ __('Add reaction') }}" data-bs-placement="bottom">
                                <span class="reaction-btn-emoji">🙂</span>
                            </a>
                        </li>
                        
                        @if($isMe)
                            <li>
                                <div class="dropdown">
                                    <a href="#" class="btn btn-icon btn-sm btn-trigger dropdown-toggle" data-bs-toggle="dropdown" wire:ignore.self><em class="icon ni ni-more-h"></em></a>
                                    <div class="dropdown-menu dropdown-menu-sm dropdown-menu-end" wire:ignore.self>
                                        <ul class="link-list-opt no-bdr">
                                            @if($content)
                                                <li wire:click="$emit('setEditingMessage', {{ $id }})">
                                                    <a href="#"><em class="icon ni ni-edit-fill"></em> {{ __('Edit') }}</a>
                                                </li>
                                            @endif
                                            <li wire:click="deleteChat({{ $id }})" @confirm("supprimer ce message")>
                                                <a href="#"><em class="icon ni ni ni-trash-fill"></em> {{ __('Remove') }}</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        @endif
                        
                        {{-- Emoji Picker Popup --}}
                        <div 
                            class="reaction-picker-popup" 
                            x-show="showPicker" 
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-100"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            x-cloak
                        >
                            {{-- Quick Reactions --}}
                            {{-- <div class="quick-reactions"> --}}
                                <template x-for="emoji in quickReactions" :key="emoji.char">
                                    <button 
                                        type="button"
                                        class="quick-reaction-btn"
                                        x-on:click="selectEmoji(emoji.char)"
                                        x-text="emoji.char"
                                        x-bind:title="emoji.name"
                                    ></button>
                                </template>
                            {{-- </div> --}}

                            {{-- Search Input --}}
                            {{-- <div class="reaction-search">
                                <input 
                                    type="text" 
                                    class="form-control form-control-sm reaction-search-input"
                                    x-model="searchQuery"
                                    placeholder="{{ __('Search emoji...') }}"
                                    x-on:keydown.escape="showPicker = false"
                                >
                            </div> --}}

                            {{-- Tabs --}}
                            {{-- <div class="reaction-tabs">
                                <button 
                                    type="button"
                                    x-bind:class="{ 'active': selectedTab === 'smileys' }"
                                    x-on:click="selectedTab = 'smileys'"
                                    title="{{ __('Smileys') }}"
                                >😀</button>
                                <button 
                                    type="button"
                                    x-bind:class="{ 'active': selectedTab === 'hearts' }"
                                    x-on:click="selectedTab = 'hearts'"
                                    title="{{ __('Hearts & Hands') }}"
                                >❤️</button>
                                <button 
                                    type="button"
                                    x-bind:class="{ 'active': selectedTab === 'objects' }"
                                    x-on:click="selectedTab = 'objects'"
                                    title="{{ __('Objects') }}"
                                >🎉</button>
                            </div> --}}

                            {{-- Emoji Grid --}}
                            {{-- <div class="reaction-emoji-grid">
                                <template x-for="emoji in filteredEmojis" :key="emoji.char">
                                    <button 
                                        type="button"
                                        class="emoji-grid-btn"
                                        x-on:click="selectEmoji(emoji.char)"
                                        x-text="emoji.char"
                                        x-bind:title="emoji.name"
                                    ></button>
                                </template>
                                <div x-show="filteredEmojis.length === 0" class="text-center text-muted py-3">
                                    {{ __('No emoji found') }}
                                </div>
                            </div> --}}
                        </div>
                    </ul>
                @endif
            </div>
            @if($message && ($message->hasMedia('attachments') || $message->hasMedia('audio')))
                <div class="chat-attachments mt-2">
                    {{-- Audio Messages --}}
                    {{-- @if($message->hasMedia('audio'))
                        @foreach($message->getMedia('audio') as $audioFile)
                            <div class="attachment-item mb-2">
                                <x-ui.audio-player 
                                    :src="route('files.getMedia', Obfuscate::encode($audioFile->id, new \Spatie\MediaLibrary\MediaCollections\Models\Media))" 
                                    :filename="$audioFile->file_name"
                                    :size="$audioFile->human_readable_size"
                                />
                            </div>
                        @endforeach
                    @endif --}}
                    
                    {{-- File Attachments --}}
                    @foreach($message->getMedia('attachments') as $attachment)
                        <div class="attachment-item">
                            @if(str($attachment->mime_type)->startsWith('image/'))
                                <!-- Image Attachment -->
                                <div class="attachment-image">
                                    <img src="{{ route('files.getMedia', Obfuscate::encode($attachment->id, new \Spatie\MediaLibrary\MediaCollections\Models\Media)) }}" 
                                            alt="{{ $attachment->file_name }}"
                                            class="img-fluid rounded"
                                            style="max-width: 200px; max-height: 200px; cursor: pointer;"
                                            x-on:click="window.open('{{ route('files.getMedia', Obfuscate::encode($attachment->id, new \Spatie\MediaLibrary\MediaCollections\Models\Media)) }}', '_blank');
                                        ">
                                </div>
                            @else
                                <!-- File Attachment -->
                                <a href="{{ route('files.getMedia', Obfuscate::encode($attachment->id, new \Spatie\MediaLibrary\MediaCollections\Models\Media)) }}" 
                                    target="_blank"
                                    class="attachment-file d-flex align-items-center p-2 bg-light rounded text-decoration-none">
                                    <div class="attachment-icon me-2">
                                        @switch(pathinfo($attachment->file_name, PATHINFO_EXTENSION))
                                            @case('pdf')
                                                <x-ui.nicon name="file-pdf" class="text-danger fs-20px"/>
                                                @break
                                            @case('doc')
                                            @case('docx')
                                                <x-ui.nicon name="file-doc" class="text-primary fs-20px"/>
                                                @break
                                            @case('xls')
                                            @case('xlsx')
                                                <x-ui.nicon name="file-xls" class="text-success fs-20px"/>
                                                @break
                                            @case('zip')
                                            @case('7z')
                                                <x-ui.nicon name="file-zip" class="text-warning fs-20px"/>
                                                @break
                                            @default
                                                <x-ui.nicon name="file" class="text-muted fs-20px"/>
                                        @endswitch
                                    </div>
                                    <div class="attachment-details flex-grow-1">
                                        <div class="attachment-name small fw-medium text-dark">
                                            {{ $attachment->file_name }}
                                        </div>
                                        <div class="attachment-size text-muted" style="font-size: 11px;">
                                            {{ $attachment->human_readable_size }}
                                        </div>
                                    </div>
                                    <x-ui.nicon name="download" class="text-muted ms-2"/>
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
        <ul class="chat-meta">
            <li>{{ $time }}</li>
            @if($message?->hasBeenReadByOthers())
                <li>
                    <span
                        x-data="tooltip" 
                        data-bs-html="true"
                        data-bs-title="<div class='text-start'>
                            <div class='fw-bold mb-1'>{{ __('Read by') }}:</div>
                            @foreach($message->getUsersWhoReadMessage() as $reader)
                                <div class='mb-1'>• {{ $reader->name_and_surname }}</div>
                            @endforeach
                        </div>"
                    >
                        <em class="icon ni ni-check text-success"></em>
                    </span>
                </li>
            @endif
            {{-- Display existing reactions --}}
            @if($message && $message->reactions->isNotEmpty())
                <li>
                    <div class="message-reactions">
                        @foreach($message->getGroupedReactions() as $reaction)
                            <button 
                                type="button"
                                class="reaction-badge {{ $reaction['current_user_reacted'] ? 'reacted' : '' }}"
                                x-on:click="Livewire.emit('toggleReaction', {{ $id }}, '{{ $reaction['emoji'] }}')"
                                x-data="tooltip" 
                                data-bs-html="true"
                                data-bs-title="<div class='text-start'>
                                    @foreach($reaction['users'] as $user)
                                        <div>{{ $user->name_and_surname }}</div>
                                    @endforeach
                                </div>"
                            >
                                <span class="reaction-emoji">{{ $reaction['emoji'] }}</span>
                                <span class="reaction-count">{{ $reaction['count'] }}</span>
                            </button>
                        @endforeach
                    </div>
                </li>
            @endif
        </ul>
    </div>
</div><!-- .chat -->