@props([
    'name',
    'id' => null,
    'label' => null,
    'options' => [],
    'selected' => null,
    'placeholder' => 'Select option',
    'searchPlaceholder' => 'Search...',
    'required' => false,
    'error' => null,
    'emitEvent' => null,
    'resetOn' => null,
    'icon' => null,
    'enhanced' => false,
    'showCode' => false,
])

@php
    $fieldId = $id ?? $name;
    $errorKey = $error ?? $name;
    $resolvedIcon = $icon ?? match ($name) {
        'country_id', 'country' => 'country',
        'role', 'role_id' => 'role',
        'status' => 'status',
        'office_id' => 'office',
        'folder_id', 'parent_id' => 'folder',
        'document_type' => 'document',
        default => 'select',
    };
    $displayCode = $showCode || $resolvedIcon === 'country';
    $normalizedOptions = collect($options)->map(function ($option) {
        $label = (string) (data_get($option, 'label') ?? data_get($option, 'name') ?? '');
        $code = strtoupper((string) (data_get($option, 'code') ?? data_get($option, 'iso2') ?? ''));

        if (data_get($option, 'status') === false || data_get($option, 'status') === 0) {
            $label .= ' (Inactive)';
        }

        return [
            'value' => (string) (data_get($option, 'value') ?? data_get($option, 'id') ?? ''),
            'label' => $label,
            'code' => $code,
            'disabled' => (bool) data_get($option, 'disabled', data_get($option, 'status') === false || data_get($option, 'status') === 0),
        ];
    })->filter(fn ($option) => !($option['value'] === '' && $option['label'] === ''))->values();
@endphp

<div
    x-data="{
        open: false,
        query: '',
        activeIndex: -1,
        selected: @js((string) $selected),
        options: @js($normalizedOptions),
        placeholder: @js($placeholder),
        get selectedLabel() {
            const match = this.options.find(option => String(option.value) === String(this.selected));
            return match ? match.label : '';
        },
        get selectedCode() {
            const match = this.options.find(option => String(option.value) === String(this.selected));
            return match ? match.code : '';
        },
        get filteredOptions() {
            const search = this.query.trim().toLowerCase();
            if (!search) return this.options;

            return this.options.filter(option =>
                option.label.toLowerCase().includes(search) || option.code.toLowerCase().includes(search)
            );
        },
        openList() {
            this.open = true;
            this.syncActiveIndex();
            this.$nextTick(() => this.$refs.search?.focus());
        },
        closeList(focusTrigger = true) {
            this.open = false;
            this.query = '';
            this.syncActiveIndex();
            if (focusTrigger) {
                this.$nextTick(() => this.$refs.trigger?.focus());
            }
        },
        clearSelection() {
            this.selected = '';
            this.query = '';
            this.open = false;
            @if($emitEvent)
            $dispatch('{{ $emitEvent }}', '');
            @endif
        },
        syncActiveIndex() {
            const selectedIndex = this.filteredOptions.findIndex(option => String(option.value) === String(this.selected));
            this.activeIndex = selectedIndex >= 0 ? selectedIndex : (this.filteredOptions.length ? 0 : -1);
        },
        moveActive(step) {
            if (!this.open) {
                this.openList();
                return;
            }

            if (!this.filteredOptions.length) {
                this.activeIndex = -1;
                return;
            }

            const nextIndex = this.activeIndex < 0
                ? 0
                : (this.activeIndex + step + this.filteredOptions.length) % this.filteredOptions.length;

            this.activeIndex = nextIndex;
            this.$nextTick(() => {
                const option = this.$refs.optionNodes?.[nextIndex];
                option?.scrollIntoView({ block: 'nearest' });
            });
        },
        selectActive() {
            if (this.activeIndex < 0 || !this.filteredOptions[this.activeIndex]) return;
            this.choose(this.filteredOptions[this.activeIndex]);
        },
        choose(option) {
            if (option.disabled) return;
            this.selected = String(option.value);
            this.closeList();
            @if($emitEvent)
            $dispatch('{{ $emitEvent }}', String(option.value));
            @endif
        },
    }"
    @click.outside="closeList(false)"
    @focusin.window="if (open && !$el.contains($event.target)) closeList(false)"
    @if($resetOn)
    x-on:{{ $resetOn }}.window="clearSelection()"
    @endif
    class="group/select relative"
