@props([
    'name'            => null,          // form field name (null = no hidden inputs)
    'label'           => null,          // section label
    'searchUrl'       => '',            // GET endpoint returning [{id,name,age,city,photo}]
    'savedFiltersUrl' => null,          // GET endpoint returning saved filter lists (optional)
    'preselected'     => [],            // already-selected items (same shape)
    'selectable'      => true,          // false = display-only (no checkboxes)
    'inviteUrl'       => null,          // AJAX mode: POST to add a user
    'removeUrl'       => null,          // AJAX mode: DELETE {removeUrl}/{memberId}
    'actionUrl'       => null,          // bulk-action mode: POST selected IDs here
    'actionLabel'     => null,          // bulk-action button label
])

@php
    $label       ??= __('Invite members (optional)');
    $actionLabel ??= __('Send to selected');
    $formMode    = $inviteUrl === null && $actionUrl === null;
@endphp

<div x-data="profilePicker(@js([
        'searchUrl'       => $searchUrl,
        'savedFiltersUrl' => $savedFiltersUrl,
        'preselected'     => $preselected,
        'inviteUrl'       => $inviteUrl,
        'removeUrl'       => $removeUrl,
        'actionUrl'       => $actionUrl,
        'formMode'        => $formMode,
        'selectable'      => $selectable,
    ]))"
     x-init="init()"
     class="space-y-2">

    {{-- Label row + saved-lists dropdown --}}
    <div class="flex items-center justify-between gap-2 min-h-[1.5rem]">
        @if ($label)
            <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">{{ $label }}</p>
        @endif

        @if ($savedFiltersUrl)
        {{-- Saved lists dropdown --}}
        <div class="relative ml-auto" @click.outside="listsOpen = false">
            <button type="button"
                    @click="listsOpen = !listsOpen; listsOpen && fetchLists()"
                    class="inline-flex items-center gap-1 text-xs text-indigo-500 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
                </svg>
                {{ __('My saved lists') }}
                <template x-if="lists.length > 0">
                    <span class="text-gray-400" x-text="'(' + lists.length + ')'"></span>
                </template>
            </button>

            <div x-show="listsOpen" x-cloak
                 class="absolute right-0 top-full mt-1 z-30 min-w-[14rem] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-lg overflow-hidden">
                <div x-show="listsLoading" class="px-3 py-2 text-xs text-gray-400">
                    {{ __('Searching…') }}
                </div>
                <div x-show="!listsLoading && lists.length === 0"
                     class="px-3 py-2 text-xs text-gray-400">
                    {{ __('No saved searches yet.') }}
                </div>
                <template x-for="list in lists" :key="list.id">
                    <button type="button"
                            @click="loadList(list)"
                            class="w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition flex items-center justify-between gap-2">
                        <span x-text="list.name" class="truncate"></span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </template>
            </div>
        </div>
        @endif
    </div>

    {{-- Search input --}}
    <div class="relative">
        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 0 5 11a6 6 0 0 0 12 0z" />
            </svg>
        </span>
        <input type="text"
               x-model="query"
               @input.debounce.300ms="search()"
               placeholder="{{ __('Search by name or profile number…') }}"
               autocomplete="off"
               class="w-full pl-9 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400" />
        <button type="button" x-show="query" @click="query=''; results=[]; loadedListName=null"
                class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    {{-- Active saved-list indicator --}}
    <div x-show="loadedListName" x-cloak
         class="flex items-center gap-1.5 text-xs text-indigo-600 dark:text-indigo-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
        </svg>
        <span x-text="loadedListName"></span>
    </div>

    {{-- Scrollable list --}}
    <div class="h-72 overflow-y-auto rounded-xl border border-gray-200 dark:border-gray-600 divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800">

        {{-- Select all header row — sticky, only when there are visible rows --}}
        @if ($selectable)
        <div x-show="visibleUsers.length > 0"
             class="sticky top-0 z-10 flex items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-700/60 border-b border-gray-200 dark:border-gray-600">
            <input type="checkbox"
                   :checked="allChecked"
                   :indeterminate="someChecked"
                   @change="toggleAll()"
                   class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 shrink-0" />
            <span class="text-xs font-medium text-gray-500 dark:text-gray-400 flex-1">{{ __('Select all') }}</span>
            <span class="text-xs text-gray-400" x-text="visibleUsers.length"></span>
        </div>
        @endif

        {{-- Preselected rows at top (always visible, no query needed) --}}
        <template x-for="user in preselectedList" :key="'pre-' + user.id">
            <label class="flex items-center gap-3 px-3 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 cursor-pointer transition"
                   :class="{ 'cursor-default': !config.selectable }">
                @if ($selectable)
                <input type="checkbox"
                       :checked="isSelected(user.id)"
                       @change="toggle(user)"
                       class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 shrink-0" />
                @endif
                <div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700 shrink-0">
                    <template x-if="user.photo">
                        <img :src="user.photo" :alt="user.name" class="w-full h-full object-cover" />
                    </template>
                    <template x-if="!user.photo">
                        <div class="w-full h-full flex items-center justify-center text-gray-400 text-xs font-bold" x-text="user.name?.charAt(0)"></div>
                    </template>
                </div>
                <span class="text-xs text-gray-400 shrink-0" x-text="'#' + user.id"></span>
                <span class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate flex-1" x-text="user.name"></span>
                <span class="text-xs text-gray-400 shrink-0" x-text="user.age ? user.age + ' jr' : ''"></span>
                <span class="text-xs text-gray-400 shrink-0 truncate max-w-[5rem]" x-text="user.city ?? ''"></span>
            </label>
        </template>

        {{-- Search results (exclude already-shown preselected) --}}
        <template x-for="user in filteredResults" :key="'res-' + user.id">
            <label class="flex items-center gap-3 px-3 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 cursor-pointer transition"
                   :class="{ 'cursor-default': !config.selectable }">
                @if ($selectable)
                <input type="checkbox"
                       :checked="isSelected(user.id)"
                       @change="toggle(user)"
                       class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 shrink-0" />
                @endif
                <div class="w-8 h-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700 shrink-0">
                    <template x-if="user.photo">
                        <img :src="user.photo" :alt="user.name" class="w-full h-full object-cover" />
                    </template>
                    <template x-if="!user.photo">
                        <div class="w-full h-full flex items-center justify-center text-gray-400 text-xs font-bold" x-text="user.name?.charAt(0)"></div>
                    </template>
                </div>
                <span class="text-xs text-gray-400 shrink-0" x-text="'#' + user.id"></span>
                <span class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate flex-1" x-text="user.name"></span>
                <span class="text-xs text-gray-400 shrink-0" x-text="user.age ? user.age + ' jr' : ''"></span>
                <span class="text-xs text-gray-400 shrink-0 truncate max-w-[5rem]" x-text="user.city ?? ''"></span>
            </label>
        </template>

        {{-- Empty state --}}
        <div x-show="!loading && (query || loadedListName) && filteredResults.length === 0 && preselectedList.length === 0"
             class="px-3 py-4 text-sm text-gray-400 text-center">
            {{ __('No results') }}
        </div>

        <div x-show="loading" class="px-3 py-4 text-sm text-gray-400 text-center">
            {{ __('Searching…') }}
        </div>

        <div x-show="!loading && !query && !loadedListName && preselectedList.length === 0"
             class="px-3 py-4 text-sm text-gray-400 text-center">
            {{ __('Type to search profiles') }}
        </div>

        {{-- Load more / loading more --}}
        <div x-show="hasMore && !loadingMore"
             class="px-3 py-2.5 text-center border-t border-gray-100 dark:border-gray-700">
            <button type="button" @click="loadMore()"
                    class="text-xs font-medium text-indigo-500 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 transition">
                {{ __('Load more') }} ↓
            </button>
        </div>
        <div x-show="loadingMore"
             class="px-3 py-2.5 text-sm text-gray-400 text-center border-t border-gray-100 dark:border-gray-700">
            {{ __('Searching…') }}
        </div>
    </div>

    {{-- Selection counter + clear --}}
    @if ($selectable)
    <div x-show="selected.length > 0" class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <span><span x-text="selected.length"></span> {{ __('selected') }}</span>
        <button type="button" @click="clearSelection()"
                class="text-red-500 hover:text-red-700 hover:underline transition">
            {{ __('Clear selection') }}
        </button>
    </div>
    @endif

    {{-- Hidden inputs for form mode --}}
    @if ($name && $formMode)
    <template x-for="user in selected" :key="'hidden-' + user.id">
        <input type="hidden" :name="'{{ $name }}[]'" :value="user.id" />
    </template>
    @endif

    {{-- Bulk action button --}}
    @if ($actionUrl)
    <form method="POST" action="{{ $actionUrl }}" x-ref="bulkForm">
        @csrf
        <template x-for="user in selected" :key="'bulk-' + user.id">
            <input type="hidden" name="{{ $name ?? 'user_ids' }}[]" :value="user.id" />
        </template>
        <button type="submit" :disabled="selected.length === 0"
                class="w-full mt-1 px-4 py-2 rounded-lg text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed"
                style="background-color:rgb(var(--a6))">
            {{ $actionLabel }}
        </button>
    </form>
    @endif
