{% load css_tags %}{% block_css 'enap_designsystem/blocks/mega_menu_include.css' %}
{% load wagtailcore_tags wagtailimages_tags nav_tags %}
{% if mega_menu and mega_menu.items %}

<div class="emm-wrapper">

  <nav class="emm-nav" id="emm-nav-{{ mega_menu.pk }}" aria-label="{{ mega_menu.trigger_label }}">
    <div class="emm-nav__inner">

      {% with logo_block=mega_menu.logo|first %}
        {% if logo_block %}
          {% image logo_block.value original as logo_img %}
          <a href="/" class="emm-nav__logo" aria-label="Página inicial">
            <img src="{{ logo_img.url }}" alt="{{ logo_img.title }}" class="emm-nav__logo-img">
          </a>
        {% endif %}
      {% endwith %}

      <button type="button"
              class="emm-nav__toggle"
              id="emm-nav-toggle-{{ mega_menu.pk }}"
              aria-expanded="false"
              aria-haspopup="dialog"
              aria-controls="emm-mega-panel-{{ mega_menu.pk }}"
              aria-label="Abrir menu"
              onclick="emmToggleMegaMobile('{{ mega_menu.pk }}')">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
          <path d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>

      <div class="emm-nav__items">
        {% for block in mega_menu.items %}
          {% with parent_page=block.value.parent_page label=block.value.custom_label|default:block.value.parent_page.title children=block.value.parent_page|sorted_children %}
            {% if children %}
              <button type="button"
                      class="emm-nav__item"
                      id="emm-nav-item-{{ mega_menu.pk }}-{{ forloop.counter }}"
                      data-area="emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}"
                      aria-expanded="false"
                      aria-haspopup="dialog"
                      aria-controls="emm-mega-panel-{{ mega_menu.pk }}"
                      onclick="emmOpenArea('{{ mega_menu.pk }}', 'emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}', this)">
                {% if block.value.icon %}<i class="material-icons emm-nav__icon" aria-hidden="true">{{ block.value.icon }}</i>{% endif %}
                <span>{{ label }}</span>
                <svg class="emm-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                  <path d="m6 9 6 6 6-6"/>
                </svg>
              </button>
            {% else %}
              <a href="{% pageurl parent_page %}" class="emm-nav__item emm-nav__item--link">
                {% if block.value.icon %}<i class="material-icons emm-nav__icon" aria-hidden="true">{{ block.value.icon }}</i>{% endif %}
                <span>{{ label }}</span>
              </a>
            {% endif %}
          {% endwith %}
        {% endfor %}
      </div>

    </div>
  </nav>

  <div id="emm-mega-panel-{{ mega_menu.pk }}" class="emm-mega" hidden aria-modal="true" role="dialog" aria-label="{{ mega_menu.trigger_label }}">

    <div class="emm-mega__topbar">
      <button type="button" class="emm-mega__back" id="emm-mobile-back-{{ mega_menu.pk }}" onclick="emmMobileBack('{{ mega_menu.pk }}')" aria-label="Voltar" tabindex="-1" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
        Voltar
      </button>
      <span class="emm-mega__topbar-title" id="emm-mobile-title-{{ mega_menu.pk }}">{{ mega_menu.trigger_label }}</span>
      <button type="button" class="emm-mega__close" onclick="emmCloseMega('{{ mega_menu.pk }}')" aria-label="Fechar menu">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

    <div class="emm-mega__inner">

      {# L1 — lista fixa lateral com os mesmos itens da barra de cima, para trocar de seção sem fechar o painel #}
      <div class="emm-mega__l1">
        <ul class="emm-mega__l1-list" role="tablist" aria-orientation="vertical" aria-label="Itens do menu">
          {% for block in mega_menu.items %}
            {% with parent_page=block.value.parent_page label=block.value.custom_label|default:block.value.parent_page.title children=block.value.parent_page|sorted_children %}
              {% if children %}
                <li class="emm-mega__l1-item{% if forloop.first %} emm-mega__l1-item--active{% endif %}"
                    role="tab"
                    id="emm-l1-tab-{{ mega_menu.pk }}-{{ forloop.counter }}"
                    data-area="emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}"
                    tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"
                    aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
                    aria-controls="emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}"
                    onfocus="emmShowArea('{{ mega_menu.pk }}', 'emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}')"
                    onclick="emmL1Click(event, '{{ mega_menu.pk }}', 'emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}', '{{ label|escapejs }}')"
                    onkeydown="emmL1Keydown(event, this, '{{ mega_menu.pk }}')">
                  {% if block.value.icon %}<i class="material-icons emm-mega__l1-icon" aria-hidden="true">{{ block.value.icon }}</i>{% endif %}
                  <span>{{ label }}</span>
                  <span class="emm-mega__l1-arr" aria-hidden="true">›</span>
                </li>
              {% else %}
                <li class="emm-mega__l1-item emm-mega__l1-item--link">
                  <a href="{% pageurl parent_page %}" onclick="emmCloseMega('{{ mega_menu.pk }}')">
                    {% if block.value.icon %}<i class="material-icons emm-mega__l1-icon" aria-hidden="true">{{ block.value.icon }}</i>{% endif %}
                    <span>{{ label }}</span>
                  </a>
                </li>
              {% endif %}
            {% endwith %}
          {% endfor %}
        </ul>
      </div>

      {# Conteúdo — L2/L3/L4 por item (grid dinâmico conforme a profundidade real de filhos); itens sem filhos não têm painel #}
      <div class="emm-mega__content-wrap">
        {% for block in mega_menu.items %}
          {% with parent_page=block.value.parent_page label=block.value.custom_label|default:block.value.parent_page.title children=block.value.parent_page|sorted_children depth=block.value.parent_page|mega_depth %}
            {% if children %}
              <div id="emm-area-{{ mega_menu.pk }}-{{ forloop.counter }}"
                   role="tabpanel"
                   tabindex="-1"
                   class="emm-mega__content{% if forloop.first %} emm-mega__content--visible{% endif %}"
                   aria-labelledby="emm-nav-item-{{ mega_menu.pk }}-{{ forloop.counter }}">
                <a href="{% pageurl parent_page %}" class="emm-mega__area-title" title="Ir para {{ label }}" onclick="emmCloseMega('{{ mega_menu.pk }}')">
                  <i class="material-icons emm-mega__area-title-icon" aria-hidden="true">arrow_forward</i>
                  <span class="emm-mega__area-title-text">{{ label }}</span>
                </a>
                <div class="emm-mega__l2-grid emm-mega__l2-grid--depth-{{ depth }}">
                  {% include "enap_designsystem/blocks/mega_menu/mega_menu_render_section.html" with parent=parent_page depth=depth %}
                </div>
              </div>
            {% endif %}
          {% endwith %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<style>
  #emm-nav-{{ mega_menu.pk }},
  #emm-mega-panel-{{ mega_menu.pk }} {
    --emm-bg: {{ mega_menu.background_color }};
    --emm-text: {{ mega_menu.text_color }};
    --emm-accent: {{ mega_menu.accent_color }};
    --emm-hover: {{ mega_menu.hover_color }};
  }
</style>

<script>
  /* ── Mega Menu por página — namespace "emm", independente do dynamic nav ("dn") ── */
  var _emmLastFocusedEl = null;
  var _emmL3HoverTimer = null;
  var _emmL4HoverTimer = null;

  function _emmIsMobile() { return window.innerWidth <= 767; }

  function emmToggleMegaMobile(pk) {
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (!panel) return;
    if (!panel.hidden) { emmCloseMega(pk); return; }

    var btn = document.getElementById('emm-nav-toggle-' + pk);
    _emmLastFocusedEl = document.activeElement;
    panel.hidden = false;
    if (btn) btn.setAttribute('aria-expanded', 'true');
    _emmMobileReset(pk);
  }

  function emmOpenArea(pk, areaId, btn) {
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (!panel) return;

    var alreadyOpenForThis = !panel.hidden && btn.getAttribute('aria-expanded') === 'true';
    if (alreadyOpenForThis) { emmCloseMega(pk); return; }

    _emmLastFocusedEl = document.activeElement;

    panel.hidden = false;
    emmShowArea(pk, areaId);

    var target = document.getElementById(areaId);
    if (target) target.focus();
  }

  function emmCloseMega(pk) {
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (panel) panel.hidden = true;
    document.querySelectorAll('#emm-nav-' + pk + ' .emm-nav__item').forEach(function(b) {
      b.setAttribute('aria-expanded', 'false');
    });
    var toggleBtn = document.getElementById('emm-nav-toggle-' + pk);
    if (toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false');
    _emmMobileReset(pk);
    if (_emmLastFocusedEl) { _emmLastFocusedEl.focus(); _emmLastFocusedEl = null; }
  }

  /* ── Drill-down mobile: telas L1 → L2 → L3 → L4 deslizam via translateX,
     empilhadas por pk (mesmo padrão do Dynamic Nav, namespace próprio) ── */
  var _emmStacks = {};
  var _emmTr = 'transform 0.28s cubic-bezier(.4,0,.2,1)';

  function _emmPush(pk, outEl, inEl, title) {
    outEl.style.transition = _emmTr;
    inEl.style.transition = _emmTr;
    outEl.style.transform = 'translateX(-100%)';
    inEl.style.transform = 'translateX(0)';
    if (!_emmStacks[pk]) _emmStacks[pk] = [];
    _emmStacks[pk].push({ outEl: outEl, inEl: inEl, title: title });
    _emmMobileBarUpdate(pk);
  }

  function _emmMobileReset(pk) {
    _emmStacks[pk] = [];
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (panel) {
      panel.querySelectorAll(
        '.emm-mega__l1, .emm-mega__content-wrap, .emm-mega__l2-sidebar, .emm-mega__l3-area, .emm-mega__l3-sidebar, .emm-mega__l4-area'
      ).forEach(function(el) {
        el.style.transition = 'none';
        el.style.transform = '';
      });
    }
    _emmMobileBarUpdate(pk);
  }

  function _emmMobileBarUpdate(pk) {
    var back = document.getElementById('emm-mobile-back-' + pk);
    var title = document.getElementById('emm-mobile-title-' + pk);
    if (!back || !title) return;
    var stack = _emmStacks[pk] || [];
    var hasBack = stack.length > 0;
    back.style.visibility = hasBack ? 'visible' : 'hidden';
    back.setAttribute('tabindex', hasBack ? '0' : '-1');
    back.setAttribute('aria-hidden', hasBack ? 'false' : 'true');
    title.textContent = hasBack ? stack[stack.length - 1].title : '{{ mega_menu.trigger_label|escapejs }}';
  }

  function emmMobileBack(pk) {
    var stack = _emmStacks[pk] || [];
    if (stack.length === 0) { emmCloseMega(pk); return; }
    var item = stack.pop();
    item.outEl.style.transition = _emmTr;
    item.inEl.style.transition = _emmTr;
    item.outEl.style.transform = 'translateX(0)';
    item.inEl.style.transform = 'translateX(100%)';
    _emmMobileBarUpdate(pk);
  }

  function emmL1Click(e, pk, areaId, title) {
    if (_emmIsMobile()) { emmMobileDrillL1(e, pk, areaId, title); }
    else { emmShowArea(pk, areaId); }
  }

  function emmMobileDrillL1(e, pk, areaId, title) {
    if (!_emmIsMobile()) return;
    if (e) { e.preventDefault(); e.stopPropagation(); }
    emmShowArea(pk, areaId);
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (!panel) return;
    var l1 = panel.querySelector('.emm-mega__l1');
    var wrap = panel.querySelector('.emm-mega__content-wrap');
    if (l1 && wrap) _emmPush(pk, l1, wrap, title);
  }

  /* Sincroniza o item ativo tanto na barra de cima (emm-nav__item) quanto
     na lista fixa lateral (emm-mega__l1-item) — ambos usam data-area. */
  function emmShowArea(pk, areaId) {
    var panel = document.getElementById('emm-mega-panel-' + pk);
    var nav = document.getElementById('emm-nav-' + pk);
    if (!panel) return;

    panel.querySelectorAll('.emm-mega__content').forEach(function(el) {
      el.classList.remove('emm-mega__content--visible');
    });
    var target = document.getElementById(areaId);
    if (target) target.classList.add('emm-mega__content--visible');

    if (nav) {
      nav.querySelectorAll('.emm-nav__item[data-area]').forEach(function(b) {
        b.setAttribute('aria-expanded', b.dataset.area === areaId ? 'true' : 'false');
      });
    }

    panel.querySelectorAll('.emm-mega__l1-item[data-area]').forEach(function(li) {
      var isActive = li.dataset.area === areaId;
      li.classList.toggle('emm-mega__l1-item--active', isActive);
      li.setAttribute('aria-selected', isActive ? 'true' : 'false');
      li.setAttribute('tabindex', isActive ? '0' : '-1');
    });
  }

  function emmL1Keydown(e, item, pk) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      var labelEl = item.querySelector('span');
      var title = labelEl ? labelEl.textContent.trim() : '';
      if (_emmIsMobile()) { emmMobileDrillL1(e, pk, item.dataset.area, title); }
      else { emmShowArea(pk, item.dataset.area); }
      return;
    }
    var panel = document.getElementById('emm-mega-panel-' + pk);
    if (!panel) return;
    var allItems = Array.from(panel.querySelectorAll('.emm-mega__l1-item[data-area]'));
    var idx = allItems.indexOf(item);

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      if (idx < allItems.length - 1) { var next = allItems[idx + 1]; emmShowArea(pk, next.dataset.area); next.focus(); }
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      if (idx > 0) { var prev = allItems[idx - 1]; emmShowArea(pk, prev.dataset.area); prev.focus(); }
    }
  }

  function emmShowL3Hover(item, panelId) {
    clearTimeout(_emmL3HoverTimer);
    _emmL3HoverTimer = setTimeout(function() { emmShowL3(item, panelId); }, 150);
  }
  function emmCancelL3Hover() { clearTimeout(_emmL3HoverTimer); }

  function emmShowL4Hover(item, panelId) {
    clearTimeout(_emmL4HoverTimer);
    _emmL4HoverTimer = setTimeout(function() { emmShowL4(item, panelId); }, 150);
  }
  function emmCancelL4Hover() { clearTimeout(_emmL4HoverTimer); }

  function emmShowL3(item, panelId) {
    var sidebar = item.closest('.emm-mega__l2-sidebar');
    if (sidebar) {
      sidebar.querySelectorAll('.emm-mega__l2-row--active').forEach(function(r) {
        r.classList.remove('emm-mega__l2-row--active');
      });
    }
    item.classList.add('emm-mega__l2-row--active');

    var panel = document.getElementById(panelId);
    if (panel && panel.parentElement) {
      Array.from(panel.parentElement.children).forEach(function(p) {
        p.classList.remove('emm-mega__l3-panel--visible');
      });
      panel.classList.add('emm-mega__l3-panel--visible');
    }
  }

  function emmShowL4(item, panelId) {
    var sidebar = item.closest('.emm-mega__l3-sidebar');
    if (sidebar) {
      sidebar.querySelectorAll('.emm-mega__l3-row--active').forEach(function(r) {
        r.classList.remove('emm-mega__l3-row--active');
      });
    }
    item.classList.add('emm-mega__l3-row--active');

    var l3panel = item.closest('.emm-mega__l3-panel');
    if (l3panel) {
      l3panel.querySelectorAll('.emm-mega__l4-panel--visible').forEach(function(p) {
        p.classList.remove('emm-mega__l4-panel--visible');
      });
    }
    var panel = document.getElementById(panelId);
    if (panel) panel.classList.add('emm-mega__l4-panel--visible');
  }

  document.addEventListener('keydown', function(e) {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('.emm-mega:not([hidden])').forEach(function(panel) {
      var pk = panel.id.replace('emm-mega-panel-', '');
      emmCloseMega(pk);
    });
  });

  document.addEventListener('click', function(e) {
    document.querySelectorAll('.emm-mega:not([hidden])').forEach(function(panel) {
      var pk = panel.id.replace('emm-mega-panel-', '');
      var nav = document.getElementById('emm-nav-' + pk);
      if (!e.target.closest('#emm-mega-panel-' + pk) && (!nav || !e.target.closest('#emm-nav-' + pk))) {
        emmCloseMega(pk);
      }
    });

  });

  window.addEventListener('resize', function() {
    document.querySelectorAll('.emm-mega:not([hidden])').forEach(function(panel) {
      if (!_emmIsMobile()) _emmMobileReset(panel.id.replace('emm-mega-panel-', ''));
    });
  });

  /* Delegação de clique para L2→L3 e L3→L4 (desktop e mobile). Tocar no
     texto do link navega direto; tocar no restante da linha (seta) expande. */
  document.addEventListener('click', function(e) {
    var l2Row = e.target.closest('.emm-mega__l2-row[data-l3]');
    if (l2Row) {
      if (e.target.closest('.emm-mega__l2-link')) return;
      e.preventDefault();
      var pk = l2Row.closest('.emm-mega').id.replace('emm-mega-panel-', '');
      var panelId = l2Row.dataset.l3;
      var linkEl = l2Row.querySelector('.emm-mega__l2-link');
      var title = linkEl ? linkEl.textContent.trim() : '';
      emmShowL3(l2Row, panelId);
      if (_emmIsMobile()) {
        var sidebar = l2Row.closest('.emm-mega__l2-sidebar');
        var content = l2Row.closest('.emm-mega__content');
        var l3area = content ? content.querySelector('.emm-mega__l3-area') : null;
        if (sidebar && l3area) _emmPush(pk, sidebar, l3area, title);
      }
      return;
    }

    var l3Row = e.target.closest('.emm-mega__l3-row[data-l4]');
    if (l3Row) {
      if (e.target.closest('.emm-mega__l3-link')) return;
      e.preventDefault();
      var pk2 = l3Row.closest('.emm-mega').id.replace('emm-mega-panel-', '');
      var panelId2 = l3Row.dataset.l4;
      var linkEl2 = l3Row.querySelector('.emm-mega__l3-link');
      var title2 = linkEl2 ? linkEl2.textContent.trim() : '';
      emmShowL4(l3Row, panelId2);
      if (_emmIsMobile()) {
        var sidebar2 = l3Row.closest('.emm-mega__l3-sidebar');
        var l3panel = l3Row.closest('.emm-mega__l3-panel');
        var l4area = l3panel ? l3panel.querySelector('.emm-mega__l4-area') : null;
        if (sidebar2 && l4area) _emmPush(pk2, sidebar2, l4area, title2);
      }
    }
  }, true);
</script>

{% endif %}