{% load common_extras %}{% comment %}
Reusable styled select dropdown — see the `ui_select` inclusion tag docstring.
Upgraded for Redea Social with semantic tokens and APG listbox semantics.
{% endcomment %}
<div class="relative flex-shrink-0"
     x-data="{
        open: false,
        disabled: {% if disabled %}true{% else %}false{% endif %},
        instanceId: '{{ instance_id|default:'sel_inst' }}',
        top: 0,
        left: 0,
        focusedIdx: -1,
        search: '',
        opts: ({{ options_js|json_attr }} || []).map((o, i) => ({
            value: o.value,
            label: o.label,
            origIdx: (o.origIdx !== undefined ? o.origIdx : i)
        })),
        typeaheadBuffer: '',
        typeaheadTimer: null,
        visibleOpts() {
            if (!this.search) return this.opts;
            const q = this.search.toLowerCase();
            return this.opts.filter(o => String(o.label).toLowerCase().includes(q));
        },
        currentOpt() {
            const list = this.visibleOpts();
            if (this.focusedIdx >= 0 && this.focusedIdx < list.length) {
                return list[this.focusedIdx];
            }
            return null;
        },
        currentOptId() {
            const opt = this.currentOpt();
            if (!opt) return null;
            const idx = (opt.origIdx !== undefined ? opt.origIdx : this.focusedIdx);
            return this.instanceId + '_opt_' + idx;
        },
        uiLabel(v){
            if (v === null || v === undefined || v === '') return '{{ placeholder|escapejs }}';
            const o = this.opts.find(o => String(o.value) === String(v));
            return o ? o.label : '{{ placeholder|escapejs }}';
        },
        uiToggle(e){
            if (this.disabled) return;
            if (this.open) { this.closeAndRestore(); return; }
            if (e && e.currentTarget) {
                const r = e.currentTarget.getBoundingClientRect();
                this.top = r.bottom + 4;
                this.left = Math.min(r.left, window.innerWidth - 236);
            }
            this.open = true;
            this.focusedIdx = 0;
            if (this.$refs.listbox) {
                this.$refs.listbox.style.display = '';
            }
            if (this.$refs.search) {
                this.$refs.search.focus();
            } else if (this.$refs.listbox) {
                this.$refs.listbox.focus();
            }
            this.$nextTick(() => {
                if (!this.open || !this.$el.isConnected) return;
                if (this.$refs.search && this.$refs.search.isConnected) {
                    this.$refs.search.focus();
                } else if (this.$refs.listbox && this.$refs.listbox.isConnected) {
                    this.$refs.listbox.focus();
                }
            });
        },
        close(restoreFocus = false){
            if (!this.open) return;
            this.open = false;
            this.focusedIdx = -1;
            this.search = '';
            if (this.$refs.listbox) {
                this.$refs.listbox.style.display = 'none';
            }
            if (restoreFocus && this.$refs.trigger && this.$refs.trigger.isConnected) {
                this.$refs.trigger.focus();
            }
        },
        closeAndRestore(){
            this.close(true);
        },
        closeWithoutFocus(){
            this.close(false);
        },
        focusNext(){
            if (this.disabled) return;
            if (!this.open) { this.open = true; this.focusedIdx = 0; return; }
            const list = this.visibleOpts();
            if (list.length === 0) return;
            this.focusedIdx = (this.focusedIdx + 1) % list.length;
            this.scrollToFocused();
        },
        focusPrev(){
            if (this.disabled) return;
            if (!this.open) { this.open = true; this.focusedIdx = this.visibleOpts().length - 1; return; }
            const list = this.visibleOpts();
            if (list.length === 0) return;
            this.focusedIdx = (this.focusedIdx - 1 + list.length) % list.length;
            this.scrollToFocused();
        },
        focusFirst(){
            if (this.disabled) return;
            if (!this.open) this.open = true;
            this.focusedIdx = 0;
            this.scrollToFocused();
        },
        focusLast(){
            if (this.disabled) return;
            if (!this.open) this.open = true;
            const list = this.visibleOpts();
            this.focusedIdx = Math.max(0, list.length - 1);
            this.scrollToFocused();
        },
        scrollToFocused(){
            this.$nextTick(() => {
                const id = this.currentOptId();
                const optEl = id ? document.getElementById(id) : null;
                if (optEl && optEl.scrollIntoView) {
                    optEl.scrollIntoView({ block: 'nearest' });
                }
            });
        },
        selectFocused(){
            if (this.disabled) return;
            const id = this.currentOptId();
            if (id) {
                const optEl = document.getElementById(id);
                if (optEl) {
                    optEl.click();
                }
            }
        },
        handleTypeahead(e){
            if (this.disabled) return;
            if (e.target === this.$refs.search) return;
            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
                clearTimeout(this.typeaheadTimer);
                this.typeaheadBuffer += e.key.toLowerCase();
                this.typeaheadTimer = setTimeout(() => { this.typeaheadBuffer = ''; }, 500);
                const list = this.visibleOpts();
                const matchIdx = list.findIndex(o => String(o.label).toLowerCase().startsWith(this.typeaheadBuffer));
                if (matchIdx !== -1) {
                    this.focusedIdx = matchIdx;
                    this.scrollToFocused();
                }
            }
        }
     }"
     @click.away="closeWithoutFocus()"
     @keydown.escape.prevent="closeAndRestore()"
     @scroll.window="closeWithoutFocus()">
    {% if label %}
    <label id="{{ instance_id|default:'sel_inst' }}_label" for="{{ instance_id|default:'sel_inst' }}_trigger" class="c-label mb-1 block">{{ label }}</label>
    {% endif %}
    {% include "components/_filter_icon.html" with name=icon %}
    <button type="button"
            id="{{ instance_id|default:'sel_inst' }}_trigger"
            x-ref="trigger"
            @click="uiToggle($event)"
            @keydown.arrow-down.prevent="if (!disabled) uiToggle($event)"
            @keydown.arrow-up.prevent="if (!disabled) uiToggle($event)"
            aria-haspopup="listbox"
            :aria-expanded="open.toString()"
            {% if disabled %}disabled aria-disabled="true"{% endif %}
            :disabled="disabled"
            {% if label %}aria-labelledby="{{ instance_id|default:'sel_inst' }}_label"{% else %}aria-label="{{ placeholder }}"{% endif %}
            class="cal-filter-select{% if icon %} has-icon{% endif %} flex items-center gap-1 whitespace-nowrap c-select{% if classes %} {{ classes }}{% endif %}{% if disabled %} opacity-50 cursor-not-allowed{% endif %}"
            :class="{% if multiple %}{{ model }}.length{% else %}{{ model }}{% endif %} && 'border-control text-accent'">
        <span x-text="{% if multiple %}{{ model }}.length ? {{ model }}.length + ' selected' : '{{ placeholder|escapejs }}'{% else %}uiLabel({{ model }}){% endif %}"></span>
        <svg class="w-3 h-3 text-subtle ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
    </button>
    <div x-show="open" x-cloak
         id="{{ instance_id|default:'sel_inst' }}_listbox"
         x-ref="listbox"
         tabindex="-1"
         role="listbox"
         {% if multiple %}aria-multiselectable="true"{% endif %}
         @keydown.arrow-down.prevent="focusNext()"
         @keydown.arrow-up.prevent="focusPrev()"
         @keydown.home.prevent="focusFirst()"
         @keydown.end.prevent="focusLast()"
         @keydown.enter.prevent="selectFocused()"
         @keydown.space.prevent="selectFocused()"
         @keydown="handleTypeahead($event)"
         :aria-activedescendant="currentOptId()"
         :style="`top:${top}px; left:${left}px;`"
         class="fixed z-50 w-56 max-h-72 overflow-y-auto bg-surface rounded-lg shadow-float ring-1 ring-border py-1 focus:outline-none">
        {% if searchable %}
        <div class="p-1.5 border-b border-border" @keydown.stop>
            <input type="text"
                   x-ref="search"
                   x-model="search"
                   @input="focusedIdx = visibleOpts().length > 0 ? 0 : -1"
                   placeholder="Buscar..."
                   role="combobox"
                   aria-autocomplete="list"
                   aria-expanded="true"
                   :aria-controls="instanceId + '_listbox'"
                   :aria-activedescendant="currentOptId()"
                   class="c-input text-xs w-full py-1 px-2"
                   @keydown.arrow-down.prevent.stop="focusNext()"
                   @keydown.arrow-up.prevent.stop="focusPrev()"
                   @keydown.enter.prevent.stop="selectFocused()"
                   @keydown.escape.stop="closeAndRestore()"
                   @keydown.space.stop
                   @click.stop>
        </div>
        {% endif %}
        <button type="button"
                tabindex="-1"
                role="option"
                :aria-selected="{% if multiple %}!{{ model }}.length ? 'true' : 'false'{% else %}!{{ model }} ? 'true' : 'false'{% endif %}"
                @click="{% if multiple %}{{ model }} = []{% else %}{{ model }} = ''; closeAndRestore(){% endif %}; {{ onchange }}"
                class="w-full text-left px-3 py-1.5 text-xs font-semibold hover:bg-surface-sunken border-b border-border focus:bg-surface-sunken focus:outline-none"
                :class="{% if multiple %}!{{ model }}.length{% else %}!{{ model }}{% endif %} ? 'text-accent' : 'text-muted'">
            {{ placeholder }} — all
        </button>
        {% for opt in options %}
        {% if multiple %}
        <label id="{{ instance_id|default:'sel_inst' }}_opt_{{ forloop.counter0 }}"
               tabindex="-1"
               class="flex items-center gap-2 px-3 py-1.5 text-xs text-text hover:bg-surface-sunken cursor-pointer focus-within:bg-surface-sunken"
               role="option"
               :aria-selected="{{ model }}.includes('{{ opt.value|escapejs }}') ? 'true' : 'false'"
               :class="currentOptId() === '{{ instance_id|default:'sel_inst' }}_opt_{{ forloop.counter0 }}' && 'bg-surface-sunken'"
               {% if searchable %}x-show="!search || '{{ opt.label|escapejs }}'.toLowerCase().includes(search.toLowerCase())"{% endif %}>
            <input type="checkbox"
                   value="{{ opt.value }}"
                   x-model="{{ model }}"
                   @change="{{ onchange }}"
                   class="rounded border-control text-accent focus:ring-focus">
            {% if opt.icon %}<span class="w-4 h-4 rounded flex items-center justify-center pi-{{ opt.icon }} flex-shrink-0 text-text-inverse">{% include "social_accounts/partials/_platform_icon.html" with platform=opt.icon size="3" %}</span>{% endif %}
            <span class="truncate">{{ opt.label }}</span>
        </label>
        {% else %}
        <button type="button"
                tabindex="-1"
                id="{{ instance_id|default:'sel_inst' }}_opt_{{ forloop.counter0 }}"
                role="option"
                :aria-selected="String({{ model }}) === '{{ opt.value|escapejs }}'"
                @click="{{ model }} = '{{ opt.value|escapejs }}'; closeAndRestore(); {{ onchange }}"
                class="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-text hover:bg-surface-sunken text-left focus:bg-surface-sunken focus:outline-none"
                :class="(String({{ model }}) === '{{ opt.value|escapejs }}' ? 'bg-accent-soft text-accent' : '') + (currentOptId() === '{{ instance_id|default:'sel_inst' }}_opt_{{ forloop.counter0 }}' ? ' bg-surface-sunken' : '')"
                {% if searchable %}x-show="!search || '{{ opt.label|escapejs }}'.toLowerCase().includes(search.toLowerCase())"{% endif %}>
            {% if opt.icon %}<span class="w-4 h-4 rounded flex items-center justify-center pi-{{ opt.icon }} flex-shrink-0 text-text-inverse">{% include "social_accounts/partials/_platform_icon.html" with platform=opt.icon size="3" %}</span>{% endif %}
            <span class="truncate">{{ opt.label }}</span>
        </button>
        {% endif %}
        {% endfor %}
    </div>
</div>