</div>

<script>
function profilePicker(config) {
    return {
        config,
        query:          '',
        results:        [],     // accumulated pages of search/list results
        selected:       [],     // [{id, name, age, city, photo, memberId?}]
        preselectedList:[],
        loading:        false,  // first-page fetch in progress
        loadingMore:    false,  // subsequent-page fetch in progress
        loadedListName: null,
        hasMore:        false,  // whether another page exists
        offset:         0,      // next-page offset (accumulated from loaded pages)
        activeParams:   {},     // params for the current result set (reused by loadMore)
        // Saved lists
        lists:          [],
        listsOpen:      false,
        listsLoading:   false,
        listsFetched:   false,

        init() {
            this.preselectedList = config.preselected ?? [];
            if (config.formMode) {
                this.selected = [...this.preselectedList];
            }
        },

        // ── Core fetch helper ────────────────────────────────────────────────
        // append=false → replace results (first page); append=true → add to results
        async fetchPage(params, append = false) {
            if (append) this.loadingMore = true;
            else        { this.loading = true; this.offset = 0; }
            try {
                const url = new URL(config.searchUrl, location.origin);
                Object.entries(params).forEach(([k, v]) => {
                    if (v !== null && v !== '') url.searchParams.set(k, String(v));
                });
                url.searchParams.set('offset', this.offset);
                const resp = await fetch(url, { headers: { Accept: 'application/json' } });
                if (!resp.ok) return;
                const json    = await resp.json();
                const page    = Array.isArray(json) ? json : (json.data ?? []);
                this.results  = append ? [...this.results, ...page] : page;
                this.hasMore  = Array.isArray(json) ? false : (json.hasMore ?? false);
                this.offset  += page.length;
            } finally {
                if (append) this.loadingMore = false;
                else        this.loading = false;
            }
        },

        // ── Public search / pagination actions ───────────────────────────────
        async search() {
            this.loadedListName = null;
            if (this.query.trim() === '') {
                this.results = []; this.hasMore = false; this.activeParams = {};
                return;
            }
            this.activeParams = { q: this.query.trim() };
            await this.fetchPage(this.activeParams, false);
        },

        async loadMore() {
            if (!this.hasMore || this.loading || this.loadingMore) return;
            await this.fetchPage(this.activeParams, true);
        },

        // ── Computed ─────────────────────────────────────────────────────────
        get filteredResults() {
            const preIds = new Set(this.preselectedList.map(u => u.id));
            return this.results.filter(r => !preIds.has(r.id));
        },

        get visibleUsers() {
            return [...this.preselectedList, ...this.filteredResults];
        },

        get allChecked() {
            const v = this.visibleUsers;
            return v.length > 0 && v.every(u => this.isSelected(u.id));
        },

        get someChecked() {
            return this.visibleUsers.some(u => this.isSelected(u.id)) && !this.allChecked;
        },

        // ── Selection actions ────────────────────────────────────────────────
        async toggleAll() {
            if (!config.selectable) return;
            if (this.allChecked) {
                for (const user of this.visibleUsers) {
                    if (this.isSelected(user.id)) await this.remove(user);
                }
            } else {
                for (const user of this.visibleUsers) {
                    if (!this.isSelected(user.id)) await this.add(user);
                }
            }
        },

        isSelected(id) {
            return this.selected.some(s => s.id === id);
        },

        async toggle(user) {
            if (!config.selectable) return;
            this.isSelected(user.id) ? await this.remove(user) : await this.add(user);
        },

        async add(user) {
            if (config.formMode) { this.selected.push(user); return; }
            const csrf = document.querySelector('meta[name=csrf-token]')?.content ?? '';
            const resp = await fetch(config.inviteUrl, {
                method:  'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json' },
                body:    JSON.stringify({ user_id: user.id }),
            });
            if (resp.ok) this.selected.push(user);
        },

        async remove(user) {
            if (config.formMode) { this.selected = this.selected.filter(s => s.id !== user.id); return; }
            const s = this.selected.find(s => s.id === user.id)
                   ?? this.preselectedList.find(s => s.id === user.id);
            if (!s) return;
            const csrf = document.querySelector('meta[name=csrf-token]')?.content ?? '';
            const resp = await fetch(config.removeUrl.replace('{memberId}', s.memberId ?? s.id), {
                method:  'DELETE',
                headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' },
            });
            if (resp.ok) {
                this.selected        = this.selected.filter(x => x.id !== user.id);
                this.preselectedList = this.preselectedList.filter(x => x.id !== user.id);
            }
        },

        clearSelection() { this.selected = []; },

        // ── Saved lists ──────────────────────────────────────────────────────
        async fetchLists() {
            if (!config.savedFiltersUrl || this.listsLoading) return;
            this.listsLoading = true;
            try {
                const resp = await fetch(config.savedFiltersUrl, { headers: { Accept: 'application/json' } });
                if (resp.ok) this.lists = await resp.json();
                this.listsFetched = true;
            } finally {
                this.listsLoading = false;
            }
        },

        async loadList(list) {
            this.listsOpen      = false;
            this.query          = '';
            this.loadedListName = list.name;
            this.activeParams   = { ...(list.filters ?? {}) };
            await this.fetchPage(this.activeParams, false);
        },
    };
}
</script>