@props([
    'name',
    'id' => null,
    'value' => '',
    'placeholder' => '— Select —',
    'options' => [],
    'required' => false,
    'submitOnChange' => false,
    'nullable' => true,
])

@php
    $id = $id ?: $name;
    $normalized = collect($options)->map(function ($option, $key) {
        if (is_array($option)) {
            return [
                'value' => (string) ($option['value'] ?? ''),
                'label' => (string) ($option['label'] ?? $option['value'] ?? ''),
            ];
        }

        return [
            'value' => (string) $key,
            'label' => (string) $option,
        ];
    })->values()->all();
@endphp

<div
    {{ $attributes->class('relative') }}
    x-data="themeSelect({
        value: @js((string) $value),
        options: @js($normalized),
        placeholder: @js($placeholder),
        submitOnChange: @js((bool) $submitOnChange),
        nullable: @js((bool) $nullable),
    })"
    @keydown.escape.window="open = false"
    @click.outside="open = false"
>
    <input type="hidden" name="{{ $name }}" id="{{ $id }}" :value="value" @if($required) required @endif>
    <div
        role="button"
        tabindex="0"
        class="theme-select-trigger flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-left text-base text-gray-900 shadow-sm focus:border-[#C5181E] focus:outline-none focus:ring-1 focus:ring-[#C5181E] sm:text-sm"
        :class="open && 'border-[#C5181E] ring-1 ring-[#C5181E]'"
        @click="open = !open"
        @keydown.enter.prevent="open = !open"
        @keydown.space.prevent="open = !open"
        aria-haspopup="listbox"
        :aria-expanded="open.toString()"
    >
        <span class="min-w-0 flex-1 truncate leading-6" :class="!value && 'text-gray-400'" x-text="selectedLabel()"></span>
        <svg class="h-4 w-4 shrink-0 text-gray-400 transition" :class="open && 'rotate-180'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
    </div>

    <div
        x-cloak
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        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-75"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-1"
        class="absolute z-40 mt-1.5 max-h-64 w-full overflow-auto rounded-xl border border-slate-200 bg-white py-1 shadow-lg shadow-slate-200/70"
        role="listbox"
    >
        <template x-if="nullable">
            <button
                type="button"
                class="flex w-full items-center px-3.5 py-2.5 text-left text-sm transition"
                :class="value === '' ? 'bg-[#C5181E] text-white' : 'text-slate-500 hover:bg-[#C5181E]/10 hover:text-[#C5181E]'"
                @click="choose('')"
                role="option"
            >
                <span x-text="placeholder"></span>
            </button>
        </template>
        <template x-for="option in options" :key="String(option.value)">
            <button
                type="button"
                class="flex w-full items-center px-3.5 py-2.5 text-left text-sm transition"
                :class="String(value) === String(option.value) ? 'bg-[#C5181E] text-white' : 'text-slate-800 hover:bg-[#C5181E]/10 hover:text-[#C5181E]'"
                @click="choose(option.value)"
                role="option"
            >
                <span x-text="option.label"></span>
            </button>
        </template>
    </div>
</div>