@props([
    'name' => '',
    'label' => '',
    'options' => [],
    'selected' => [],
    'placeholder' => 'select...',
    'required' => false,
    'allowAll' => false,
    'maxSelection' => 5,
])

<div class="group" x-data="{
    open: false,
    search: '',
    selectedItems: @js(array_values((array) $selected)),
    maxSelection: {{ $maxSelection }},
    allowAll: {{ $allowAll ? 'true' : 'false' }},
    options: @js($options),

    get filteredOptions() {
        if (!this.search) return this.options;
        return Object.fromEntries(
            Object.entries(this.options).filter(([value, text]) =>
                text.toLowerCase().includes(this.search.toLowerCase())
            )
        );
    },

    get hasAllSelected() {
        return this.selectedItems.includes('');
    },

    get selectedTexts() {
        if (this.hasAllSelected) {
            return ['All {{ $placeholder }}'];
        }
        return this.selectedItems.map(value => this.options[value] || value).filter(Boolean);
    },

    toggleOption(value) {
        if (value === '') {
            // Toggle 'All' option
            this.selectedItems = this.hasAllSelected ? [] : [''];
        } else {
            // Handle regular options
            if (this.hasAllSelected) {
                this.selectedItems = [value];
            } else if (this.selectedItems.includes(value)) {
                // Remove if already selected
                this.selectedItems = this.selectedItems.filter(item => item !== value);
            } else if (this.selectedItems.length < this.maxSelection) {
                // Add if under max limit
                this.selectedItems.push(value);
            }
        }
        this.updateHiddenInputs();
    },

    removeTag(value) {
        this.selectedItems = this.selectedItems.filter(item => item !== value);
        this.updateHiddenInputs();
    },

    clearAll() {
        this.selectedItems = [];
        this.updateHiddenInputs();
    },

    updateHiddenInputs() {
        // Update hidden select for form submission
        const select = this.$refs.hiddenSelect;
        Array.from(select.options).forEach(option => {
            option.selected = this.selectedItems.includes(option.value);
        });

        // Dispatch change event for form detection
        select.dispatchEvent(new Event('change', { bubbles: true }));
    },

    isSelected(value) {
        return this.selectedItems.includes(value);
    }
}" @click.away="open = false" x-init="updateHiddenInputs()">

    <label class="block text-sm font-bold text-gray-800 mb-2 transition-colors duration-200">
        {{ $label }}
        @if ($required)
            <span class="text-red-500">*</span>
        @endif
    </label>

    <!-- Hidden select for form submission -->
    <select x-ref="hiddenSelect" name="{{ $name }}[]" multiple class="hidden" {{ $required ? 'required' : '' }}>
        @if ($allowAll)
            <option value="" {{ empty($selected) || in_array('', (array) $selected) ? 'selected' : '' }}>
                All {{ $placeholder }}
            </option>
        @endif
        @foreach ($options as $value => $text)
            <option value="{{ $value }}" {{ in_array($value, (array) $selected) ? 'selected' : '' }}>
                {{ $text }}
            </option>
        @endforeach
    </select>

    <div class="relative">
        <!-- Main input container -->
        <div @click="open = !open"
            class="w-full px-4 py-2 border-2 border-gray-200 rounded-xl transition-all duration-200 bg-white min-h-[48px] flex flex-wrap gap-2 items-center cursor-pointer focus-within:border-emerald-500"
            :class="{
                'border-emerald-500 shadow-[0_0_0_4px_rgba(16,185,129,0.1)]': open,
                'focus-within:shadow-[0_0_0_4px_rgba(16,185,129,0.1)]': !open
            }"
            style="--tw-ring-shadow: none !important; --tw-ring-color: transparent !important;">

            <!-- Selected tags -->
            <template x-for="(item, index) in selectedItems" :key="index">
                <span
                    class="inline-flex items-center px-3 py-1 rounded-lg text-sm font-medium bg-emerald-100 text-emerald-700 border border-emerald-200 hover:bg-emerald-200 transition-colors duration-200 animate-in slide-in-from-left-2">
                    <span x-text="options[item] || item"></span>
                    <button @click.stop="removeTag(item)" type="button"
                        class="ml-2 text-emerald-500 hover:text-emerald-700 transition-colors duration-200 font-bold text-lg leading-none">
                        ×
                    </button>
                </span>
            </template>

            <!-- Search input -->
            <input type="text" x-model="search" @click.stop @focus="open = true"
                :placeholder="selectedItems.length === 0 ? '{{ $placeholder }}' : 'ابحث أو اختر المزيد...'"
                class="flex-1 min-w-[120px] outline-none border-none bg-transparent text-gray-700 placeholder-gray-400 text-right focus:ring-0 focus:outline-none"
                style="--tw-ring-shadow: none !important; --tw-ring-color: transparent !important; box-shadow: none !important;">

            <!-- Clear All Button -->
            <button type="button" x-show="selectedItems.length > 0" @click.stop="clearAll()"
                class="text-gray-400 hover:text-red-500 transition-colors duration-200 ml-2 p-1 hover:bg-red-50 rounded"
                title="مسح جميع الاختيارات">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                    </path>
                </svg>
            </button>

            <!-- Dropdown arrow -->
            <svg class="w-5 h-5 text-gray-400 transition-transform duration-200 flex-shrink-0"
                :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
        </div>

        <!-- Dropdown -->
        <div x-show="open" x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 translate-y-1"
            class="absolute z-[9999] mt-1 w-full max-h-60 overflow-auto bg-white border border-gray-200 rounded-xl shadow-lg"
            style="direction: rtl;">

            <!-- All option -->
            @if ($allowAll)
                <div @click="toggleOption('')"
                    class="px-4 py-3 cursor-pointer transition-all duration-200 border-b border-gray-100 hover:bg-emerald-50 hover:text-emerald-700 text-right"
                    :class="{ 'bg-emerald-100 text-emerald-700': hasAllSelected }">
                    <div class="flex items-center justify-between">
                        <span>جميع {{ $placeholder }}</span>
                        <div class="w-4 h-4 border-2 border-emerald-500 rounded-sm flex items-center justify-center transition-colors duration-200"
                            :class="{ 'bg-emerald-500': hasAllSelected }">
                            <svg x-show="hasAllSelected" class="w-3 h-3 text-white" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Regular options -->
            <template x-for="[value, text] in Object.entries(filteredOptions)" :key="value">
                <div @click="toggleOption(value)"
                    class="px-4 py-3 cursor-pointer transition-all duration-200 border-b border-gray-100 last:border-b-0 hover:bg-emerald-50 hover:text-emerald-700 text-right"
                    :class="{ 'bg-emerald-100 text-emerald-700': isSelected(value) }">
                    <div class="flex items-center justify-between">
                        <span x-text="text"></span>
                        <div class="w-4 h-4 border-2 border-emerald-500 rounded-sm flex items-center justify-center transition-colors duration-200"
                            :class="{ 'bg-emerald-500': isSelected(value) }">
                            <svg x-show="isSelected(value)" class="w-3 h-3 text-white" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </template>

            <!-- No results message -->
            <div x-show="Object.keys(filteredOptions).length === 0" class="px-4 py-3 text-gray-500 text-center">
                Nothing Found
            </div>

            <!-- Clear All Option in Dropdown -->
            <div x-show="selectedItems.length > 0" class="border-t border-gray-100">
                <button type="button" @click="clearAll(); open = false"
                    class="w-full px-4 py-3 text-left text-red-500 hover:text-red-700 hover:bg-red-50 transition-all duration-200 flex items-center justify-center space-x-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                        </path>
                    </svg>
                    <span>Clear All Selections</span>
                </button>
            </div>
        </div>
    </div>
</div>