@props(['viewers' => 'viewers'])

{{-- Presence Viewers Component (Blade/Alpine) --}}
{{-- Expects to be inside an x-data with 'viewers' array and helper methods --}}

<div class="flex items-center -space-x-2 overflow-hidden py-1 px-2" x-show="{{ $viewers }} && {{ $viewers }}.length > 0"
    x-cloak>
    <span class="text-xs text-gray-500 mr-3 hidden sm:inline-block font-medium">Viewers:</span>

    <template x-for="(viewer, index) in {{ $viewers }}.slice(0, 3)" :key="viewer.user_id + '-' + index">
        <div class="group relative inline-block">
            {{-- Avatar Circle --}}
            <div class="relative flex items-center justify-center w-8 h-8 rounded-full border-2 border-white text-xs font-medium text-white shadow-sm cursor-help"
                :class="getAvatarColor(viewer.user_name || 'User') + (viewer.dirty || viewer.mode === 'edit' ? ' ring-2 ring-red-400 ring-offset-1' : '')"
                :title="viewer.user_name">
                <span x-text="getInitials(viewer.user_name)"></span>

                {{-- Editing Indicator (Pencil Icon) --}}
                <template x-if="viewer.dirty || viewer.mode === 'edit'">
                    <span
                        class="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-white ring-1 ring-gray-200">
                        <svg class="h-2.5 w-2.5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                        </svg>
                    </span>
                </template>
            </div>

            {{-- Tooltip --}}
            <div
                class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden min-w-max px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-lg group-hover:block z-50">
                <span x-text="viewer.user_name + (viewer.dirty || viewer.mode === 'edit' ? ' (Editing)' : '')"></span>
                <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800">
                </div>
            </div>
        </div>
    </template>

    {{-- Overflow Counter --}}
    <template x-if="{{ $viewers }}.length > 3">
        <div class="flex items-center justify-center w-8 h-8 rounded-full border-2 border-white bg-gray-200 text-xs font-medium text-gray-600 shadow-sm z-10"
            :title="({{ $viewers }}.length - 3) + ' more viewers'">
            <span x-text="'+' + ({{ $viewers }}.length - 3)"></span>
        </div>
    </template>
</div>