/**
 * Footnotes - Sistema de notas flutuantes (floater)
 */

let activeFloater = null;

document.addEventListener('click', (e) => {
  const fn = e.target.closest('a[href^="#fn:"]');
  const close = e.target.closest('.f-close');

  if (close) {
    closeFloater();
    return;
  }

  if (fn) {
    e.preventDefault();
    e.stopPropagation();
    closeFloater();

    const el = document.getElementById(fn.getAttribute('href').slice(1));
    if (!el) return;

    const clone = el.cloneNode(true);
    clone.querySelector('.footnote-backref')?.remove();

    const parent = fn.closest('p, li');
    const quote = parent ? parent.innerText.slice(0, 40) + '…' : 'Nota';

    openFloater(fn, quote, clone.innerHTML);
    fn.classList.add('active');
  } else if (activeFloater && !e.target.closest('.floater')) {
    closeFloater();
  }
});

function openFloater(target, quote, html) {
  const f = document.createElement('div');
  f.className = 'floater';
  f.innerHTML = `<div class="f-label"><span>comentário</span><span class="f-close" role="button" tabindex="0" aria-label="Fechar nota">×</span></div><div class="f-quote">${quote}</div><div>${html}</div>`;

  document.body.appendChild(f);

  const r = target.getBoundingClientRect();
  const top = window.scrollY + r.bottom + 8;
  const padding = 20;
  let left = window.scrollX + r.left;
  const maxLeft = window.innerWidth - f.offsetWidth - padding;

  if (left > maxLeft) left = Math.max(padding, maxLeft);

  f.style.top = top + 'px';
  f.style.left = left + 'px';

  activeFloater = f;

  // Permitir fechar com Enter ou Space
  f.querySelector('.f-close').addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      closeFloater();
    }
  });
}

function closeFloater() {
  if (activeFloater) {
    activeFloater.remove();
    activeFloater = null;
  }
  document.querySelectorAll('a[href^="#fn:"]').forEach((a) => a.classList.remove('active'));
}

// Fechar com Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeFloater();
});