@props([
    'name',
    'id' => null,
    'selected' => '',
    'options' => [],
    'required' => false,
    'disabled' => false,
    'compact' => false,
])

@php
    $id = $id ?? $name;
    $normalized = [];
    foreach ($options as $row) {
        if (! is_array($row)) {
            continue;
        }
        $normalized[] = [
            'value' => (string) ($row['value'] ?? ''),
            'label' => (string) ($row['label'] ?? ''),
            'disabled' => (bool) ($row['disabled'] ?? false),
        ];
    }
    $selectedStr = (string) $selected;
    $isCompact = (bool) $compact;
@endphp

<div
    {{ $attributes->merge([
        'class' => $isCompact
            ? 'relative w-max max-w-full overflow-visible'
            : 'relative min-w-0 overflow-visible',
    ]) }}
    x-data="{
        open: false,
        selected: @js($selectedStr),
        options: @js($normalized),
        disabled: @js((bool) $disabled),
        init() {
            this.$refs.hidden.addEventListener('styled-select:set', (event) => {
                this.setValue(event.detail ?? '');
            });
            this.$refs.hidden.addEventListener('styled-select:set-options', (event) => {
                this.setOptions(event.detail ?? []);
            });
            this.$refs.hidden.addEventListener('styled-select:set-disabled', (event) => {
                this.setDisabled(event.detail ?? false);
            });
        },
        normalizeOptions(rows) {
            if (!Array.isArray(rows)) {
                return [];
            }

            return rows.map((row) => ({
                value: String(row?.value ?? ''),
                label: String(row?.label ?? ''),
                disabled: Boolean(row?.disabled ?? false),
            }));
        },
        setOptions(rows) {
            this.close();
            this.options = this.normalizeOptions(rows);
            const stillValid = this.options.some((o) => String(o.value) === String(this.selected));
            if (!stillValid) {
                this.selected = '';
                this.$nextTick(() => this.emitChange());
            }
        },
        setDisabled(value) {
            this.disabled = Boolean(value);
            this.close();
            this.$refs.hidden.disabled = this.disabled;
        },
        toggle() {
            if (this.disabled) return;
            this.open = !this.open;
        },
        close() {
            this.open = false;
        },
        emitChange() {
            this.$refs.hidden.dispatchEvent(new CustomEvent('change', {
                bubbles: true,
                detail: { value: String(this.selected) },
            }));
        },
        choose(opt) {
            if (opt.disabled) return;
            this.selected = String(opt.value);
            this.open = false;
            this.$nextTick(() => this.emitChange());
        },
        setValue(value) {
            const next = String(value ?? '');
            const opt = this.options.find((o) => String(o.value) === next);
            if (opt) {
                this.choose(opt);

                return;
            }
            this.selected = next;
            this.close();
            this.$nextTick(() => this.emitChange());
        },
        currentLabel() {
            const v = String(this.selected);
            const hit = this.options.find((o) => String(o.value) === v);
            return hit ? hit.label : '\u2014';
        },
        isSelected(opt) {
            return String(this.selected) === String(opt.value);
        },
    }"
    @keydown.escape.window="close()"
    @click.outside="close()"
>
    <input
        type="hidden"
        name="{{ $name }}"
        id="{{ $id }}_input"
        x-ref="hidden"
        x-model="selected"
        @if ($required) required @endif
        @if ($disabled) disabled @endif
    />

    <button
        type="button"
        id="{{ $id }}"
        @class([
            'flex items-center justify-between border border-gray-300 text-start shadow-sm',
            'w-full' => ! $isCompact,
            'h-full min-h-0 w-max max-w-full shrink-0 gap-1.5 rounded-md px-2.5 text-[11px] font-medium leading-none focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-300' => $isCompact,
            'gap-2 rounded-lg px-3 py-2 text-sm focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500' => ! $isCompact,
        ])
        :class="disabled
            ? 'cursor-not-allowed bg-gray-100 text-gray-600'
            : 'bg-white text-gray-900'"
        @click.stop="toggle()"
        :aria-expanded="open ? 'true' : 'false'"
        aria-haspopup="listbox"
        :disabled="disabled"
    >
        <span
            @class([
                'min-w-0 flex-1 truncate' => ! $isCompact,
                'shrink-0 whitespace-nowrap' => $isCompact,
            ])
            x-text="currentLabel()"
        ></span>
        <svg
            @class(['shrink-0 text-gray-500', 'h-3 w-3' => $isCompact, 'h-4 w-4' => ! $isCompact])
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
    </button>

    <div
        x-show="open"
        x-cloak
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        @class([
            'absolute left-0 z-[100] mt-1',
            'min-w-full max-w-[calc(100vw-2rem)]' => $isCompact,
            'w-full' => ! $isCompact,
        ])
        style="display: none;"
    >
        <div
            @class([
                'rounded-lg border border-gray-200 bg-white shadow-lg ring-1 ring-black/5',
                'max-h-60 inline-flex min-w-full w-max max-w-full flex-col items-start gap-0 overflow-y-auto overflow-x-hidden py-0.5' => $isCompact,
                'max-h-60 w-full overflow-auto py-1' => ! $isCompact,
            ])
            role="listbox"
            :id="'{{ $id }}_listbox'"
        >
            <template x-for="(opt, idx) in options" :key="String(opt.value) + '-' + idx">
                <button
                    type="button"
                    role="option"
                    @class([
                        'text-start',
                        'inline-block max-w-full whitespace-nowrap px-2 py-1 text-[11px] leading-snug' => $isCompact,
                        'flex w-full px-3 py-2 text-sm' => ! $isCompact,
                    ])
                    :class="opt.disabled
                        ? 'cursor-not-allowed text-gray-400'
                        : (isSelected(opt)
                            ? 'cursor-pointer bg-gray-100 font-medium text-gray-900 hover:bg-[var(--dealer-accent-color)] hover:text-[var(--dealer-accent-text-color)]'
                            : 'cursor-pointer text-gray-900 hover:bg-[var(--dealer-accent-color)] hover:text-[var(--dealer-accent-text-color)]')"
                    :aria-selected="isSelected(opt) ? 'true' : 'false'"
                    :disabled="opt.disabled"
                    @click.stop="choose(opt)"
                    x-text="opt.label"
                ></button>
            </template>
        </div>
    </div>
</div>