import { effect } from '@preact/signals-core';
import { currentPage } from './signals.js';
import { setPublicRoots } from './config.js';
import { publicAsset } from './utils/publicAsset.js';

// Monta o portal de documentação. Parametrizado por brand:
//   brand: { logo, logoAlt, title, subtitle, publicRoots }
//   pages, groups: do app (./pages/index.js)
//   buildInfo: do app (./build-info.js)
export function createApp({ brand, pages, groups, buildInfo, mount = document.getElementById('app') }) {
  setPublicRoots(brand.publicRoots || []);

  const app = mount;
  app.className = 'app';

  // --- sidebar ---
  const sidebar = document.createElement('aside');
  sidebar.className = 'sidebar';
  sidebar.innerHTML = `
    <div class="brand">
      <img src="${publicAsset(brand.logo)}" alt="${brand.logoAlt}" />
      <div>
        <strong>${brand.title}</strong>
        <small>${brand.subtitle}</small>
      </div>
    </div>`;

  const nav = document.createElement('nav');
  sidebar.appendChild(nav);

  groups.forEach(({ name, pageIds }) => {
    const g = document.createElement('div');
    g.className = 'group';
    g.textContent = name;
    nav.appendChild(g);
    pageIds.forEach(id => {
      const page = pages[id];
      const btn = document.createElement('button');
      btn.textContent = page.label;
      btn.dataset.id = id;
      btn.addEventListener('click', () => {
        currentPage.value = id;
        location.hash = id;
      });
      nav.appendChild(btn);
    });
  });

  // Footer com versão + link para o repositório
  const footer = document.createElement('div');
  footer.className = 'sidebar-footer';
  const label = buildInfo.tag || `v${buildInfo.version}`;
  const refUrl = buildInfo.tagUrl || buildInfo.commitUrl;
  footer.innerHTML = `
    <a href="${refUrl}" target="_blank" rel="noopener" title="${brand.repoLinkTitle || 'Ver no repositório'}">
      <span class="ver">${label}</span>
      <span class="sha">${buildInfo.sha}${buildInfo.dirty ? '·dirty' : ''}</span>
    </a>`;
  sidebar.appendChild(footer);

  // --- main ---
  const main = document.createElement('main');
  main.className = 'main';
  app.append(sidebar, main);

  // --- mobile menu toggle ---
  const toggle = document.createElement('button');
  toggle.className = 'menu-toggle';
  toggle.setAttribute('aria-label', 'Abrir menu');
  toggle.innerHTML = '<svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>';
  const backdrop = document.createElement('div');
  backdrop.className = 'nav-backdrop';
  const closeNav = () => document.body.classList.remove('nav-open');
  toggle.addEventListener('click', () => document.body.classList.toggle('nav-open'));
  backdrop.addEventListener('click', closeNav);
  nav.addEventListener('click', e => { if (e.target.matches('button[data-id]')) closeNav(); });
  document.body.append(toggle, backdrop);

  // Initial hash routing
  const initial = location.hash.slice(1);
  if (initial && pages[initial]) currentPage.value = initial;
  else currentPage.value = 'overview';

  window.addEventListener('hashchange', () => {
    const id = location.hash.slice(1);
    if (pages[id]) currentPage.value = id;
  });

  effect(() => {
    const id = currentPage.value;
    nav.querySelectorAll('button').forEach(b => {
      b.setAttribute('aria-current', b.dataset.id === id ? 'true' : 'false');
    });
    main.innerHTML = '';
    const page = pages[id];
    if (page) page.render(main);
    main.scrollTo?.(0, 0);
  });
}
