@props([
    'label',
    'model',
    'options' => [],
    'placeholder' => 'Select an option',
    'searchPlaceholder' => 'Search...',
    'errorField' => null,
    'required' => false,
])

@php
    $errors = $errors ?? new \Illuminate\Support\ViewErrorBag();
    $errorField = $errorField ?: $model;
    $normalizedOptions = array_values(array_map(static function (array $option): array {
        return [
            'value' => (string) ($option['value'] ?? ''),
            'label' => (string) ($option['label'] ?? ''),
            'meta' => trim((string) ($option['meta'] ?? '')),
        ];
    }, $options));
    $itemError = $errors->first($errorField . '.*');
@endphp

<div
    class="space-y-2"
    x-data="{
        selected: $wire.entangle('{{ $model }}').live,
        options: @js($normalizedOptions),
        open: false,
        search: '',
        init() {
            this.selected = this.normalize(this.selected);
        },
        normalize(values) {
            const source = Array.isArray(values) ? values : (values === null || values === undefined || values === '' ? [] : [values]);
            const allowed = new Set(this.options.map(option => String(option.value)));
            const normalized = [];

            source.forEach((value) => {
                const candidate = String(value).trim();
                if (!candidate || !allowed.has(candidate)) {
                    return;
                }
                if (candidate === '0') {
                    normalized.splice(0, normalized.length, '0');
                    return;
                }
                if (!normalized.includes(candidate)) {
                    normalized.push(candidate);
                }
            });

            return normalized.includes('0') ? ['0'] : normalized;
        },
        selectedItems() {
            const selectedSet = new Set(this.normalize(this.selected));
            return this.options.filter(option => selectedSet.has(String(option.value)));
        },
        filteredOptions() {
            const term = this.search.trim().toLowerCase();
            if (!term) {
                return this.options;
            }

            return this.options.filter((option) => {
                return [option.label, option.meta]
                    .filter(Boolean)
                    .some((part) => String(part).toLowerCase().includes(term));
            });
        },
        isSelected(value) {
            return this.normalize(this.selected).includes(String(value));
        },
        toggle(value) {
            const candidate = String(value);
            let next = this.normalize(this.selected).filter(item => item !== '0');

            if (candidate === '0') {
                this.selected = ['0'];
                this.open = false;
                return;
            }

            if (next.includes(candidate)) {
                next = next.filter(item => item !== candidate);
            } else {
                next.push(candidate);
            }

            this.selected = next;
        },
        remove(value) {
            const candidate = String(value);
            this.selected = this.normalize(this.selected).filter(item => item !== candidate);
        },
        openDropdown() {
            this.open = true;
            this.$nextTick(() => this.$refs.searchInput?.focus());
        },
        closeDropdown() {
            this.open = false;
            this.search = '';
        },
    }"
    x-init="init()"
    x-on:keydown.escape.window="closeDropdown()"
>
    <label class="block mb-1">
        {{ $label }}
        @if ($required)
            <span class="text-xs text-red-600 mt-1" style="font-size: 18px;">*</span>
        @endif
    </label>

    <div class="relative" x-on:click.outside="closeDropdown()">
        <button
            type="button"
            class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-left shadow-sm transition focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
            :class="open ? 'border-sky-500 ring-2 ring-sky-100' : ''"
            x-on:click="open ? closeDropdown() : openDropdown()"
        >
            <div class="flex min-h-[28px] items-start justify-between gap-3">
                <div class="flex flex-1 flex-wrap gap-2">
                    <template x-if="selectedItems().length === 0">
                        <span class="pt-1 text-sm text-gray-400">{{ $placeholder }}</span>
                    </template>

                    <template x-for="item in selectedItems()" :key="item.value">
                        <span
                            class="inline-flex max-w-full items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium shadow-sm"
                            style="background-color:#dbeafe;color:#0c4a6e;border:1px solid #93c5fd;"
                        >
                            <span class="truncate" x-text="item.label"></span>
                            <button
                                type="button"
                                class="inline-flex h-4 w-4 items-center justify-center rounded-full text-[11px] leading-none transition"
                                style="background-color:#bfdbfe;color:#0c4a6e;"
                                x-on:click.stop="remove(item.value)"
                                aria-label="Remove selection"
                            >
                                &times;
                            </button>
                        </span>
                    </template>
                </div>

                <svg class="mt-1 h-4 w-4 flex-shrink-0 text-gray-500 transition" :class="open ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.51a.75.75 0 01-1.08 0l-4.25-4.51a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                </svg>
            </div>
        </button>

        <div
            x-cloak
            x-show="open"
            x-transition.origin.top.left
            class="absolute z-50 mt-2 w-full rounded-xl border border-gray-200 bg-white shadow-xl"
        >
            <div class="border-b border-gray-100 p-3">
                <input
                    x-ref="searchInput"
                    x-model="search"
                    type="text"
                    class="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200"
                    placeholder="{{ $searchPlaceholder }}"
                />
            </div>

            <div class="max-h-64 overflow-y-auto p-2">
                <template x-if="filteredOptions().length === 0">
                    <div class="px-3 py-2 text-sm text-gray-500">No matching options found.</div>
                </template>

                <template x-for="item in filteredOptions()" :key="item.value">
                    <button
                        type="button"
                        class="flex w-full items-start justify-between gap-3 rounded-lg px-3 py-2 text-left transition hover:bg-sky-50"
                        :class="isSelected(item.value) ? 'text-sky-900' : 'text-gray-700'"
                        :style="isSelected(item.value) ? 'background-color:#eff6ff;border:1px solid #bfdbfe;' : 'border:1px solid transparent;'"
                        x-on:click.stop="toggle(item.value)"
                    >
                        <span class="min-w-0">
                            <span class="block truncate text-sm font-medium" x-text="item.label"></span>
                            <span x-show="item.meta" class="block truncate text-[11px] text-gray-500" x-text="item.meta"></span>
                        </span>

                        <span
                            class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border text-[11px]"
                            :class="isSelected(item.value) ? 'border-sky-500 text-white' : 'border-gray-300 bg-white text-transparent'"
                            :style="isSelected(item.value) ? 'background-color:#0284c7;' : ''"
                        >
                            &#10003;
                        </span>
                    </button>
                </template>
            </div>
        </div>
    </div>

    @error($errorField)
        <div class="text-xs text-red-600">{{ $message }}</div>
    @enderror

    @if (!$errors->has($errorField) && $itemError)
        <div class="text-xs text-red-600">{{ $itemError }}</div>
    @endif
</div>