>
    @if($label)
        <label for="{{ $fieldId }}_button" class="form-label">
            {{ $label }} @if($required)<span @class(['text-red-500', 'text-[11px] text-red-500/80' => $enhanced])>*</span>@endif
        </label>
    @endif

    <input type="hidden" name="{{ $name }}" value="{{ $selected }}" x-model="selected" />

    <button
        type="button"
        id="{{ $fieldId }}_button"
        x-ref="trigger"
        @click="open ? closeList(false) : openList()"
        @keydown.escape.prevent="closeList(false)"
        @keydown.arrow-down.prevent="moveActive(1)"
        @keydown.arrow-up.prevent="moveActive(-1)"
        @keydown.enter.prevent="open ? selectActive() : openList()"
        @keydown.space.prevent="open ? selectActive() : openList()"
        @keydown.tab="closeList(false)"
        class="form-input flex items-center gap-3 text-left w-full {{ $enhanced ? 'h-11 focus:border-primary-500 focus:outline-none focus:ring-0' : '' }} {{ $errors->has($errorKey) ? 'form-input-error' : '' }}"
        :class="selectedLabel ? '{{ $enhanced ? 'text-surface-900 font-medium' : 'text-surface-800' }}' : 'text-surface-400'"
        role="combobox"
        aria-haspopup="listbox"
        :aria-expanded="open.toString()"
        aria-controls="{{ $fieldId }}_listbox"
        :aria-activedescendant="activeIndex >= 0 ? '{{ $fieldId }}_option_' + activeIndex : null"
    >
        @if($resolvedIcon)
            <span class="shrink-0 {{ $errors->has($errorKey) ? 'text-red-500' : 'text-surface-400 group-focus-within/select:text-primary-500' }} transition-colors">
                @if($resolvedIcon === 'country')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 21a9 9 0 100-18 9 9 0 000 18zm0 0c2.2-2.5 3.3-5.5 3.3-9S14.2 5.5 12 3m0 18c-2.2-2.5-3.3-5.5-3.3-9S9.8 5.5 12 3M3.5 9h17m-17 6h17"/></svg>
                @elseif($resolvedIcon === 'role')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 3l7 3v5c0 4.6-2.9 8.7-7 10-4.1-1.3-7-5.4-7-10V6l7-3zm-3 9l2 2 4-4"/></svg>
                @elseif($resolvedIcon === 'status')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                @elseif($resolvedIcon === 'office')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2M5 21H3m6-14h1m-1 4h1m4-4h1m-1 4h1M9 21v-5h6v5"/></svg>
                @elseif($resolvedIcon === 'folder')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>
                @elseif($resolvedIcon === 'document')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M7 3h7l5 5v13H7a2 2 0 01-2-2V5a2 2 0 012-2zm7 0v5h5M9 13h6m-6 4h6"/></svg>
                @else
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 6h16M4 12h10M4 18h7"/></svg>
                @endif
            </span>
        @endif
        <span class="truncate flex-1" x-text="selectedLabel || placeholder"></span>
        @if($displayCode)
            <span x-show="selectedCode" x-text="selectedCode"
                  class="shrink-0 rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-surface-500"></span>
        @endif
        <span class="flex items-center gap-1 shrink-0">
            @unless($required)
            <span x-show="selected"
                  @click.stop="clearSelection()"
                  class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-surface-400 text-[10px] hover:bg-surface-300 cursor-pointer"
                  aria-hidden="true">&times;</span>
            @endunless
            <svg class="w-4 h-4 text-surface-400 transition-transform" :class="open ? 'rotate-180' : ''"
                fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </span>
    </button>

    <div
        x-show="open"
        x-transition
        style="display: none;"
        class="absolute z-50 mt-1 w-full overflow-hidden rounded-xl border border-surface-200 bg-white shadow-soft-lg"
    >
        <div class="p-2 border-b border-surface-100">
            <input
                type="search"
                x-ref="search"
                x-model="query"
                @input="syncActiveIndex()"
                @keydown.escape.prevent="closeList()"
                @keydown.arrow-down.prevent="moveActive(1)"
                @keydown.arrow-up.prevent="moveActive(-1)"
                @keydown.enter.prevent="selectActive()"
                @keydown.tab="closeList(false)"
                placeholder="{{ $searchPlaceholder }}"
                class="searchable-select-search form-input py-2 {{ $enhanced ? 'focus:border-primary-500 focus:outline-none focus:ring-0' : '' }}"
            />
        </div>

        <div id="{{ $fieldId }}_listbox" role="listbox" class="max-h-60 overflow-y-auto py-1">
            <template x-for="(option, index) in filteredOptions" :key="option.value">
                <button
                    type="button"
                    @click="choose(option)"
                    :id="'{{ $fieldId }}_option_' + index"
                    x-ref="optionNodes"
                    role="option"
                    :disabled="option.disabled"
                    :aria-selected="String(selected) === String(option.value)"
                    :aria-disabled="option.disabled ? 'true' : 'false'"
                    class="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-primary-50 hover:text-primary-700 transition-colors"
                    :class="[
                        String(selected) === String(option.value) ? 'bg-primary-50 text-primary-700 font-medium' : 'text-surface-700',
                        activeIndex === index ? 'bg-primary-50 text-primary-700' : '',
                        option.disabled ? 'cursor-not-allowed opacity-50 hover:bg-transparent hover:text-surface-700' : ''
                    ]"
                >
                    <span class="truncate" x-text="option.label"></span>
                    <span class="flex shrink-0 items-center gap-2">
                        @if($displayCode)
                            <span x-show="option.code" x-text="option.code"
                                  class="rounded-md bg-surface-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-surface-500"></span>
                        @endif
                        <svg x-show="String(selected) === String(option.value)" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </span>
                </button>
            </template>

            <p x-show="filteredOptions.length === 0" class="px-3 py-3 text-sm text-surface-400">
                No result found
            </p>
        </div>
    </div>

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