/**
 * <Separadores> — a barra de separadores de uma ficha.
 *
 *   <Separadores
 *     rotulo="Secções da conta"
 *     separadores={[{ chave: 'conta', rotulo: 'Conta' }, { chave: 'actividade', rotulo: 'Actividade' }]}
 *     activo={activo}
 *     aoMudar={setActivo}
 *   />
 *   <PainelSeparador chave="conta" activo={activo}>…</PainelSeparador>
 *
 * Segue o padrão WAI-ARIA de separadores: uma só paragem de Tab na lista, e
 * as setas (mais Home e End) mudam de separador. Sem isto, quem navega por
 * teclado teria de tabular por todos os separadores para chegar ao conteúdo.
 *
 * O separador activo vive em quem usa isto — normalmente espelhado no URL com
 * `?separador=`, para uma ficha poder ser enviada já aberta no sítio certo.
 */

function Separadores({ rotulo, separadores, activo, aoMudar }) {
  const refs = React.useRef({});

  function aoTeclar(e, i) {
    const n = separadores.length;
    const destino =
      e.key === 'ArrowRight' ? (i + 1) % n
      : e.key === 'ArrowLeft' ? (i - 1 + n) % n
      : e.key === 'Home' ? 0
      : e.key === 'End' ? n - 1
      : null;
    if (destino === null) return;
    e.preventDefault();
    const alvo = separadores[destino].chave;
    aoMudar(alvo);
    // O foco acompanha a selecção: numa lista de separadores, é o comportamento esperado.
    if (refs.current[alvo]) refs.current[alvo].focus();
  }

  return (
    <div role="tablist" aria-label={rotulo} className="flex flex-wrap gap-x-6 border-b border-border">
      {separadores.map((s, i) => {
        const seleccionado = s.chave === activo;
        return (
          <button
            key={s.chave}
            ref={(el) => { refs.current[s.chave] = el; }}
            type="button"
            role="tab"
            id={`separador-${s.chave}`}
            aria-selected={seleccionado}
            aria-controls={`painel-${s.chave}`}
            tabIndex={seleccionado ? 0 : -1}
            onClick={() => aoMudar(s.chave)}
            onKeyDown={(e) => aoTeclar(e, i)}
            className={`-mb-px border-b-2 py-3 text-xs uppercase tracking-wider outline-none focus-visible:ring-1 focus-visible:ring-accent ${
              seleccionado
                ? 'border-primary text-primary'
                : 'border-transparent text-muted-foreground hover:text-foreground'
            }`}
          >
            {s.rotulo}
          </button>
        );
      })}
    </div>
  );
}

/** O conteúdo de um separador. Só o activo está no DOM. */
function PainelSeparador({ chave, activo, children }) {
  if (chave !== activo) return null;
  return (
    <div role="tabpanel" id={`painel-${chave}`} aria-labelledby={`separador-${chave}`} tabIndex={0} className="pt-6 outline-none">
      {children}
    </div>
  );
}