// assets/js/ua_flyout.js
(function(){
  function onReady(fn){
    if(document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn);
    else fn();
  }

  onReady(function(){
    const sb = document.getElementById('uaSidebar');
    if(!sb) return;

    // Activate flyout mode (and hide internal submenus via CSS condition)
    document.body.classList.add('ua-flyout-on');

    let fly = null;
    let activeId = null;

    function removeFly(){
      if(fly){ fly.remove(); fly = null; }
      activeId = null;
      sb.querySelectorAll('.ua-sb-group.is-open').forEach(g=>g.classList.remove('is-open'));
    }

    function ensureFly(){
      if(fly) return fly;
      fly = document.createElement('div');
      fly.className = 'ua-sb-flyout';
      document.body.appendChild(fly);
      fly.addEventListener('click', function(e){ e.stopPropagation(); });
      return fly;
    }

    function positionFly(btn){
      if(!fly || !btn) return;
      const br = btn.getBoundingClientRect();
      const sr = sb.getBoundingClientRect();
      const fw = fly.offsetWidth || 260;
      const margin = 12;

      let left = sr.left - fw - margin;  // left of sidebar
      let top  = br.top;

      const vh = window.innerHeight || 800;
      const maxTop = Math.max(10, vh - fly.offsetHeight - 10);
      top = Math.min(Math.max(10, top), maxTop);

      if(left < 10) left = 10;
      fly.style.left = left + 'px';
      fly.style.top  = top + 'px';
    }

    function openGroup(id, btn){
      const group = sb.querySelector('.ua-sb-group[data-ua-group="'+CSS.escape(id)+'"]');
      if(!group) return;

      const sub = group.querySelector('.ua-sb-sub');
      if(!sub) return;

      sb.querySelectorAll('.ua-sb-group.is-open').forEach(g=>g.classList.remove('is-open'));

      const f = ensureFly();
      f.innerHTML = '';

      const title = group.querySelector('.ua-sb-sec-btn .ua-t')?.textContent?.trim() || '';
      const head = document.createElement('div');
      head.className = 'ua-sb-flyout-head';
      head.textContent = title;
      f.appendChild(head);

      const body = document.createElement('div');
      body.className = 'ua-sb-flyout-body';
      sub.querySelectorAll('a').forEach(a=>{
        const c = a.cloneNode(true);
        c.classList.add('ua-sb-flylink');
        body.appendChild(c);
      });
      f.appendChild(body);

      group.classList.add('is-open');
      activeId = id;
      positionFly(btn);
    }

    sb.addEventListener('click', function(ev){
      const btn = ev.target.closest('[data-ua-toggle]');
      if(!btn) return;
      ev.preventDefault();
      ev.stopPropagation();

      const id = btn.getAttribute('data-ua-toggle');
      if(!id) return;

      if(activeId === id){ removeFly(); return; }
      openGroup(id, btn);
    });

    document.addEventListener('click', removeFly);
    document.addEventListener('keydown', e=>{ if(e.key === 'Escape') removeFly(); });

    window.addEventListener('resize', ()=>{
      if(!fly || !activeId) return;
      const btn = sb.querySelector('[data-ua-toggle="'+CSS.escape(activeId)+'"]');
      if(btn) positionFly(btn);
    });

    window.addEventListener('scroll', ()=>{
      if(!fly || !activeId) return;
      const btn = sb.querySelector('[data-ua-toggle="'+CSS.escape(activeId)+'"]');
      if(btn) positionFly(btn);
    }, {passive:true});
  });
})();
