@props([
    'options' => [],
    'name' => 'dial_code',
    'selected' => '',
    'placeholder' => 'Select country',
    'disabled' => false,
])

@php
    $chevronSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8fa8' d='M6 8L1 3h10z'/%3E%3C/svg%3E";
@endphp

<div
    x-data="phoneCountrySelectNative({
        initial: @js((string) $selected),
        options: @js(array_values($options)),
        placeholder: @js($placeholder),
    })"
    class="relative"
    @click.outside="open = false"
    @keydown.escape.window="open = false"
>
    <input type="hidden" name="{{ $name }}" x-ref="hidden" :value="selected" />

    <button type="button"
            @click="toggle()"
            @keydown="onTriggerKey($event)"
            x-ref="trigger"
            @disabled($disabled)
            class="flex w-full cursor-pointer items-center justify-between gap-2 rounded-[8px] border border-[#dde0ec] bg-white bg-no-repeat px-3 py-[10px] pr-8 text-[13px] text-ui-ink outline-none transition-colors focus:border-[#e8850a] focus:ring-[3px] focus:ring-[rgba(232,133,10,0.09)] disabled:cursor-not-allowed disabled:bg-slate-50"
            style="background-image:url('{{ $chevronSvg }}'); background-position:right 10px center;">
        <span x-text="displayLabel()" class="truncate"></span>
    </button>

    <div x-show="open"
         x-transition.opacity.duration.100ms
         x-cloak
         class="absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-[10px] border border-[#dde0ec] bg-white shadow-lg">
        <div class="border-b border-[#eef0f6] bg-[#fafbfd] p-2">
            <input type="text"
                   x-ref="search"
                   x-model="search"
                   placeholder="Type country, ISO code, or dial code"
                   @keydown.enter.prevent="selectHighlighted()"
                   @keydown.arrow-down.prevent="moveHighlight(1)"
                   @keydown.arrow-up.prevent="moveHighlight(-1)"
                   class="w-full rounded-[7px] border border-[#dde0ec] bg-white px-2.5 py-1.5 text-[12.5px] text-ui-ink outline-none focus:border-[#e8850a] focus:ring-[2px] focus:ring-[rgba(232,133,10,0.09)]" />
        </div>

        <ul x-ref="list" class="max-h-[260px] overflow-y-auto py-1 text-[13px]">
            <template x-for="(opt, idx) in filtered()" :key="opt.code + ':' + opt.dial">
                <li>
                    <button type="button"
                            @click="choose(opt)"
                            @mouseenter="highlight = idx"
                            :class="{
                                'bg-[rgba(232,133,10,0.10)] text-[#e8850a]': highlight === idx,
                                'text-ui-ink': highlight !== idx,
                            }"
                            class="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left transition-colors hover:bg-[rgba(232,133,10,0.10)] hover:text-[#e8850a]">
                        <span class="flex min-w-0 items-center gap-2">
                            <span x-text="opt.flag" class="text-[15px]"></span>
                            <span x-text="opt.name" class="truncate"></span>
                        </span>
                        <span x-text="opt.dial" class="shrink-0 font-mono text-[12px] text-ui-muted"></span>
                    </button>
                </li>
            </template>
            <li x-show="filtered().length === 0" class="px-3 py-3 text-center text-[12px] text-ui-muted">
                No countries match “<span x-text="search"></span>”.
            </li>
        </ul>
    </div>
</div>

@once
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('phoneCountrySelectNative', ({ initial, options, placeholder }) => ({
                open: false,
                search: '',
                highlight: 0,
                selected: initial || '',
                options: Array.isArray(options) ? options : [],
                placeholder: placeholder || 'Select country',

                toggle() {
                    this.open = !this.open;
                    if (this.open) {
                        this.search = '';
                        this.highlight = this.indexOfSelected();
                        this.$nextTick(() => {
                            if (this.$refs.search) this.$refs.search.focus();
                            this.scrollHighlightIntoView();
                        });
                    }
                },

                onTriggerKey(e) {
                    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        if (!this.open) this.toggle();
                        return;
                    }
                    if (e.key && e.key.length === 1 && /[\w+\-\s]/.test(e.key)) {
                        e.preventDefault();
                        if (!this.open) {
                            this.toggle();
                            this.$nextTick(() => {
                                this.search = e.key;
                                this.highlight = 0;
                            });
                        } else {
                            this.search += e.key;
                        }
                    }
                },

                filtered() {
                    const q = this.search.trim().toLowerCase();
                    if (!q) return this.options;

                    const starts = [];
                    const contains = [];
                    for (const o of this.options) {
                        const name = (o.name || '').toLowerCase();
                        const code = (o.code || '').toLowerCase();
                        const dial = (o.dial || '').toLowerCase();
                        if (name.startsWith(q) || code.startsWith(q) || dial.startsWith(q)) {
                            starts.push(o);
                        } else if (name.includes(q) || dial.includes(q)) {
                            contains.push(o);
                        }
                    }
                    return [...starts, ...contains];
                },

                indexOfSelected() {
                    const list = this.filtered();
                    const i = list.findIndex(o => o.dial === this.selected);
                    return i >= 0 ? i : 0;
                },

                moveHighlight(step) {
                    const list = this.filtered();
                    if (list.length === 0) return;
                    this.highlight = (this.highlight + step + list.length) % list.length;
                    this.scrollHighlightIntoView();
                },

                scrollHighlightIntoView() {
                    this.$nextTick(() => {
                        if (!this.$refs.list) return;
                        const node = this.$refs.list.children[this.highlight];
                        if (node && node.scrollIntoView) {
                            node.scrollIntoView({ block: 'nearest' });
                        }
                    });
                },

                selectHighlighted() {
                    const list = this.filtered();
                    if (list.length === 0) return;
                    const opt = list[Math.max(0, Math.min(this.highlight, list.length - 1))];
                    if (opt) this.choose(opt);
                },

                choose(opt) {
                    if (!opt) return;
                    this.selected = opt.dial;
                    this.syncHidden(opt.dial);
                    this.open = false;
                    this.search = '';
                    if (this.$refs.trigger) this.$refs.trigger.focus();
                },

                syncHidden(value) {
                    if (!this.$refs.hidden) return;
                    if (this.$refs.hidden.value !== value) {
                        this.$refs.hidden.value = value;
                        this.$refs.hidden.dispatchEvent(new Event('input', { bubbles: true }));
                        this.$refs.hidden.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                },

                displayLabel() {
                    const opt = this.options.find(o => o.dial === this.selected);
                    if (opt) return `${opt.flag} ${opt.name} (${opt.dial})`;
                    return this.selected || this.placeholder;
                },
            }));
        });
    </script>
@endonce