@props([
    'name' => '',
    'label' => '',
    'options' => [],
    'selected' => [],
    'placeholder' => 'Select options...',
    'required' => false,
    'allowAll' => false,
    'maxSelection' => 10,
    'addNewUrl' => '',
    'addNewText' => 'Add new item',
    'addNewPrompt' => 'Enter a new item name',
    'loadDataUrl' => '',
    'excludeSelections' => [], // New prop for mutual exclusivity
])

<div class="group" x-data="{
    open: false,
    adding: false,
    search: '',
    error: '',
    newItemName: '',
    options: {{ json_encode($options ?? []) }},
    selectedItems: {{ json_encode($selected ?? []) }},
    hasAllSelected: false,
    searchTimeout: null,
    excludedItems: [],
    csrf: '{{ csrf_token() }}',

    init() {
        this.$watch('selectedItems', (value) => {
            this.updateHiddenSelect();
            this.hasAllSelected = this.isAllSelected();
            this.$dispatch('selected', { name: '{{ $name }}', selections: value });
            // Sync with window.formDataRef if present and if this is a digital tools or gaps select
            if (window.formDataRef) {
                if ('{{ $name }}' === 'deployed_tools') {
                    window.formDataRef.deployed_tools = [...value];
                    window.formDataRef.deployed_tools_names = value.map(v => this.options[v] || v);
                } else if ('{{ $name }}' === 'identified_gaps') {
                    window.formDataRef.identified_gaps = [...value];
                    window.formDataRef.identified_gaps_names = value.map(v => this.options[v] || v);
                } else if ('{{ $name }}' === 'objectives') {
                    window.formDataRef.objectives = [...value];
                }
            }
        });

        this.$watch('search', () => {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.filterOptions();
            }, 300);
        });

        // Watch for changes to the excludeSelections property
        this.$watch('excludedItems', (value) => {});

        // Listen for selections from other components
        document.addEventListener('selected', (event) => {
            if (event.detail && event.detail.name !== '{{ $name }}') {
                this.excludedItems = Array.isArray(event.detail.selections) ? event.detail.selections : [];
            }
        });

        // Listen for update events to restore selections
        window.addEventListener('update-select-selections', (event) => {
            if (event.detail && event.detail.name === '{{ $name }}') {
                this.selectedItems = Array.isArray(event.detail.selections) ? [...event.detail.selections] : [];
            }
        });

        if ('{{ $loadDataUrl }}') {
            this.fetchOptions();

            // Listen for global update event to refresh options
            window.addEventListener('digital-items-updated', () => {
                this.fetchOptions();
            });
        }

        // Don't sync with hidden select on init - it will override our selected items
        // The updateHiddenSelect() in the $watch above will handle keeping it in sync
    },

    async fetchOptions() {
        try {
            // Set up headers for session-based authentication
            const headers = {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': this.csrf
            };

            const response = await fetch('{{ $loadDataUrl }}', {
                credentials: 'include',
                headers: headers
            });
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            const data = await response.json();
            // Store previous selected item names for possible re-mapping
            const prevSelectedNames = (this.selectedItems || []).map(v => this.options && this.options[v] ? this.options[v].toLowerCase() : null).filter(Boolean);
            // Store current selectedItems to preserve them
            const currentSelectedItems = [...(this.selectedItems || [])];
            this.options = data;
            // Try to re-map selectedItems by name if value changed (e.g. after add)
            let newSelected = [];
            Object.entries(this.options).forEach(([val, text]) => {
                if (currentSelectedItems.includes(val)) {
                    newSelected.push(val);
                } else if (prevSelectedNames.includes((text || '').toLowerCase())) {
                    newSelected.push(val);
                }
            });
            // Only update selectedItems if we actually found matches, otherwise preserve current selection
            if (newSelected.length > 0 || currentSelectedItems.length === 0) {
                this.selectedItems = newSelected;
            }
            this.hasAllSelected = this.isAllSelected();
        } catch (error) {
             this.error = `{{{trans('siri.failed_load_options') }}}`;
            console.error('Error fetching options:', error);
        }
    },

    filterOptions() {
        // Filtering handled in template
    },

    toggleOption(value) {
        if (this.isSelected(value)) {
            this.removeTag(value);
        } else {
            if (value === '') {
                this.selectedItems = [''];
                this.hasAllSelected = true;
            } else {
                if (this.hasAllSelected) {
                    this.selectedItems = [];
                    this.hasAllSelected = false;
                }
                if (this.selectedItems.length >= {{ $maxSelection }}) {
                    this.error = `{{{trans('siri.max_selections', ['0' => $maxSelection]) }}}`;
                    return;
                }
                this.selectedItems.push(value);
            }
        }
        this.search = '';
    },

    isSelected(value) {
        return this.selectedItems.includes(value);
    },

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

    removeTag(value) {
        this.selectedItems = this.selectedItems.filter(item => item !== value);
        if (value === '') {
            this.hasAllSelected = false;
        }
        this.error = '';
    },

    clearAll() {
        this.selectedItems = [];
        this.hasAllSelected = false;
        this.search = '';
        this.error = '';
    },

    updateHiddenSelect() {
        if (!this.$refs.hiddenSelect) return;

        while (this.$refs.hiddenSelect.options.length > 0) {
            this.$refs.hiddenSelect.options.remove(0);
        }

        this.selectedItems.forEach(value => {
            const option = document.createElement('option');
            option.value = value;
            option.textContent = this.options[value] || value;
            option.selected = true;
            this.$refs.hiddenSelect.appendChild(option);
        });
    },

    syncWithHiddenSelect() {
        if (!this.$refs.hiddenSelect) return;

        const selectedOptions = [];
        Array.from(this.$refs.hiddenSelect.options).forEach(option => {
            if (option.selected) {
                selectedOptions.push(option.value);
            }
        });

        this.selectedItems = selectedOptions;
        this.hasAllSelected = this.isAllSelected();
    },

    showAddNew() {
        this.adding = true;
        this.error = '';
        this.newItemName = '';
        this.$nextTick(() => {
            this.$refs.newItemInput?.focus();
        });
    },

    hideAddNew() {
        this.adding = false;
        this.error = '';
        this.newItemName = '';
    },

    async addNewItem() {
        if (!this.newItemName.trim()) {
             this.error = `{{{trans('siri.please_enter_valid_name') }}}`;
            return;
        }

        const existingValue = Object.entries(this.options).find(([_, text]) =>
            text.toLowerCase() === this.newItemName.trim().toLowerCase()
        );

        if (existingValue) {
            this.toggleOption(existingValue[0]);
            this.hideAddNew();
            return;
        }

        // Dispatch the add-new event for parent component to handle API call
        this.$dispatch('add-new', this.newItemName.trim());

        try {
            if ('{{ $addNewUrl }}') {
                // Set up headers for CSRF protection
                const headers = {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': this.csrf
                };

                const response = await fetch('{{ $addNewUrl }}', {
                    method: 'POST',
                    credentials: 'include',
                    headers: headers,
                    body: JSON.stringify({ name: this.newItemName.trim() })
                });
                if (!response.ok) {
                    throw new Error('Failed to add new item');
                }
                const newItem = await response.json();
                this.options[newItem.value] = newItem.text;
                this.toggleOption(newItem.value);
                // Broadcast global event so all selects update
                window.dispatchEvent(new CustomEvent('digital-items-updated'));
                } else {
                // If no API URL, handle it locally: store the visible text as the option value
                // so newly-added items keep their real label when saved and restored via old().
                const raw = this.newItemName.trim();
                // Use the raw text as the key so the server receives the readable value.
                // If the exact text already exists as a key, append a timestamp to keep uniqueness.
                let key = raw;
                if (this.options.hasOwnProperty(key)) {
                    key = `${key}_${Date.now().toString()}`;
                }
                this.options[key] = raw;
                this.toggleOption(key);
            }
            this.hideAddNew();
        } catch (error) {
                this.error = `{{{ trans('siri.failed_add_item') }}}`;
            console.error('Error adding new item:', error);
        }
    }
}" @click.outside="open = false; adding = false;"
    @keydown.escape.window="open = false; adding = false;" role="combobox" aria-expanded="open"
    :aria-label="'{{ $label }}'">

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

    <select x-ref="hiddenSelect" id="{{ $name }}_select" name="{{ $name }}[]" multiple class="hidden"
        {{ $required ? 'required' : '' }} aria-hidden="true">
        @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">
        <div @click="open = !open; if(!open) adding = false;"
            class="w-full px-4 py-2 border-2 border-gray-200 dark:border-gray-700 rounded-xl transition-all duration-200 bg-white dark:bg-gray-900 min-h-[48px] flex flex-wrap gap-2 items-center cursor-pointer focus-within:border-blue-500 dark:focus-within:border-blue-400"
            :class="{ 'border-blue-500 dark:border-blue-400 shadow-[0_0_0_4px_rgba(16,185,129,0.1)] dark:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]': open }"
            tabindex="0" @keydown.enter.prevent="open = !open" @keydown.space.prevent="open = !open" role="button"
            aria-controls="{{ $name }}_dropdown" :aria-expanded="open">
            <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-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-200 border border-blue-200 dark:border-blue-700 hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors duration-200 animate-in slide-in-from-left-2"
                    role="option" :aria-selected="true">
                    <span x-text="options[item] || item"></span>
                    <button @click.stop="removeTag(item)" type="button"
                        class="ml-2 text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-200 transition-colors duration-200 font-bold text-lg leading-none focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
                        :aria-label="'Remove ' + (options[item] || item)">
                        <span aria-hidden="true">×</span>
                    </button>
                </span>
            </template>

            <input type="text" x-model.debounce="search" id="{{ $name }}_input" @click.stop
                @focus="open = true"
                :placeholder="selectedItems.length === 0 ? '{{ $placeholder }}' :
                    '{{ json_encode(trans('siri.search_or_add_more')) }}'"
                class="flex-1 min-w-[120px] outline-none border-none bg-transparent text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-0 focus:outline-none"
                autocomplete="off" role="textbox" aria-autocomplete="list"
                :aria-controls="{{ $name }}_dropdown">

            <button type="button" x-show="selectedItems.length > 0" @click.stop="clearAll()"
                class="text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 ml-2 p-1 hover:bg-red-50 dark:hover:bg-red-900 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
                aria-label="{{ json_encode(trans('siri.clear_all_selections')) }}">
                <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>

            <svg class="w-5 h-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 flex-shrink-0"
                :class="{ 'rotate-180': open }" 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"></path>
            </svg>
        </div>

        <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" id="{{ $name }}_dropdown"
            class="absolute z-[9999] mt-1 w-full max-h-60 overflow-auto bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg"
            role="listbox">

            @if ($allowAll)
                <div @click="toggleOption('')" @keydown.enter.prevent="toggleOption('')"
                    @keydown.space.prevent="toggleOption('')"
                    class="px-4 py-3 cursor-pointer transition-all duration-200 border-b border-gray-100 hover:bg-blue-50 hover:text-blue-700"
                    :class="{ 'bg-blue-100 text-blue-700': hasAllSelected }" role="option"
                    :aria-selected="hasAllSelected" tabindex="0">
                    <div class="flex items-center justify-between">
                        <span>All {{ $placeholder }}</span>
                        <div class="w-4 h-4 border-2 border-blue-500 rounded-sm flex items-center justify-center transition-colors duration-200"
                            :class="{ 'bg-blue-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

            <div x-show="adding" class="p-4 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
                <div class="mb-2">
                    <label for="{{ $name }}_new_item"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">{{ $addNewPrompt }}</label>
                    <input type="text" x-ref="newItemInput" x-model="newItemName" id="{{ $name }}_new_item"
                        @keydown.enter.prevent="addNewItem" @keydown.escape.prevent="hideAddNew"
                        class="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-2 text-sm focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 placeholder-gray-400 dark:placeholder-gray-500"
                        aria-describedby="{{ $name }}_error">
                </div>
                <div x-show="error" x-text="error" id="{{ $name }}_error" class="text-red-500 text-sm mb-2"
                    role="alert"></div>
                <div class="flex justify-end space-x-2">
                    <button @click="hideAddNew" type="button"
                        class="px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
                        aria-label="{{ trans('siri.cancel') }}">
                        {!! trans('siri.cancel') !!}
                    </button>
                    <button @click="addNewItem" type="button"
                        class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
                        aria-label="{{ json_encode(trans('siri.add')) }}">
                        {!! trans('siri.add') !!}
                    </button>
                </div>
            </div>

            <template
                x-for="[value, text] in (options ? Object.entries(options).filter(([val, _]) => 
                        // Don't show items that are in the exclusion list
                        !excludedItems.includes(val) && 
                        // Only show items that match the search term (if provided)
                        (!search || _.toLowerCase().includes(search.toLowerCase()))
                    ) : [])"
                :key="value">
                <div @click="toggleOption(value)" @keydown.enter.prevent="toggleOption(value)"
                    @keydown.space.prevent="toggleOption(value)"
                    class="px-4 py-3 cursor-pointer transition-all duration-200 border-b border-gray-100 dark:border-gray-800 last:border-b-0 hover:bg-blue-50 dark:hover:bg-blue-900 hover:text-blue-700 dark:hover:text-blue-200 text-gray-900 dark:text-gray-100"
                    :class="{ 'bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-200': isSelected(value) }"
                    role="option" :aria-selected="isSelected(value)" tabindex="0">
                    <div class="flex items-center justify-between">
                        <span x-text="text"></span>
                        <div class="w-4 h-4 border-2 border-blue-500 dark:border-blue-400 rounded-sm flex items-center justify-center transition-colors duration-200"
                            :class="{ 'bg-blue-500 dark:bg-blue-400': 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>

            <div x-show="search && (options ? Object.entries(options).filter(([val, text]) => 
        text.toLowerCase().includes(search.toLowerCase()) && 
        !excludedItems.includes(val)
    ).length : 0) === 0 && !adding"
                class="px-4 py-3 border-b border-gray-100 dark:border-gray-800">
                <p class="text-gray-500 dark:text-gray-400 text-center mb-2">{!! trans('siri.no_matching_items') !!}</p>
            </div>

            <div x-show="(options ? Object.keys(options).length : 0) === 0 && !adding && !search"
                class="px-4 py-3 border-b border-gray-100 dark:border-gray-800">
                <p class="text-gray-500 dark:text-gray-400 text-center mb-2">{!! trans('siri.no_results_found') !!}</p>
            </div>

            <div x-show="search && !adding" class="border-t border-gray-100 dark:border-gray-800">
                <button @click.stop="showAddNew" type="button"
                    class="w-full px-4 py-3 text-blue-600 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-all duration-200 flex items-center justify-center space-x-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
                    aria-label="{{ $addNewText }}">
                    <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="M12 4v16m8-8H4">
                        </path>
                    </svg>
                    <span>{{ $addNewText }}</span>
                </button>
            </div>

            <div x-show="selectedItems.length > 0" class="border-t border-gray-100 dark:border-gray-800">
                <button type="button" @click="clearAll(); open = false"
                    class="w-full px-4 py-3 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900 transition-all duration-200 flex items-center justify-center space-x-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
                    aria-label="{{ json_encode(trans('siri.clear_all_selections')) }}">
                    <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>{{ trans('siri.clear_all_selections') }}</span>
                </button>
            </div>
        </div>

        <div x-show="false"
            class="absolute z-[9999] mt-1 w-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-4"
            role="alert">
            <div class="flex justify-center items-center space-x-2">
                <svg class="animate-spin h-5 w-5 text-blue-500 dark:text-blue-300" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                    </path>
                </svg>
                <span class="text-gray-500 dark:text-gray-400">{{ json_encode(trans('siri.loading_items')) }}</span>
            </div>
        </div>
    </div>
</div>