{% trans_default_domain 'admin' %}

{# Per-format-type icon + accent classes (static so Tailwind keeps them). The
   selected-card ring/check use the primary color (project convention); these
   accents only colour the icon, extension label and preview badge. #}
{% set typeMeta = {
    ics:  { icon: 'ph:calendar-blank', filename: 'ferienpass-angebote.ics',
            iconBox: 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400',
            ext: 'text-blue-600 dark:text-blue-400',
            badge: 'bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-300' },
    pdf:  { icon: 'ph:file-pdf', filename: 'ferienpass-programm.pdf',
            iconBox: 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400',
            ext: 'text-red-600 dark:text-red-400',
            badge: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-300' },
    docx: { icon: 'ph:file-doc', filename: 'ferienpass-angebote.docx',
            iconBox: 'bg-indigo-50 text-indigo-600 dark:bg-indigo-500/10 dark:text-indigo-400',
            ext: 'text-indigo-600 dark:text-indigo-400',
            badge: 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300' },
    xlsx: { icon: 'ph:file-xls', filename: 'ferienpass-angebote.xlsx',
            iconBox: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-400',
            ext: 'text-green-700 dark:text-green-400',
            badge: 'bg-green-50 text-green-700 dark:bg-green-500/10 dark:text-green-300' },
    xml:  { icon: 'ph:file-code', filename: 'ferienpass-angebote.xml',
            iconBox: 'bg-gray-100 text-gray-600 dark:bg-gray-500/10 dark:text-gray-400',
            ext: 'text-gray-600 dark:text-gray-400',
            badge: 'bg-gray-100 text-gray-700 dark:bg-gray-500/10 dark:text-gray-300' }
} %}
{% set defaultMeta = { icon: 'ph:file', filename: 'ferienpass-angebote',
    iconBox: 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400',
    ext: 'text-primary-600 dark:text-primary-400',
    badge: 'bg-primary-50 text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' } %}
{% set pm = typeMeta[previewType]|default(defaultMeta) %}

<div {{ attributes }}>
    <div class="grid grid-cols-1 items-start gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,468px)]">

        {# ─────────── LEFT: controls ─────────── #}
        <div class="space-y-9">

            {# Step 1 — Format #}
            <section>
                <div class="mb-5 flex items-start gap-3 border-b border-gray-200 pb-4 dark:border-gray-800">
                    <span class="grid size-9 flex-none place-items-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <twig:ux:icon name="ph:file-text" class="size-5" />
                    </span>
                    <div class="min-w-0 flex-1">
                        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ 'export.chooseFormat'|trans }}</h2>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ 'export.chooseFormatHelp'|trans }}</p>
                    </div>
                    <span class="flex-none pt-0.5 text-xs font-medium text-gray-400">{{ 'export.step'|trans({'n': 1}) }}</span>
                </div>

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    {% for fmt in formats %}
                        {% set m = typeMeta[fmt.type]|default(defaultMeta) %}
                        {% set isOn = export == fmt.name %}
                        <button type="button"
                                data-action="live#action:prevent"
                                data-live-action-param="selectExport"
                                data-live-name-param="{{ fmt.name }}"
                                class="relative flex items-start gap-3 rounded-lg border bg-white p-4 text-left transition hover:border-gray-300 focus:outline-none dark:bg-gray-900 dark:hover:border-gray-700 {{ isOn ? 'border-primary-600 ring-2 ring-primary-600 dark:border-primary-400/50 dark:ring-primary-400/50' : 'border-gray-200 dark:border-gray-800' }}">
                            <span class="grid size-11 flex-none place-items-center rounded-lg {{ m.iconBox }}">
                                <twig:ux:icon name="{{ m.icon }}" class="size-6" />
                            </span>
                            <span class="min-w-0 flex-1 pr-5">
                                <span class="block text-[11px] font-bold uppercase tracking-wide {{ m.ext }}">{{ fmt.ext }}</span>
                                <span class="block text-sm font-semibold text-gray-900 dark:text-gray-100">{{ "#{fmt.name}.0"|trans([], 'export') }}</span>
                                <span class="mt-1 block text-xs leading-snug text-gray-500 dark:text-gray-400">{{ "#{fmt.name}.1"|trans([], 'export') }}</span>
                            </span>
                            <span class="absolute right-3 top-3 grid size-5 place-items-center rounded-full border-2 transition {{ isOn ? 'border-primary-600 bg-primary-600 text-white' : 'border-gray-300 text-transparent dark:border-gray-600' }}">
                                <twig:ux:icon name="ph:check-bold" class="size-3" />
                            </span>
                        </button>
                    {% endfor %}
                </div>
            </section>

            {# Step 2 — Filters #}
            <section>
                <div class="mb-5 flex items-start gap-3 border-b border-gray-200 pb-4 dark:border-gray-800">
                    <span class="grid size-9 flex-none place-items-center rounded-lg bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400">
                        <twig:ux:icon name="ph:funnel" class="size-5" />
                    </span>
                    <div class="min-w-0 flex-1">
                        <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ 'export.narrow'|trans }}</h2>
                        <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ 'export.narrowHelp'|trans }}</p>
                    </div>
                    <span class="flex-none pt-0.5 text-xs font-medium text-gray-400">{{ 'export.step'|trans({'n': 2}) }}</span>
                </div>

                <div class="space-y-6">
                    {% if edition is null %}
                        <div>
                            <h3 class="mb-3 text-sm font-bold text-gray-900 dark:text-gray-50">
                                {{ 'export.seasons'|trans }}
                                <span class="ml-1 text-xs font-normal text-gray-400">— {{ 'export.seasonsHelp'|trans }}</span>
                            </h3>
                            <div class="flex flex-wrap gap-2">
                                {% for season in editionOptions %}
                                    {% set checked = season.id in selectedEditions %}
                                    <label class="cursor-pointer">
                                        <input type="checkbox" data-model="selectedEditions[]" value="{{ season.id }}" class="peer sr-only" {{ checked ? 'checked' : '' }}>
                                        <span class="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white py-1.5 pl-2.5 pr-3.5 text-xs font-semibold text-gray-600 transition hover:border-gray-300 peer-checked:border-primary-500 peer-checked:bg-primary-50 peer-checked:text-primary-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:peer-checked:border-primary-400 dark:peer-checked:bg-primary-500/10 dark:peer-checked:text-primary-300">
                                            <span class="grid size-4 place-items-center rounded-full border border-gray-300 text-white peer-checked:border-primary-500 peer-checked:bg-primary-500 dark:border-gray-600">
                                                <twig:ux:icon name="ph:check-bold" class="size-2.5 opacity-0 peer-checked:opacity-100" />
                                            </span>
                                            {{ season.name }}
                                            <span class="tabular-nums text-gray-400">{{ editionCounts[season.id] ?? 0 }}</span>
                                        </span>
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    <div>
                        <h3 class="mb-3 text-sm font-bold text-gray-900 dark:text-gray-50">
                            {{ 'export.hosts'|trans }}
                            <span class="ml-1 text-xs font-normal text-gray-400">— {{ 'export.optional'|trans }}</span>
                        </h3>
                        <div class="flex max-h-64 flex-col gap-0.5 overflow-y-auto rounded-lg border border-gray-200 bg-white p-1.5 dark:border-gray-800 dark:bg-gray-900">
                            {% for host in hostOptions %}
                                {% set checked = host.id in selectedHosts %}
                                <label class="flex cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 transition hover:bg-gray-50 dark:hover:bg-gray-800/60">
 <input type="checkbox" data-model="selectedHosts[]" value="{{ host.id }}" {{ checked ? 'checked' : '' }}>
                                    <span class="min-w-0 flex-1 truncate text-sm text-gray-800 dark:text-gray-200">{{ host.name }}</span>
                                    <span class="flex-none tabular-nums text-xs text-gray-400">{{ hostCounts[host.id] ?? 0 }}</span>
                                </label>
                            {% endfor %}
                        </div>
                        <div class="mt-2.5 flex items-center justify-between">
                            <span class="text-xs text-gray-500 dark:text-gray-400">
                                {{ selectedHosts|length ? 'export.hostsSelected'|trans({'count': selectedHosts|length}) : 'export.allHosts'|trans }}
                            </span>
                            {% if selectedHosts|length %}
                                <button type="button" data-action="live#action:prevent" data-live-action-param="resetHosts"
                                        class="rounded-md px-1.5 py-0.5 text-xs font-semibold text-primary-600 hover:bg-primary-50 dark:text-primary-400 dark:hover:bg-primary-500/10">
                                    {{ 'export.resetSelection'|trans }}
                                </button>
                            {% endif %}
                        </div>
                    </div>

                    <div>
                        <h3 class="mb-3 text-sm font-bold text-gray-900 dark:text-gray-50">{{ 'export.visibility'|trans }}</h3>
                        <div class="flex items-start">
                            <div class="flex h-6 items-center">
 <input id="export-only-published" type="checkbox" data-model="onlyPublished" aria-describedby="export-only-published-description" {{ onlyPublished ? 'checked' : '' }}>
                            </div>
                            <div class="ml-3 text-sm leading-6">
                                <label for="export-only-published" class="font-medium text-gray-900 dark:text-gray-100">{{ 'export.onlyPublished'|trans }}</label>
                                <span id="export-only-published-description" class="text-gray-500 dark:text-gray-400">{{ 'export.onlyPublishedHelp'|trans }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Action bar #}
                <div class="mt-7 flex flex-wrap items-center gap-4 border-t border-gray-200 pt-5 dark:border-gray-800">
                    <span class="flex max-w-md gap-2 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
                        <twig:ux:icon name="ph:info" class="mt-0.5 size-4 flex-none text-gray-400" />
                        <span>
                            {{ 'export.deliveryNote'|trans }}
                            <em class="font-semibold not-italic text-gray-700 dark:text-gray-300" data-controller="ferienpass--admin-personalize" data-ferienpass--admin-personalize-source-value="[data-current-user-email]"></em>
                        </span>
                    </span>
                    <twig:Admin:Button variant="primary" class="ml-auto" data-action="live#action:prevent" data-live-action-param="submit">
                        <twig:ux:icon name="ph:download-simple" class="-ml-0.5 size-4" />
                        {{ 'export.button'|trans({}, 'admin') }}
                    </twig:Admin:Button>
                </div>
            </section>
        </div>

        {# ─────────── RIGHT: live preview ─────────── #}
        <div class="lg:sticky lg:top-4">
            <div class="mb-3 flex items-center gap-2.5">
                <b class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ 'export.preview'|trans }}</b>
                {% if previewType %}
                    <span class="inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide {{ pm.badge }}">{{ previewType|upper }}</span>
                {% endif %}
                <span class="ml-auto inline-flex items-center gap-1.5 text-[11px] text-gray-400">
                    <span class="size-1.5 animate-pulse rounded-full bg-green-500"></span> Live
                </span>
            </div>

            <div class="overflow-hidden rounded-lg border border-gray-200 bg-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900/60">
                <div class="flex items-center gap-1.5 border-b border-gray-200 bg-white px-3.5 py-2.5 dark:border-gray-800 dark:bg-gray-900">
                    <span class="size-2.5 rounded-full bg-red-400"></span>
                    <span class="size-2.5 rounded-full bg-amber-400"></span>
                    <span class="size-2.5 rounded-full bg-green-400"></span>
                    <span class="ml-2.5 truncate font-mono text-[11px] text-gray-500 dark:text-gray-400">{{ pm.filename }}</span>
                </div>

                <div class="flex max-h-[540px] min-h-[420px] justify-center overflow-y-auto p-5">
                    {% if previewType == 'pdf' %}
                        {{ include('@FerienpassAdmin/components/export/_preview_pdf.html.twig', { html: previewPdfHtml, signature: previewSignature }) }}
                    {% elseif previewType == 'xlsx' and previewColumns %}
                        {{ include('@FerienpassAdmin/components/export/_preview_excel.html.twig', { columns: previewColumns }) }}
                    {% elseif previewType == 'ics' %}
                        {{ include('@FerienpassAdmin/components/export/_preview_ics.html.twig', { offers: previewOffers }) }}
                    {% elseif previewType == 'docx' %}
                        {{ include('@FerienpassAdmin/components/export/_preview_word.html.twig', { offers: previewOffers }) }}
                    {% else %}
                        {{ include('@FerienpassAdmin/components/export/_preview_generic.html.twig', { offers: previewOffers }) }}
                    {% endif %}
                </div>

                <div class="flex items-center gap-2 border-t border-gray-200 bg-white px-4 py-3 text-[11px] text-gray-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400">
                    <twig:ux:icon name="ph:stack" class="size-3.5 flex-none {{ pm.ext }}" />
                    {{ 'export.previewExcerpt'|trans }}
                    <span class="ml-auto font-semibold tabular-nums text-gray-700 dark:text-gray-300">{{ 'export.offerCount'|trans({'count': totalCount}) }}</span>
                </div>
            </div>
        </div>
    </div>

    {% if noEntriesNotification %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="error" title="Keine Daten gefunden" message="Es wurden keine Daten zum Export gefunden, nachdem die Filter angewendet wurden. Überprüfen Sie Ihre Filtereinstellungen und versuchen Sie es erneut."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    {% if successNotification %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Export wird erstellt" message="Der Export wird Ihnen per E-Mail zugestellt. Bitte überprüfen Sie Ihr E-Mail-Postfach."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

</div>
