// Roteamento por URL.
//
// O site era um SPA de uma URL só: navegar trocava estado do React e a
// barra de endereço nunca mudava. Ninguém conseguia mandar link de uma
// página, o botão voltar saía do site, e nenhuma página podia ranquear
// sozinha na busca.
//
// ATENÇÃO: o build.mjs lê os caminhos daqui por regex para gerar o
// _redirects do Cloudflare Pages. Se mudar a forma da linha
// "caminho: '/algo'", ajuste o build junto — o npm run check reclama se
// as duas listas divergirem.

const ROTAS = [
  { chave: 'home', caminho: '/', menu: 'Início', titulo: null },
  { chave: 'ia', caminho: '/ia-e-agora', menu: 'IA e agora?', titulo: 'IA e agora? — A IA vai matar a profissão de programador?' },
  { chave: 'community', caminho: '/comunidade', menu: 'Comunidade', titulo: 'Comunidade' },
  { chave: 'manifesto', caminho: '/manifesto', menu: 'Manifesto', titulo: 'Manifesto — Antes do código, vem a consciência' },
  { chave: 'about', caminho: '/sobre', menu: 'Sobre', titulo: 'Sobre — Marcelo Castelo Branco' },
  { chave: 'transparencia', caminho: '/transparencia', menu: 'Como este site é feito', titulo: 'Como este site é feito' },
];

const TITULO_BASE = 'MarceloCastelo.IO — Arquitetura de software e engenharia enterprise';
const ORIGEM = 'https://marcelocastelo.io';

function rotaPorCaminho(caminho) {
  // tolera barra no fim: /sobre e /sobre/ são a mesma página
  const limpo = caminho.length > 1 ? caminho.replace(/\/+$/, '') : caminho;
  return ROTAS.find(r => r.caminho === limpo) || ROTAS[0];
}

function rotaPorChave(chave) {
  return ROTAS.find(r => r.chave === chave) || ROTAS[0];
}

// title e canonical acompanham a rota: sem isso, compartilhar /manifesto
// mostraria o título da home, e o canonical apontaria todo mundo para a raiz.
function aplicarMetadados(rota) {
  document.title = rota.titulo ? `${rota.titulo} — MarceloCastelo.IO` : TITULO_BASE;
  let canonical = document.querySelector('link[rel="canonical"]');
  if (!canonical) {
    canonical = document.createElement('link');
    canonical.rel = 'canonical';
    document.head.appendChild(canonical);
  }
  canonical.href = ORIGEM + (rota.caminho === '/' ? '/' : rota.caminho);
}

function useRota() {
  const [chave, setChave] = React.useState(() => rotaPorCaminho(window.location.pathname).chave);

  // botão voltar e avançar do navegador
  React.useEffect(() => {
    const aoVoltar = () => setChave(rotaPorCaminho(window.location.pathname).chave);
    window.addEventListener('popstate', aoVoltar);
    return () => window.removeEventListener('popstate', aoVoltar);
  }, []);

  React.useEffect(() => {
    aplicarMetadados(rotaPorChave(chave));
  }, [chave]);

  const navegar = React.useCallback((novaChave) => {
    const rota = rotaPorChave(novaChave);
    if (window.location.pathname !== rota.caminho) {
      window.history.pushState({ chave: rota.chave }, '', rota.caminho);
    }
    setChave(rota.chave);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, []);

  return [chave, navegar];
}

// Link de verdade: href real para o rastreador seguir e para o visitante
// abrir em outra aba, com clique simples interceptado para não recarregar.
// Ctrl, Cmd, shift e botão do meio passam direto para o navegador.
function Link({ para, onNavigate, style, className, children, ...resto }) {
  const rota = rotaPorChave(para);
  const aoClicar = (e) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
    e.preventDefault();
    onNavigate && onNavigate(para);
  };
  return (
    <a href={rota.caminho} onClick={aoClicar} style={style} className={className} {...resto}>
      {children}
    </a>
  );
}

function Breadcrumb({ chave, onNavigate }) {
  if (chave === 'home') return null;
  const rota = rotaPorChave(chave);
  return (
    <nav aria-label="Você está aqui" style={{ padding: 'var(--space-5) var(--space-7) 0', maxWidth: 1180, margin: '0 auto' }}>
      <ol style={{ listStyle: 'none', display: 'flex', alignItems: 'center', gap: 8, padding: 0, margin: 0, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
        <li>
          <Link para="home" onNavigate={onNavigate} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>Início</Link>
        </li>
        <li aria-hidden="true" style={{ color: 'var(--border-default)' }}>/</li>
        <li aria-current="page" style={{ color: 'var(--accent-strong)' }}>{rota.menu}</li>
      </ol>
    </nav>
  );
}

Object.assign(window, { ROTAS, rotaPorChave, rotaPorCaminho, useRota, Link, Breadcrumb });