@props(['users', 'checklist'])

@php
    $totalUsers = isset($users) ? count($users) : 0;
    $remainingUsers = collect();
@endphp

<div class="flex items-center gap-6">
    <div>
        <div class="flex items-center">
            <span class="text-xs-semibold text-custom-grey-600">{{ __('title.assignee') }}</span>
            @if ($totalUsers > 0)
                <span class="text-xs text-custom-grey-500">(<span class="total-users">{{ $totalUsers }}</span> {{ Str::plural('assignee', $totalUsers) }})</span>
            @endif
        </div>
        {{-- Visible Users --}}
        <div class="flex items-center -space-x-2">
            @if (isset($users) && !empty($users))
                <div id="assignee-list-users" class="flex items-center -space-x-2">
                    @include('checklist::components.assignee', ['users' => $users])
                </div>
            @endif

            {{-- Remaining Users --}}
            @if ($remainingUsers->isNotEmpty())
                <div class="group relative" x-data="{ isNearRight: false }" x-init="isNearRight = $el.getBoundingClientRect().right > (window.innerWidth - 220)">
                    <button type="button"
                            class="w-8 h-8 rounded-full bg-custom-grey-100 border-2 border-white flex items-center justify-center text-xs font-medium text-custom-grey-600 relative hover:z-10 hover:bg-custom-grey-200 transition-colors"
                            data-toggle="tooltip"
                            data-placement="top"
                            title="{{ $remainingUsers->count() }} more {{ Str::plural('assignee', $remainingUsers->count()) }}">
                        +{{ $remainingUsers->count() }}
                    </button>
                    <div class="hidden group-hover:block absolute top-[calc(100%+8px)] bg-white rounded-lg shadow-lg p-3 z-50 min-w-[200px]"
                         :class="isNearRight ? 'right-0' : 'left-0'">
                        {{-- Invisible bridge to maintain hover --}}
                        <div class="absolute h-2 -top-2 left-0 right-0"></div>
                        <div class="flex flex-col gap-2 max-h-[300px] overflow-y-auto no-scrollbar">
                            @foreach($remainingUsers as $user)
                                @if (request()->user()->can('view', $user->id))
                                    <a href="{{ route('users.profile.show', $user->id) }}" class="flex items-center gap-2 hover:bg-custom-grey-50 p-2 rounded-md">
                                        <img src="{{ getMediaUrl($user, 'photograph', 'thumb') }}"
                                            alt="{{ $user->name }}'s avatar"
                                            class="w-6 h-6 rounded-full">
                                        <span class="text-sm text-custom-grey-600">{{ $user->name }}</span>
                                    </a>
                                @else
                                    <div class="flex items-center gap-2 p-2">
                                        <img src="{{ getMediaUrl($user, 'photograph', 'thumb') }}"
                                            alt="{{ $user->name }}'s avatar"
                                            class="w-6 h-6 rounded-full">
                                        <span class="text-sm text-custom-grey-600">{{ $user->name }}</span>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>