@props([
    'name' => 'page_ids',
    'pages',
    'selected' => [],
    'inputId' => 'page_ids',
    'label' => 'Pages Facebook',
    'placeholder' => 'Selectionner une ou plusieurs pages',
    'searchPlaceholder' => 'Rechercher une page…',
])

@php
    $selectedIds = collect(old($name, $selected))
        ->map(fn ($id) => (string) $id)
        ->filter(fn (string $id) => $id !== '')
        ->unique()
        ->values()
        ->all();

    $options = $pages->map(function ($page) {
        $name = (string) ($page->page_name ?: $page->page_id);
        $fans = $page->fan_count !== null ? number_format($page->fan_count, 0, ',', ' ').' fans' : '';

        return [
            'id' => (string) $page->page_id,
            'label' => $name,
            'meta' => $fans,
            'haystack' => mb_strtolower($name.' '.$page->page_id.' '.$fans),
        ];
    })->values()->all();
@endphp

<div>
    <label for="{{ $inputId }}-trigger" class="mb-1 block text-xs font-semibold uppercase tracking-wider text-slate-500">{{ $label }}</label>
    <div
        class="relative"
        x-data="{
            open: false,
            q: '',
            placeholder: @js($placeholder),
            options: @js($options),
            selectedIds: @js($selectedIds),
            get filtered() {
                const t = this.q.trim().toLowerCase();
                if (!t) {
                    return this.options;
                }
                return this.options.filter((o) => o.haystack.includes(t));
            },
            isSelected(id) {
                return this.selectedIds.includes(id);
            },
            toggleOption(id) {
                if (this.isSelected(id)) {
                    this.selectedIds = this.selectedIds.filter((item) => item !== id);
                    return;
                }
                this.selectedIds.push(id);
            },
            removeOption(id) {
                this.selectedIds = this.selectedIds.filter((item) => item !== id);
            },
            selectAllFiltered() {
                const ids = this.filtered.map((o) => o.id);
                this.selectedIds = [...new Set([...this.selectedIds, ...ids])];
            },
            clearAll() {
                this.selectedIds = [];
            },
            toggleOpen() {
                this.open = !this.open;
                if (this.open) {
                    this.q = '';
                    this.$nextTick(() => this.$refs.search?.focus());
                }
            },
            summaryLabel() {
                if (this.selectedIds.length === 0) {
                    return '';
                }
                if (this.selectedIds.length === 1) {
                    const o = this.options.find((x) => x.id === this.selectedIds[0]);
                    return o ? o.label : '1 page';
                }
                return `${this.selectedIds.length} pages selectionnees`;
            },
        }"
        @click.outside="open = false"
    >
        <template x-for="id in selectedIds" :key="id">
            <input type="hidden" name="{{ $name }}[]" :value="id">
        </template>

        <button
            type="button"
            id="{{ $inputId }}-trigger"
            @click="toggleOpen()"
            class="flex w-full min-h-[42px] items-center justify-between gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-sm focus:border-[#E83646] focus:outline-none focus:ring-1 focus:ring-[#E83646]"
            :aria-expanded="open"
            aria-haspopup="listbox"
        >
            <span class="min-w-0 flex-1">
                <span x-show="selectedIds.length === 0" class="text-slate-400" x-text="placeholder"></span>
                <span x-show="selectedIds.length > 0" class="flex flex-wrap gap-1.5" x-cloak>
                    <template x-for="id in selectedIds" :key="'chip-' + id">
                        <span class="inline-flex items-center gap-1 rounded-md bg-rose-50 px-2 py-0.5 text-xs font-medium text-[#E83646]">
                            <span x-text="options.find((o) => o.id === id)?.label || id"></span>
                            <button type="button" class="hover:text-rose-800" @click.stop="removeOption(id)" aria-label="Retirer">&times;</button>
                        </span>
                    </template>
                </span>
            </span>
            <svg class="h-4 w-4 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>

        <div
            x-show="open"
            x-cloak
            x-transition
            class="absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-lg"
            role="listbox"
        >
            <input
                type="search"
                x-ref="search"
                x-model="q"
                autocomplete="off"
                placeholder="{{ $searchPlaceholder }}"
                class="w-full border-b border-slate-100 px-3 py-2 text-sm focus:border-[#E83646] focus:outline-none focus:ring-0"
                @keydown.escape.prevent.stop="open = false"
                @click.stop
            />
            <div class="flex items-center justify-between border-b border-slate-100 px-3 py-2 text-xs">
                <button type="button" class="font-semibold text-[#E83646] hover:underline" @click="selectAllFiltered()">Tout selectionner</button>
                <button type="button" class="text-slate-500 hover:text-slate-700" @click="clearAll()">Tout effacer</button>
            </div>
            <ul class="max-h-56 overflow-y-auto py-1">
                <template x-for="o in filtered" :key="o.id">
                    <li>
                        <button
                            type="button"
                            class="flex w-full items-start gap-2 px-3 py-2 text-left text-sm hover:bg-rose-50"
                            :class="{ 'bg-rose-50/90': isSelected(o.id) }"
                            role="option"
                            :aria-selected="isSelected(o.id)"
                            @click="toggleOption(o.id)"
                        >
                            <span class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border"
                                  :class="isSelected(o.id) ? 'border-[#E83646] bg-[#E83646] text-white' : 'border-slate-300 bg-white'">
                                <span x-show="isSelected(o.id)" x-cloak>✓</span>
                            </span>
                            <span class="min-w-0">
                                <span class="block font-medium text-slate-900" x-text="o.label"></span>
                                <span class="block text-xs text-slate-500" x-show="o.meta" x-text="o.meta"></span>
                            </span>
                        </button>
                    </li>
                </template>
            </ul>
            <p x-show="filtered.length === 0" class="px-3 py-2 text-sm text-slate-500">Aucune page ne correspond.</p>
        </div>
    </div>
</div>