ESPDocs/components/SeriesTabMenu.jsx

"use client";

import { useEffect, useRef, useState } from "react";

export default function SeriesTabMenu({ tabs, isEn = false, isEs = false, isFr = false, isDe = false, locale }) {
	const effectiveIsEn = isEn || locale === "en";
	const effectiveIsEs = isEs || locale === "es";
	const effectiveIsFr = isFr || locale === "fr";
	const effectiveIsDe = isDe || locale === "de";
	const availableTabs = tabs.filter((tab) => tab.available);
	const [activeTab, setActiveTab] = useState(availableTabs[0]?.id);
	const refs = useRef({});

	// Troca manual limpa o hash. Sem isso, depois de abrir o diagrama pelo link e
	// mudar de aba na mão, o hash continuaria em #connections e um novo clique no
	// link não dispararia hashchange e o botão pareceria quebrado.
	const trocarAba = (id) => {
		setActiveTab(id);
		if (window.location.hash) {
			history.replaceState(null, "", window.location.pathname + window.location.search);
		}
	};

	// Abas endereçáveis por hash: #connections abre o diagrama de pinos direto.
	// É o que permite a seção de restrições apontar para cá.
	useEffect(() => {
		const abrirPeloHash = () => {
			const alvo = window.location.hash.replace("#", "");
			if (alvo && availableTabs.some((t) => t.id === alvo)) {
				setActiveTab(alvo);
				// Nenhum elemento tem id="connections", então o navegador não rola
				// sozinho: levamos até as abas na mão.
				const semAnimacao = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
				document.getElementById("diagrama-abas")?.scrollIntoView({
					behavior: semAnimacao ? "auto" : "smooth",
					block: "start",
				});
			}
		};
		abrirPeloHash();
		window.addEventListener("hashchange", abrirPeloHash);
		return () => window.removeEventListener("hashchange", abrirPeloHash);
	}, [availableTabs]);

	// Setas, Home e End movem o foco entre as abas, como no padrão WAI-ARIA.
	const aoTeclar = (evento, indice) => {
		const total = availableTabs.length;
		const destino =
			evento.key === "ArrowRight" ? (indice + 1) % total
			: evento.key === "ArrowLeft" ? (indice - 1 + total) % total
			: evento.key === "Home" ? 0
			: evento.key === "End" ? total - 1
			: null;
		if (destino === null) return;
		evento.preventDefault();
		const id = availableTabs[destino].id;
		trocarAba(id);
		refs.current[id]?.focus();
	};

	if (availableTabs.length === 0) return null;
	const ativa = availableTabs.find((tab) => tab.id === activeTab) ?? availableTabs[0];

	return (
		<div id="diagrama-abas" className="scroll-mt-28">
			<div
				role="tablist"
				aria-label={
					effectiveIsEn
						? "Board and diagram"
						: effectiveIsEs
						? "Placa y diagrama"
						: effectiveIsFr
						? "Carte et schéma"
						: effectiveIsDe
						? "Board und Diagramm"
						: "Placa e diagrama"
				}
				className="no-scrollbar flex gap-2 overflow-x-auto pb-1"
			>
				{availableTabs.map((tab, indice) => (
					<button
						key={tab.id}
						ref={(el) => (refs.current[tab.id] = el)}
						type="button"
						role="tab"
						id={`aba-${tab.id}`}
						aria-selected={ativa.id === tab.id}
						aria-controls={`painel-${tab.id}`}
						tabIndex={ativa.id === tab.id ? 0 : -1}
						onClick={() => trocarAba(tab.id)}
						onKeyDown={(e) => aoTeclar(e, indice)}
						className="chip-btn shrink-0"
					>
						{tab.label}
					</button>
				))}
			</div>

			<div role="tabpanel" id={`painel-${ativa.id}`} aria-labelledby={`aba-${ativa.id}`} className="mt-4">
				{ativa.content}
			</div>
		</div>
	);
}