{% trans_default_domain 'admin' %}
{% props editions, selected = [], baseLabel = 'Angebote', unscopedRoute = 'admin_offers_index', scopedRoute = 'admin_offers_index' %}

{# Re-index to a plain list so json_encode yields a JSON array (Twig's
   |map preserves keys from `selected`). #}
{% set selectedSlugs = [] %}
{% for e in selected %}{% set selectedSlugs = selectedSlugs|merge([e.alias]) %}{% endfor %}

{% set unscopedUrl = path(unscopedRoute) %}
{% set scopedUrlTemplate = path(scopedRoute, { edition: '__SLUGS__' }) %}

{# Group editions into active vs archived; design's filter. #}
{% set activeEditions = editions|filter(e => not e.archived) %}
{% set archivedEditions = editions|filter(e => e.archived) %}

<div class="relative"
     data-controller="ferienpass--admin-entity-switcher"
     data-ferienpass--admin-entity-switcher-selected-slugs-value="{{ selectedSlugs|json_encode|e('html_attr') }}"
     data-ferienpass--admin-entity-switcher-unscoped-url-value="{{ unscopedUrl }}"
     data-ferienpass--admin-entity-switcher-scoped-url-template-value="{{ scopedUrlTemplate }}"
     data-ferienpass--admin-entity-switcher-empty-label-value="Keine Auswahl — alles wird gezeigt"
     data-ferienpass--admin-entity-switcher-count-label-value="{n} ausgewählt"
     data-live-ignore>

    {# Headline button — IS the switcher. #}
    <button type="button"
            data-ferienpass--admin-entity-switcher-target="trigger"
            data-action="ferienpass--admin-entity-switcher#toggle"
            aria-expanded="false"
            aria-haspopup="listbox"
            class="group flex items-center gap-2 -ml-1.5 px-1.5 py-0.5 rounded-md transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 aria-expanded:bg-gray-100 dark:aria-expanded:bg-gray-800">
        <h1 class="text-2xl sm:text-[28px] font-extrabold tracking-tight text-gray-900 dark:text-gray-50 text-left">
            <span>{{ baseLabel }}</span>
            <span class="text-gray-300 dark:text-gray-600 font-light px-1.5">·</span>
            {% if selected|length == 0 %}
                <span class="text-gray-500 dark:text-gray-400">Alle Saisons</span>
            {% elseif selected|length == 1 %}
                <span class="text-primary-700 dark:text-primary-300">{{ selected[0].name }}</span>
            {% else %}
                <span class="text-primary-700 dark:text-primary-300">{{ selected|length }} Saisons</span>
            {% endif %}
        </h1>
        <span class="size-5 text-gray-400 transition-transform group-hover:text-gray-700 dark:group-hover:text-gray-200 group-aria-expanded:rotate-180 group-aria-expanded:text-gray-700 dark:group-aria-expanded:text-gray-200">
            <twig:ux:icon name="ph:caret-down"/>
        </span>
    </button>

    {# Popover #}
    <div data-ferienpass--admin-entity-switcher-target="popover"
         class="hidden absolute left-0 top-full mt-2 z-30 w-[min(360px,calc(100vw-2rem))] rounded-lg bg-white dark:bg-gray-900 shadow-xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden">

        <div class="p-2 border-b border-gray-100 dark:border-gray-800">
            <div class="relative">
                <span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-gray-400">
                    <twig:ux:icon name="ph:magnifying-glass"/>
                </span>
                <input type="search"
                       data-ferienpass--admin-entity-switcher-target="searchInput"
                       data-action="input->ferienpass--admin-entity-switcher#filter"
                       placeholder="Saison suchen…"
                       class="block w-full rounded-md bg-gray-50 dark:bg-gray-800 py-1.5 pl-8 pr-3 text-sm text-gray-900 dark:text-gray-100 outline-1 -outline-offset-1 outline-transparent placeholder:text-gray-400 focus:bg-white dark:focus:bg-gray-900 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600"/>
            </div>
        </div>

        {# "All editions" pseudo-row — escape hatch. #}
        <button type="button"
                data-action="ferienpass--admin-entity-switcher#showAll"
                class="w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/60 {{ selected|length == 0 ? 'bg-primary-50/60 dark:bg-primary-900/20' : '' }}">
            <span class="size-4 rounded-full flex items-center justify-center ring-1 {{ selected|length == 0 ? 'ring-primary-600 bg-primary-600' : 'ring-gray-300 dark:ring-gray-600' }}">
                {% if selected|length == 0 %}<span class="size-1.5 rounded-full bg-white"></span>{% endif %}
            </span>
            <span class="flex-1">
                <span class="block text-sm font-semibold text-gray-900 dark:text-gray-100">Alle Saisons anzeigen</span>
                <span class="block text-xs text-gray-500 dark:text-gray-400">Angebote aus allen Editionen, ohne Filter.</span>
            </span>
        </button>

        {# Grouped checkbox list — active / archived #}
        <div class="max-h-[320px] overflow-y-auto sb-scroll">
            {% for group in [{ label: 'Aktive Saisons', list: activeEditions }, { label: 'Archivierte Saisons', list: archivedEditions }] %}
                {% if group.list|length > 0 %}
                    <div>
                        <div class="px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ group.label }}</div>
                        <ul>
                            {% for ed in group.list %}
                                <li data-ferienpass--admin-entity-switcher-target="item"
                                    data-slug="{{ ed.alias }}"
                                    data-name="{{ ed.name }}"
                                    aria-pressed="false"
                                    class="group/item flex items-center hover:bg-gray-50 dark:hover:bg-gray-800/60">
                                    <button type="button"
                                            data-action="ferienpass--admin-entity-switcher#toggleItem"
                                            data-slug="{{ ed.alias }}"
                                            class="flex-1 min-w-0 flex items-center gap-3 px-3 py-2 text-left">
                                        <span class="size-4 rounded flex items-center justify-center ring-1 transition-colors shrink-0 ring-gray-300 dark:ring-gray-600 bg-white dark:bg-gray-800 group-aria-pressed/item:ring-primary-600 group-aria-pressed/item:bg-primary-600">
                                            <twig:ux:icon name="ph:check" class="size-3 text-white hidden group-aria-pressed/item:block"/>
                                        </span>
                                        <span class="flex-1 min-w-0">
                                            <span class="block text-sm text-gray-800 dark:text-gray-200 truncate group-aria-pressed/item:font-semibold group-aria-pressed/item:text-gray-900 dark:group-aria-pressed/item:text-gray-100">{{ ed.name }}</span>
                                        </span>
                                    </button>

                                    {% if is_granted('ROLE_ADMIN') %}
                                        <div class="pr-2 shrink-0">
                                            {% component 'Admin:Dropdown' with { position: 'left' } %}
                                                {% block toggle %}
                                                    <button type="button"
                                                            class="cursor-pointer inline-flex items-center justify-center size-7 rounded-md text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
                                                            aria-label="Saison-Aktionen">
                                                        <twig:ux:icon name="ph:gear" class="size-4"/>
                                                    </button>
                                                {% endblock %}
                                                {% block dropdown %}
                                                    {% set editionActions = list_actions(ed).children|filter(a => a.displayed) %}
                                                    {% set sections = editionActions|map(a => a.extra('section', 'default'))|reduce((unique, s) => s in unique ? unique : unique|merge([s]), []) %}
                                                    {% for section in sections %}
                                                        <div class="py-1">
                                                            {% for action in editionActions|filter(a => a.extra('section', 'default') == section) %}
                                                                {% set itemAttrs = action.extra('attr', [])|merge(action.linkAttributes|default([])) %}
                                                                {% component 'Admin:DropdownItem' with {
                                                                    href: action.uri,
                                                                    attributes: itemAttrs,
                                                                    method: action.extra('method', 'get'),
                                                                } %}
                                                                    {% block content %}
                                                                        {% trans_default_domain 'admin' %}
                                                                        <span class="mr-2 size-4 flex-shrink-0 {{ action.extra('color') }}">{{ action.extra('icon') ? ux_icon('ph:'~action.extra('icon')) }}</span>
                                                                        {%- set label = action.label -%}
                                                                        {%- set label = label|trans(action.extra('translation_params', {})) -%}
                                                                        <span class="text-left leading-tight">{{ label }}</span>
                                                                    {% endblock %}
                                                                {% endcomponent %}
                                                            {% endfor %}
                                                        </div>
                                                    {% endfor %}
                                                {% endblock %}
                                            {% endcomponent %}
                                        </div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        {# Footer #}
        <div class="flex items-center justify-between px-3 py-2 border-t border-gray-100 dark:border-gray-800 bg-gray-50/60 dark:bg-gray-800/40">
            <span data-ferienpass--admin-entity-switcher-target="counter"
                  class="text-xs text-gray-500 dark:text-gray-400">Keine Auswahl — alles wird gezeigt</span>
            <div class="flex items-center gap-1">
                <twig:Admin:Button variant="ghost" size="sm"
                                   data-ferienpass--admin-entity-switcher-target="clearButton"
                                   data-action="ferienpass--admin-entity-switcher#clear"
                                   class="hidden">Auswahl löschen</twig:Admin:Button>
                <twig:Admin:Button variant="primary" size="sm"
                                   data-action="ferienpass--admin-entity-switcher#apply">Fertig</twig:Admin:Button>
            </div>
        </div>
    </div>
</div>
