@props([
    'options' => [],
    'optionCol' => 'name',
    'multiple' => false,
    'placeholder' => 'Select an option',
    'id' => null,
])

@php
    $selectId = $id ?? 'select2_' . uniqid();
    $isMultiple = $multiple ? 'multiple' : '';
    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $wireModelName = $wireModel
        ? str_replace(['wire:model=', 'wire:model.defer=', 'wire:model.lazy=', '"', "'"], '', $wireModel)
        : '';
@endphp

<div wire:ignore>
    <select id="{{ $selectId }}" name="{{ $attributes->get('name', $selectId) }}" {{ $isMultiple }}
        {{ $attributes->merge(['class' => 'form-control select2 w-full']) }}>
        @if (!$multiple)
            <option value="">{{ $placeholder }}</option>
        @endif

        @foreach ($options as $option)
            <option value="{{ $option->id }}">{{ $option->$optionCol }}</option>
        @endforeach
    </select>
</div>

@once
    @push('css')
        <link href="https://unpkg.com/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <style>
            .select2-container--default .select2-selection--multiple {
                min-height: 38px;
                border: 1px solid #ced4da;
                border-radius: 0.375rem;
            }

            .select2-container--default .select2-selection--multiple .select2-selection__choice {
                background-color: #007bff;
                border: 1px solid #007bff;
                border-radius: 4px;
                color: white;
                padding: 0 0.5rem;
                margin: 2px;
            }

            .select2-container .select2-selection--single {
                height: 38px;
                border: 1px solid #ced4da;
                border-radius: 0.375rem;
            }

            .select2-container--default .select2-selection--single .select2-selection__rendered {
                line-height: 36px;
                padding-left: 12px;
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 36px;
                right: 10px;
            }

            .select2-container {
                width: 100% !important;
            }

            .select2-dropdown {
                border: 1px solid #ced4da;
                border-radius: 0.375rem;
            }
        </style>
    @endpush

    @push('js')
        <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    @endpush
@endonce

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            initSelect2_{{ $selectId }}();
        });

        // Also initialize on Livewire load
        document.addEventListener('livewire:load', function() {
            initSelect2_{{ $selectId }}();
        });

        // Reinitialize after Livewire updates
        window.addEventListener('livewire:update', function() {
            setTimeout(() => {
                initSelect2_{{ $selectId }}();
            }, 100);
        });

        function initSelect2_{{ $selectId }}() {
            // Wait for jQuery and Select2 to be available
            if (typeof $ === 'undefined' || typeof $.fn.select2 === 'undefined') {
                console.log('Waiting for jQuery and Select2 to load...');
                setTimeout(() => {
                    initSelect2_{{ $selectId }}();
                }, 100);
                return;
            }

            const selectElement = $('#{{ $selectId }}');

            if (!selectElement.length) {
                console.error('Select element not found: {{ $selectId }}');
                return;
            }

            // Destroy existing instance if it exists
            if (selectElement.data('select2')) {
                selectElement.select2('destroy');
            }

            // Initialize Select2
            selectElement.select2({
                placeholder: '{{ $placeholder }}',
                allowClear: {{ $multiple ? 'false' : 'true' }},
                width: '100%',
                dir: 'rtl', // For Arabic text
                language: {
                    noResults: function() {
                        return "لم يتم العثور على نتائج";
                    },
                    searching: function() {
                        return "جاري البحث...";
                    }
                }
            });

            @if ($wireModel && $wireModelName)
                // Set initial value from Livewire
                const initialValue = @json($this->$wireModelName ?? ($multiple ? [] : null));
                if (initialValue !== null) {
                    selectElement.val(initialValue).trigger('change.select2');
                }

                // Handle Select2 change event
                selectElement.on('change', function(e) {
                    let value = $(this).val();

                    @if ($multiple)
                        // For multiple select, ensure we have an array
                        if (!Array.isArray(value)) {
                            value = value ? [value] : [];
                        }
                        // Convert string values to integers if they are numeric
                        value = value.map(v => {
                            const intVal = parseInt(v);
                            return !isNaN(intVal) ? intVal : v;
                        });
                    @else
                        // For single select, convert to integer if numeric
                        if (value) {
                            const intVal = parseInt(value);
                            value = !isNaN(intVal) ? intVal : value;
                        } else {
                            value = null;
                        }
                    @endif

                    // Update Livewire property
                    @this.set('{{ $wireModelName }}', value);
                });

                // Listen for Livewire property changes
                Livewire.hook('message.processed', (message, component) => {
                    if (component === Livewire.find('{{ $this->getId() }}')) {
                        const currentValue = @js($this->$wireModelName ?? ($multiple ? [] : null));
                        const selectValue = selectElement.val();

                        // Only update if values are different
                        if (JSON.stringify(currentValue) !== JSON.stringify(selectValue)) {
                            selectElement.val(currentValue).trigger('change.select2');
                        }
                    }
                });
            @endif

            // Focus search field when opened
            selectElement.on('select2:open', function() {
                setTimeout(() => {
                    const searchField = document.querySelector(
                        '.select2-container--open .select2-search__field');
                    if (searchField) searchField.focus();
                }, 100);
            });

            console.log('Select2 initialized for {{ $selectId }}');
        }

        // Handle dynamic reinitialization
        window.reinitSelect2_{{ $selectId }} = function() {
            initSelect2_{{ $selectId }}();
        };

        // window.reinitSelect2_employeeSelect2();
    </script>
@endpush