{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% trans_default_domain 'admin' %}
{% import '@FerienpassAdmin/components/_notification_visuals.html.twig' as nv %}

{% block main %}
  <div class="relative isolate overflow-hidden -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
    <twig:Admin:Edition:Header edition="{{ edition }}"/>
  </div>

  {% if selectedType is null %}
    <div class="py-12 text-center">
      <twig:ux:icon name="ph:envelope" class="mx-auto size-10 text-gray-400" aria-hidden="true" />
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ 'notifications.season.empty'|trans }}</p>
    </div>
  {% else %}
    {# `admin_notifications_edit_in_edition` carries the edition in the path (MapEntity
       resolves it; `admin_notifications_new?edition=` would 404) and creates the override
       on save if none exists yet. #}
    {% set editUrl = path('admin_notifications_edit_in_edition', { type: selectedType, edition: edition.alias }) %}

    <div class="mt-6 lg:flex lg:items-start lg:gap-x-8">

      {# ── left: grouped master nav (design language of /admin/benachrichtigungen/) ── #}
      <twig:Admin:VerticalNav>
        <twig:block name="items">
          {% import '@FerienpassAdmin/components/_notification_visuals.html.twig' as nv %}
          {% for group in groups %}
            <li class="px-2 pt-3 pb-1 text-[11px] font-semibold uppercase tracking-wider text-gray-400 first:pt-0 dark:text-gray-500">{{ group.label|trans({}, 'admin') }}</li>
            {% for item in group.items %}
              {% if item.editionAware %}
                <twig:Admin:VerticalNavItem
                    :name="'notifications.' ~ item.type ~ '.0'"
                    :description="'notifications.' ~ item.type ~ '.1'"
                    href="{{ path('admin_editions_notifications', { alias: edition.alias, type: item.type }) }}"
                    icon="{{ nv.icon(item.type)|trim }}"
                    :active="item.type == selectedType"
                >
                  <twig:block name="name_suffix">
                    {% set dotColor = item.enabled ? (item.overridden ? 'bg-yellow-600' : 'bg-green-600') : 'bg-gray-400' %}
                    <span class="ml-1 inline-block h-2.5 w-2.5 shrink-0 rounded-full align-middle {{ dotColor }}"
                          title="{{ (item.enabled ? (item.overridden ? 'notifications.season.dot.overridden' : 'notifications.season.dot.standard') : 'notifications.season.dot.disabled')|trans({}, 'admin') }}"></span>
                  </twig:block>
                  <twig:block name="description_suffix">
                    <div class="mt-1">
                      {% if item.overridden %}
                        <twig:Admin:Badge color="yellow" content="{{ 'notifications.season.badge.overridden'|trans({}, 'admin') }}" />
                      {% else %}
                        <twig:Admin:Badge color="gray" content="{{ 'notifications.season.badge.standard'|trans({}, 'admin') }}" />
                      {% endif %}
                    </div>
                  </twig:block>
                </twig:Admin:VerticalNavItem>
              {% else %}
                {# not configurable per season — edited globally under /admin/benachrichtigungen #}
                <twig:Admin:VerticalNavItem
                    :name="'notifications.' ~ item.type ~ '.0'"
                    :description="'notifications.' ~ item.type ~ '.1'"
                    href="{{ path('admin_notifications', { type: item.type }) }}"
                    icon="{{ nv.icon(item.type)|trim }}"
                    :muted="true"
                    title="{{ 'notifications.season.globalHint'|trans({}, 'admin') }}"
                />
              {% endif %}
            {% endfor %}
          {% endfor %}
          <li class="px-2 pt-4 text-xs leading-relaxed text-gray-400 dark:text-gray-500">
            {{ 'notifications.season.globalNote'|trans({}, 'admin') }}
            <a href="{{ path('admin_notifications') }}" class="font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">{{ 'notifications.title'|trans({}, 'admin') }}</a>.
          </li>
        </twig:block>
      </twig:Admin:VerticalNav>

      {# ── middle: preview ── #}
      <div class="mt-8 min-w-0 flex-1 lg:mt-0 lg:pt-6">
        <div class="mb-6 border-b border-gray-200 pb-5 dark:border-gray-800">
          <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
            <h2 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-50">{{ ('notifications.' ~ selectedType ~ '.0')|trans }}</h2>
            {% if selected.enabled %}
              <twig:Admin:Badge color="green" :dot="true" :boxed="true" content="{{ 'notifications.season.badge.active'|trans }}" />
            {% else %}
              <twig:Admin:Badge color="gray" :dot="true" :boxed="true" content="{{ 'notifications.season.badge.inactive'|trans }}" />
            {% endif %}
            {% if selected.overridden %}
              <twig:Admin:Badge color="orange" content="{{ 'notifications.season.badge.overridden'|trans }}" />
            {% else %}
              <twig:Admin:Badge color="gray" content="{{ 'notifications.season.badge.standard'|trans }}" />
            {% endif %}
            <span class="flex-1"></span>

            {# preview-mode toggle (rendered sample data ⇄ merge fields) #}
            {% set segItem = 'rounded-md px-3 py-1.5 text-sm font-semibold transition-colors' %}
            {% set segOn = 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-50' %}
            {% set segOff = 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200' %}
            <div class="inline-flex gap-0.5 rounded-lg border border-gray-200 bg-gray-100 p-0.5 dark:border-white/10 dark:bg-white/5" role="group" aria-label="{{ 'notifications.season.preview'|trans }}">
              <a href="{{ path('admin_editions_notifications', { alias: edition.alias, type: selectedType }) }}"
                 class="{{ segItem }} {{ previewMode != 'raw' ? segOn : segOff }}" {% if previewMode != 'raw' %}aria-current="true"{% endif %}>{{ 'notifications.season.preview'|trans }}</a>
              <a href="{{ path('admin_editions_notifications', { alias: edition.alias, type: selectedType, preview: 'raw' }) }}"
                 class="{{ segItem }} {{ previewMode == 'raw' ? segOn : segOff }}" {% if previewMode == 'raw' %}aria-current="true"{% endif %}>{{ 'notifications.season.placeholders'|trans }}</a>
            </div>

            <twig:Admin:Button variant="primary" size="sm" href="{{ editUrl }}">
              <twig:ux:icon name="ph:pencil-simple" class="mr-1.5 size-4" /> {{ 'notifications.season.edit'|trans({}, 'admin') }}
            </twig:Admin:Button>
          </div>
          <p class="mt-1.5 text-sm text-gray-500 dark:text-gray-400">{{ ('notifications.' ~ selectedType ~ '.1')|trans }}</p>
        </div>

        <twig:Admin:MailPreview
            subject="{{ mockEmail ? mockEmail.message.getSubject() }}"
            fromAddress="noreply@{{ app.request.host }}"
            to="{{ previewTo }}"
            :disabled="not selected.enabled"
            disabledText="{{ 'notifications.season.disabledOverlay'|trans }}"
        >
          {% if mockEmail %}
            <div {{ stimulus_controller('ferienpass/admin-shadow-root', { highlightTokens: previewMode == 'raw' }) }}>
              <template shadowrootmode="open">{% include mockEmail.message.getHtmlTemplate() with mockEmail.message.getContext() %}</template>
            </div>
          {% else %}
            <p class="px-6 py-5 text-sm text-gray-500 dark:text-gray-400">{{ ('notifications.' ~ selectedType ~ '.1')|trans({}, 'admin') }}</p>
          {% endif %}
        </twig:Admin:MailPreview>

        <p class="mt-3 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
          <twig:ux:icon name="ph:info" class="size-3.5 shrink-0 text-gray-400" /> {{ (previewMode == 'raw' ? 'notifications.season.rawNote' : 'notifications.season.previewNote')|trans }}
        </p>
      </div>

      {# ── right: settings / workflow ── #}
      <aside class="mt-8 lg:mt-0 lg:w-72 lg:shrink-0 lg:pt-6">
        <div class="lg:sticky lg:top-6">

          {# enable/disable #}
          <section class="pb-5">
            <h3 class="mb-3 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ 'notifications.season.forThisEdition'|trans }}</h3>
            <div class="flex items-center gap-3">
              <div class="min-w-0 flex-1">
                <div class="text-sm font-semibold text-gray-900 dark:text-gray-50">{{ 'notifications.season.activeTitle'|trans }}</div>
                <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ (selected.enabled ? 'notifications.season.activeOn' : 'notifications.season.activeOff')|trans }}</div>
              </div>
              <form method="post" action="{{ path('admin_editions_notifications_toggle', { alias: edition.alias }) }}">
                <input type="hidden" name="_token" value="{{ csrf_token('notification_toggle') }}">
                <input type="hidden" name="type" value="{{ selectedType }}">
                <input type="hidden" name="enable" value="{{ selected.enabled ? '0' : '1' }}">
                <button type="submit" role="switch" aria-checked="{{ selected.enabled ? 'true' : 'false' }}"
                        aria-label="{{ 'notifications.season.activeTitle'|trans }}"
                        class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 {{ selected.enabled ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600' }}">
                  {# inline transform: an arbitrary `translate-x-[…]` utility is not reliably compiled from a symlinked bundle template #}
                  <span class="pointer-events-none inline-block size-5 rounded-full bg-white shadow transition-transform" style="transform: translateX({{ selected.enabled ? '22px' : '2px' }})"></span>
                </button>
              </form>
            </div>
          </section>

          {# template (standard / override) #}
          <section class="border-t border-gray-200 py-5 dark:border-white/10">
            <h3 class="mb-3 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ 'notifications.season.template'|trans }}</h3>
            <div class="text-sm font-semibold text-gray-900 dark:text-gray-50">
              {{ 'notifications.season.currentVersion'|trans }}
              <span class="ml-1 rounded-full px-2 py-0.5 text-[10px] font-bold {{ selected.overridden ? 'bg-orange-50 text-orange-700 dark:bg-orange-400/10 dark:text-orange-400' : 'bg-gray-100 text-gray-600 dark:bg-white/10 dark:text-gray-300' }}">
                {{ (selected.overridden ? 'notifications.season.badge.overridden' : 'notifications.season.badge.standard')|trans }}
              </span>
            </div>
            <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ (selected.overridden ? 'notifications.season.overriddenDesc' : 'notifications.season.standardDesc')|trans }}</div>

            {% if selected.overridden %}
              <div class="mt-3 flex items-start gap-2 rounded-lg border border-yellow-600/20 bg-yellow-50 px-3 py-2 text-xs text-yellow-800 dark:border-yellow-400/20 dark:bg-yellow-400/10 dark:text-yellow-500">
                <twig:ux:icon name="ph:warning" class="mt-px size-3.5 shrink-0" /> {{ 'notifications.season.overrideNote'|trans }}
              </div>
            {% endif %}

            <div class="mt-3">
              {% if selected.overridden %}
                <form method="post" action="{{ path('admin_editions_notifications_reset', { alias: edition.alias }) }}" data-turbo-confirm="{{ 'notifications.season.resetConfirm'|trans }}">
                  <input type="hidden" name="_token" value="{{ csrf_token('notification_reset') }}">
                  <input type="hidden" name="type" value="{{ selectedType }}">
                  <button type="submit" class="inline-flex items-center gap-1.5 text-sm font-semibold text-gray-600 hover:text-red-600 dark:text-gray-300 dark:hover:text-red-400">
                    <twig:ux:icon name="ph:arrow-counter-clockwise" class="size-3.5" /> {{ 'notifications.season.reset'|trans }}
                  </button>
                </form>
              {% else %}
                <a href="{{ path('admin_notifications_edit_in_edition', { type: selectedType, edition: edition.alias }) }}" class="inline-flex items-center gap-1 text-sm font-semibold text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300">
                  {{ 'notifications.season.override'|trans }} <span aria-hidden="true">&rarr;</span>
                </a>
              {% endif %}
            </div>
          </section>

          {# workflow: event → action → recipient #}
          {% set metaBase = 'notifications.season.meta.' ~ selectedType %}
          {% set metaEvent = (metaBase ~ '.event')|trans %}{% if metaEvent == metaBase ~ '.event' %}{% set metaEvent = ('notifications.' ~ selectedType ~ '.1')|trans %}{% endif %}
          {% set metaSource = (metaBase ~ '.source')|trans %}{% if metaSource == metaBase ~ '.source' %}{% set metaSource = null %}{% endif %}
          {% set metaTiming = (metaBase ~ '.timing')|trans %}{% if metaTiming == metaBase ~ '.timing' %}{% set metaTiming = null %}{% endif %}
          {% set metaAudience = (metaBase ~ '.audience')|trans %}{% if metaAudience == metaBase ~ '.audience' %}{% set metaAudience = null %}{% endif %}
          <section class="border-t border-gray-200 py-5 dark:border-white/10">
            <h3 class="mb-4 text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ 'notifications.season.flow'|trans }}</h3>

            {% set svgEvent %}<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4.09 12.11a1 1 0 0 0 .77 1.64H11l-1 8 8.91-10.11a1 1 0 0 0-.77-1.64H12l1-8Z"/></svg>{% endset %}
            {% set svgAction %}<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/></svg>{% endset %}
            {% set svgRecipient %}<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>{% endset %}
            {% set actionTitle %}{{ 'notifications.season.flowSend'|trans }} „{{ ('notifications.' ~ selectedType ~ '.0')|trans }}“ {{ (selected.enabled ? 'notifications.season.flowDo' : 'notifications.season.flowDont')|trans }}{% endset %}
            {% set flowItems = [
              { svg: svgEvent, colorStyle: nv.hex(selectedType)|trim, kicker: 'notifications.season.flowEvent'|trans, title: metaEvent, subtitle: metaSource },
              { svg: svgAction, color: (selected.enabled ? 'text-primary-600 dark:text-primary-400' : 'text-gray-400 dark:text-gray-500'), kicker: 'notifications.season.flowAction'|trans, title: actionTitle|trim, subtitle: metaTiming },
              { svg: svgRecipient, color: 'text-gray-500 dark:text-gray-400', kicker: 'notifications.season.flowRecipient'|trans, title: metaAudience ?? '—' },
            ] %}
            <twig:Admin:Timeline :items="flowItems" />
          </section>

        </div>
      </aside>
    </div>
  {% endif %}
{% endblock %}
