"use client";

import { useState, useEffect, useMemo, useRef, Suspense } from "react";
import { createPortal } from "react-dom";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { AlertTriangle, CheckCircle, List, Grid, Search, Sliders, X, Zap } from "lucide-react";

/*
 * As cores abaixo são dado de visualização: identificam o tipo de função do
 * pino no diagrama. O texto nunca fica sobre elas; elas aparecem só como borda
 * ou ponto, e o rótulo usa as cores do tema (contraste AAA).
 */
const FILTER_CATEGORIES = [
	{ id: "All", name: "Todos", color: "#8b5cf6" }, // purple
	{ id: "GND", name: "Terra (GND)", color: "#64748b" }, // slate
	{ id: "Power", name: "Alimentação", color: "#ef4444" }, // red
	{ id: "GPIO", name: "GPIO", color: "#22c55e" }, // green
	{ id: "Low Power", name: "GPIO LP", color: "#f59e0b" }, // amber
	{ id: "ADC", name: "ADC", color: "#ec4899" }, // pink
	{ id: "DAC", name: "DAC", color: "#a855f7" }, // purple
	{ id: "Touch", name: "Touch", color: "#06b6d4" }, // cyan
	{ id: "UART", name: "UART", color: "#3b82f6" }, // blue
	{ id: "SPI", name: "SPI", color: "#f43f5e" }, // rose
	{ id: "USB", name: "USB", color: "#a855f7" }, // purple
	{ id: "Clock", name: "Clock", color: "#eab308" }, // yellow
	{ id: "JTAG", name: "JTAG", color: "#6366f1" }, // indigo
	{ id: "Strapping", name: "Inicialização", color: "#dc2626" }, // red
	{ id: "DSI", name: "Display (DSI)", color: "#f97316" }, // orange
	{ id: "CSI", name: "Câmera (CSI)", color: "#14b8a6" }, // teal
	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" }, // sky
	{ id: "SD", name: "Cartão SD", color: "#10b981" }, // emerald
	{ id: "I2C", name: "I2C", color: "#f59e0b" }, // amber
	{ id: "Antena", name: "Antena", color: "#06b6d4" }, // cyan
];

const FILTER_CATEGORIES_EN = [
	{ id: "All", name: "All", color: "#8b5cf6" },
	{ id: "GND", name: "Ground (GND)", color: "#64748b" },
	{ id: "Power", name: "Power", color: "#ef4444" },
	{ id: "GPIO", name: "GPIO", color: "#22c55e" },
	{ id: "Low Power", name: "LP GPIO", color: "#f59e0b" },
	{ id: "ADC", name: "ADC", color: "#ec4899" },
	{ id: "DAC", name: "DAC", color: "#a855f7" },
	{ id: "Touch", name: "Touch", color: "#06b6d4" },
	{ id: "UART", name: "UART", color: "#3b82f6" },
	{ id: "SPI", name: "SPI", color: "#f43f5e" },
	{ id: "USB", name: "USB", color: "#a855f7" },
	{ id: "Clock", name: "Clock", color: "#eab308" },
	{ id: "JTAG", name: "JTAG", color: "#6366f1" },
	{ id: "Strapping", name: "Boot mode", color: "#dc2626" },
	{ id: "DSI", name: "Display (DSI)", color: "#f97316" },
	{ id: "CSI", name: "Camera (CSI)", color: "#14b8a6" },
	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" },
	{ id: "SD", name: "SD Card", color: "#10b981" },
	{ id: "I2C", name: "I2C", color: "#f59e0b" },
	{ id: "Antena", name: "Antenna", color: "#06b6d4" },
];

const FILTER_CATEGORIES_ES = [
	{ id: "All", name: "Todos", color: "#8b5cf6" },
	{ id: "GND", name: "Tierra (GND)", color: "#64748b" },
	{ id: "Power", name: "Alimentación", color: "#ef4444" },
	{ id: "GPIO", name: "GPIO", color: "#22c55e" },
	{ id: "Low Power", name: "GPIO LP", color: "#f59e0b" },
	{ id: "ADC", name: "ADC", color: "#ec4899" },
	{ id: "DAC", name: "DAC", color: "#a855f7" },
	{ id: "Touch", name: "Touch", color: "#06b6d4" },
	{ id: "UART", name: "UART", color: "#3b82f6" },
	{ id: "SPI", name: "SPI", color: "#f43f5e" },
	{ id: "USB", name: "USB", color: "#a855f7" },
	{ id: "Clock", name: "Reloj", color: "#eab308" },
	{ id: "JTAG", name: "JTAG", color: "#6366f1" },
	{ id: "Strapping", name: "Arranque (Boot)", color: "#dc2626" },
	{ id: "DSI", name: "Pantalla (DSI)", color: "#f97316" },
	{ id: "CSI", name: "Cámara (CSI)", color: "#14b8a6" },
	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" },
	{ id: "SD", name: "Tarjeta SD", color: "#10b981" },
	{ id: "I2C", name: "I2C", color: "#f59e0b" },
	{ id: "Antena", name: "Antena", color: "#06b6d4" },
];

const FILTER_CATEGORIES_FR = [
	{ id: "All", name: "Tous", color: "#8b5cf6" },
	{ id: "GND", name: "Masse (GND)", color: "#64748b" },
	{ id: "Power", name: "Alimentation", color: "#ef4444" },
	{ id: "GPIO", name: "GPIO", color: "#22c55e" },
	{ id: "Low Power", name: "GPIO LP", color: "#f59e0b" },
	{ id: "ADC", name: "ADC", color: "#ec4899" },
	{ id: "DAC", name: "DAC", color: "#a855f7" },
	{ id: "Touch", name: "Touch", color: "#06b6d4" },
	{ id: "UART", name: "UART", color: "#3b82f6" },
	{ id: "SPI", name: "SPI", color: "#f43f5e" },
	{ id: "USB", name: "USB", color: "#a855f7" },
	{ id: "Clock", name: "Horloge", color: "#eab308" },
	{ id: "JTAG", name: "JTAG", color: "#6366f1" },
	{ id: "Strapping", name: "Démarrage (Boot)", color: "#dc2626" },
	{ id: "DSI", name: "Affichage (DSI)", color: "#f97316" },
	{ id: "CSI", name: "Caméra (CSI)", color: "#14b8a6" },
	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" },
	{ id: "SD", name: "Carte SD", color: "#10b981" },
	{ id: "I2C", name: "I2C", color: "#f59e0b" },
	{ id: "Antenne", name: "Antenne", color: "#06b6d4" },
];

const FILTER_CATEGORIES_DE = [
	{ id: "All", name: "Alle", color: "#8b5cf6" },
	{ id: "GND", name: "Masse (GND)", color: "#64748b" },
	{ id: "Power", name: "Stromversorgung", color: "#ef4444" },
	{ id: "GPIO", name: "GPIO", color: "#22c55e" },
	{ id: "Low Power", name: "LP GPIO", color: "#f59e0b" },
	{ id: "ADC", name: "ADC", color: "#ec4899" },
	{ id: "DAC", name: "DAC", color: "#a855f7" },
	{ id: "Touch", name: "Touch", color: "#06b6d4" },
	{ id: "UART", name: "UART", color: "#3b82f6" },
	{ id: "SPI", name: "SPI", color: "#f43f5e" },
	{ id: "USB", name: "USB", color: "#a855f7" },
	{ id: "Clock", name: "Takt", color: "#eab308" },
	{ id: "JTAG", name: "JTAG", color: "#6366f1" },
	{ id: "Strapping", name: "Bootmodus", color: "#dc2626" },
	{ id: "DSI", name: "Display (DSI)", color: "#f97316" },
	{ id: "CSI", name: "Kamera (CSI)", color: "#14b8a6" },
	{ id: "Ethernet", name: "Ethernet", color: "#0284c7" },
	{ id: "SD", name: "SD-Karte", color: "#10b981" },
	{ id: "I2C", name: "I2C", color: "#f59e0b" },
	{ id: "Antenne", name: "Antenne", color: "#06b6d4" },
];
const FILTER_CATEGORIES_ZH = [
	{ id: "All", name: "全部", color: "#8b5cf6" },
	{ id: "GND", name: "接地（GND）", color: "#64748b" },
	{ id: "Power", name: "电源", color: "#ef4444" },
	{ id: "GPIO", name: "GPIO", color: "#22c55e" },
	{ id: "Low Power", name: "低功耗 GPIO", color: "#f59e0b" },
	{ id: "ADC", name: "ADC", color: "#ec4899" },
	{ id: "DAC", name: "DAC", color: "#a855f7" },
	{ id: "Touch", name: "触摸", color: "#06b6d4" },
	{ id: "UART", name: "UART", color: "#3b82f6" },
	{ id: "SPI", name: "SPI", color: "#f43f5e" },
	{ id: "USB", name: "USB", color: "#a855f7" },
	{ id: "Clock", name: "时钟", color: "#eab308" },
	{ id: "JTAG", name: "JTAG", color: "#6366f1" },
	{ id: "Strapping", name: "启动配置", color: "#dc2626" },
	{ id: "DSI", name: "显示（DSI）", color: "#f97316" },
	{ id: "CSI", name: "摄像头（CSI）", color: "#14b8a6" },
	{ id: "Ethernet", name: "以太网", color: "#0284c7" },
	{ id: "SD", name: "SD 卡", color: "#10b981" },
	{ id: "I2C", name: "I2C", color: "#f59e0b" },
	{ id: "Antena", name: "天线", color: "#06b6d4" },
];

const type_colors = {
	power: "#ef4444", // high-voltage red
	ground: "#64748b", // slate gray
	io: "#22c55e", // laser green
	analog: "#ec4899", // dynamic pink
	dedicated: "#3b82f6", // electric blue
	nc: "#94a3b8", // muted gray
};

/**
 * Aceita ?pinos=28,30,31&motivo=... (gerado pela busca do site): mostra só
 * esses pinos, pelo número físico, com um aviso para voltar à lista completa.
 * O Suspense é exigido por useSearchParams em páginas estáticas.
 */
export default function ConnectionsDiagram(props) {
	return (
		<Suspense fallback={null}>
			<ConnectionsDiagramInner {...props} />
		</Suspense>
	);
}

function ConnectionsDiagramInner({ connections, serie }) {
	const params = useSearchParams();
	const pathname = usePathname();
	const isEn = pathname?.startsWith("/en");
	const isEs = pathname?.startsWith("/es");
	const isFr = pathname?.startsWith("/fr");
	const isDe = pathname?.startsWith("/de");
	const isZh = pathname?.startsWith("/zh-CN");
	const router = useRouter();
	const pinosFiltro = useMemo(() => new Set((params.get("pinos") ?? "").split(",").filter(Boolean)), [params]);
	const motivoFiltro = params.get("motivo") ?? "";
	const [activeFilter, setActiveFilter] = useState("All");
	const [selectedConnection, setSelectedConnection] = useState(null);
	const [searchQuery, setSearchQuery] = useState("");
	const [viewMode, setViewMode] = useState("grid");
	const [mounted, setMounted] = useState(false);
	const dialogRef = useRef(null);
	const gatilhoRef = useRef(null);

	const filterCategories = isEn
		? FILTER_CATEGORIES_EN
		: isEs
		? FILTER_CATEGORIES_ES
		: isFr
		? FILTER_CATEGORIES_FR
		: isZh ? FILTER_CATEGORIES_ZH : isDe
		? FILTER_CATEGORIES_DE
		: FILTER_CATEGORIES;

	useEffect(() => {
		setMounted(true);
	}, []);

	const isConnectionVisible = (connection) => {
		const matchesFilter = activeFilter === "All" || connection.categorias.includes(activeFilter);
		const matchesSearch =
			searchQuery === "" ||
			connection.nome.toLowerCase().includes(searchQuery.toLowerCase()) ||
			connection.numero.toString().toLowerCase().includes(searchQuery.toLowerCase());
		const matchesPinos = pinosFiltro.size === 0 || pinosFiltro.has(String(connection.numero));
		return matchesFilter && matchesSearch && matchesPinos;
	};

	const getCategoryColor = (category) => {
		const filter = filterCategories.find((f) => f.id === category);
		return filter?.color || "#64748b";
	};

	const nomeCategoria = (cat) => {
		if (cat === "Strapping") {
			return isEn ? "Boot mode" : isEs ? "Arranque (Boot)" : isFr ? "Démarrage (Boot)" : isZh ? "启动配置" : isDe ? "Bootmodus" : "Inicialização";
		}
		if (isEn) {
			const found = FILTER_CATEGORIES_EN.find((f) => f.id === cat);
			if (found) return found.name;
		}
		if (isEs) {
			const found = FILTER_CATEGORIES_ES.find((f) => f.id === cat);
			if (found) return found.name;
		}
		if (isFr) {
			const found = FILTER_CATEGORIES_FR.find((f) => f.id === cat);
			if (found) return found.name;
		}
		if (isDe) {
			const found = FILTER_CATEGORIES_DE.find((f) => f.id === cat);
			if (found) return found.name;
		}
		if (isZh) {
			const found = FILTER_CATEGORIES_ZH.find((f) => f.id === cat);
			if (found) return found.name;
		}
		return cat;
	};

	const visibleConnections = useMemo(() => connections.filter(isConnectionVisible), [connections, activeFilter, searchQuery, pinosFiltro]);

	const mostrarTodos = () => router.replace(`${pathname}#connections`, { scroll: false });

	const abrir = (connection, evento) => {
		gatilhoRef.current = evento.currentTarget;
		setSelectedConnection(connection);
	};

	const fechar = () => {
		setSelectedConnection(null);
		gatilhoRef.current?.focus?.();
	};

	// Diálogo: Esc fecha, o foco entra nele, fica preso enquanto aberto e volta ao pino de origem.
	useEffect(() => {
		if (!selectedConnection) return;
		const dialogo = dialogRef.current;
		const focaveis = () => dialogo?.querySelectorAll('button, [href], input, [tabindex]:not([tabindex="-1"])') ?? [];
		focaveis()[0]?.focus();

		const aoTeclar = (e) => {
			if (e.key === "Escape") {
				fechar();
				return;
			}
			if (e.key !== "Tab") return;
			const itens = [...focaveis()];
			if (itens.length === 0) return;
			const primeiro = itens[0];
			const ultimo = itens[itens.length - 1];
			if (e.shiftKey && document.activeElement === primeiro) {
				e.preventDefault();
				ultimo.focus();
			} else if (!e.shiftKey && document.activeElement === ultimo) {
				e.preventDefault();
				primeiro.focus();
			}
		};

		document.addEventListener("keydown", aoTeclar);
		document.body.style.overflow = "hidden";
		return () => {
			document.removeEventListener("keydown", aoTeclar);
			document.body.style.overflow = "";
		};
	}, [selectedConnection]);

	if (!connections || connections.length === 0) {
		return (
			<div className="px-4 py-14 text-center">
				<Sliders className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
				<p className="mt-4 font-display text-xl font-semibold text-ink">
					{isEn ? "Pinout diagram unavailable" : isEs ? "Diagrama de conexiones no disponible" : isFr ? "Brochage non disponible" : isZh ? "连接图暂不可用" : isDe ? "Pinbelegungsdiagramm nicht verfügbar" : "Diagrama de conexões indisponível"}
				</p>
				<p className="mt-1 text-sm text-muted">
					{isEn
						? "This model does not yet have a detailed pinout and bus map."
						: isEs
						? "Este modelo todavía no dispone de un mapa detallado de conexiones y buses."
						: isFr
						? "Ce modèle ne dispose pas encore d'un plan détaillé des broches et des bus."
						: isZh ? "该型号尚无详细的连接与总线图。" : isDe
						? "Dieses Modell verfügt noch über keinen detaillierten Pinbelegungs- und Busplan."
						: "Este modelo ainda não tem um mapa detalhado de conexões e barramentos."}
				</p>
			</div>
		);
	}

	const numeroCurto = (c) => (typeof c.numero === "number" ? c.numero : String(c.numero).substring(0, 4));

	return (
		<div className="space-y-6">
			<div>
				<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
					{isEn ? "Interactive pinout diagram" : isEs ? "Diagrama de conexiones interactivo" : isFr ? "Brochage interactif" : isZh ? "交互式连接图" : isDe ? "Interaktives Pinbelegungsdiagramm" : "Diagrama de conexões interativo"}
				</h2>
				<p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted">
					{isEn ? (
						`All connections and multiplexing for the ${serie.nome_completo}. Search by name or number, filter by function, and open a pin to see details.`
					) : isEs ? (
						`Todas las conexiones y la multiplexación del ${serie.nome_completo}. Busque por nombre o número, filtre por función y abra un pin para ver los detalles.`
					) : isFr ? (
						`Toutes les connexions et le multiplexage de l'${serie.nome_completo}. Recherchez par nom ou numéro, filtrez par fonction et ouvrez une broche pour voir les détails.`
					) : isZh ? ( `${serie.nome_completo} 的全部连接与复用。可按名称或编号搜索、按功能筛选，并展开引脚查看详情。` ) : isDe ? (
						`Alle Anschlüsse und das Multiplexing des ${serie.nome_completo}. Suchen Sie nach Name oder Nummer, filtern Sie nach Funktion und öffnen Sie einen Pin für Details.`
					) : (
						`Todas as conexões e a multiplexação do ${serie.nome_completo}. Busque por nome ou número, filtre por função e abra um pino para ver os detalhes.`
					)}
				</p>
			</div>

			{pinosFiltro.size > 0 && (
				<div role="status" className="callout flex flex-wrap items-center justify-between gap-3">
					<p className="text-sm text-ink">
						<strong className="font-semibold">
							{isEn ? "Filtered by search:" : isEs ? "Filtrado por la búsqueda:" : isFr ? "Filtré par la recherche :" : isZh ? "按搜索筛选：" : isDe ? "Nach Suche gefiltert:" : "Filtrado pela busca:"}
						</strong>{" "}
						{motivoFiltro || (isEn ? "selected pins" : isEs ? "pines seleccionados" : isFr ? "broches sélectionnées" : isZh ? "个引脚已选中" : isDe ? "ausgewählte Pins" : "pinos selecionados")} ({pinosFiltro.size}{" "}
						{pinosFiltro.size === 1
							? (isEn ? "pin" : isEs ? "pin" : isFr ? "broche" : isZh ? "个引脚" : isDe ? "Pin" : "pino")
							: (isEn ? "pins" : isEs ? "pines" : isFr ? "broches" : isZh ? "个引脚" : isDe ? "Pins" : "pinos")})
					</p>
					<button type="button" onClick={mostrarTodos} className="btn btn-ghost btn-sm">
						{isEn ? "Show all pins" : isEs ? "Mostrar todos los pines" : isFr ? "Afficher toutes les broches" : isZh ? "显示全部引脚" : isDe ? "Alle Pins anzeigen" : "Mostrar todos os pinos"}
					</button>
				</div>
			)}

			<div className="flex flex-col gap-3 sm:flex-row">
				<div className="relative flex-1">
					<label htmlFor="busca-pino" className="sr-only">
						{isEn ? "Search connection by name or number" : isEs ? "Buscar conexión por nombre o número" : isFr ? "Rechercher une connexion par nom ou numéro" : isZh ? "按名称或编号搜索连接" : isDe ? "Anschluss nach Name oder Nummer suchen" : "Buscar conexão por nome ou número"}
					</label>
					<Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" aria-hidden="true" />
					<input
						id="busca-pino"
						type="search"
						placeholder={
							isEn
								? "Search pin (e.g.: GPIO1, TXD, XTAL)"
								: isEs
								? "Buscar pin (ej.: GPIO1, TXD, XTAL)"
								: isFr
								? "Rechercher une broche (ex. : GPIO1, TXD, XTAL)"
								: isZh ? "搜索引脚（例如：GPIO1、TXD、XTAL）" : isDe
								? "Pin suchen (z. B.: GPIO1, TXD, XTAL)"
								: "Buscar pino (ex.: GPIO1, TXD, XTAL)"
						}
						value={searchQuery}
						onChange={(e) => setSearchQuery(e.target.value)}
						autoComplete="off"
						className="field pl-11 pr-4 text-sm"
					/>
				</div>
				<div role="group" aria-label={isEn ? "Display mode" : isEs ? "Modo de visualización" : isFr ? "Mode d'affichage" : isZh ? "显示模式" : isDe ? "Anzeigemodus" : "Modo de exibição"} className="flex gap-2">
					<button type="button" onClick={() => setViewMode("grid")} aria-pressed={viewMode === "grid"} className="chip-btn">
						<Grid className="h-4 w-4" aria-hidden="true" />
						{isEn ? "Grid" : isEs ? "Cuadrícula" : isFr ? "Grille" : isZh ? "网格" : isDe ? "Raster" : "Grade"}
					</button>
					<button type="button" onClick={() => setViewMode("list")} aria-pressed={viewMode === "list"} className="chip-btn">
						<List className="h-4 w-4" aria-hidden="true" />
						{isEn ? "List" : isEs ? "Lista" : isFr ? "Liste" : isZh ? "列表" : isDe ? "Liste" : "Lista"}
					</button>
				</div>
			</div>

			<div>
				<div className="flex items-center justify-between gap-3">
					<h3 className="text-sm font-semibold text-ink">{isEn ? "Pin function" : isEs ? "Función del pin" : isFr ? "Fonction de la broche" : isZh ? "引脚功能" : isDe ? "Pin-Funktion" : "Função do pino"}</h3>
					<p role="status" aria-live="polite" className="text-sm text-muted">
						{isEn ? (
							`${visibleConnections.length} of ${connections.length} pins`
						) : isEs ? (
							`${visibleConnections.length} de ${connections.length} pines`
						) : isFr ? (
							`${visibleConnections.length} sur ${connections.length} broches`
						) : isZh ? ( `共 ${connections.length} 个引脚，显示 ${visibleConnections.length} 个` ) : isDe ? (
							`${visibleConnections.length} von ${connections.length} Pins`
						) : (
							`${visibleConnections.length} de ${connections.length} pinos`
						)}
					</p>
				</div>
				<div role="group" aria-label={isEn ? "Filter by function" : isEs ? "Filtrar por función" : isFr ? "Filtrer par fonction" : isZh ? "按功能筛选" : isDe ? "Nach Funktion filtern" : "Filtrar por função"} className="mt-3 flex flex-wrap gap-2">
					{filterCategories.map((filter) => {
						const isActive = activeFilter === filter.id;
						const count = connections.filter((c) => (filter.id === "All" ? true : c.categorias.includes(filter.id))).length;
						if (count === 0 && !isActive) return null; // filtros que não se aplicam a este chip
						return (
							<button key={filter.id} type="button" onClick={() => setActiveFilter(filter.id)} aria-pressed={isActive} className="chip-btn">
								{filter.id !== "All" && <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: filter.color }} aria-hidden="true" />}
								{filter.name}
								<span className="tabular-nums opacity-80">{count}</span>
							</button>
						);
					})}
				</div>
			</div>

			{visibleConnections.length === 0 ? (
				<div className="rounded-2xl border border-dashed border-line-strong px-6 py-12 text-center">
					<Search className="mx-auto h-8 w-8 text-muted" aria-hidden="true" />
					<p className="mt-3 font-semibold text-ink">{isEn ? "No connections found" : isEs ? "No se encontraron conexiones" : isFr ? "Aucune connexion trouvée" : isZh ? "未找到连接" : isDe ? "Keine Anschlüsse gefunden" : "Nenhuma conexão encontrada"}</p>
					<p className="mt-1 text-sm text-muted">
						{isEn
							? "Adjust your search or return to all functions."
							: isEs
							? "Ajuste la búsqueda o vuelva a todas las funciones."
							: isFr
							? "Ajustez votre recherche ou revenez à toutes les fonctions."
							: isZh ? "请调整搜索，或返回全部功能。" : isDe
							? "Passen Sie Ihre Suche an oder kehren Sie zu allen Funktionen zurück."
							: "Ajuste a busca ou volte para todas as funções."}
					</p>
					<button type="button" onClick={() => { setActiveFilter("All"); setSearchQuery(""); if (pinosFiltro.size) mostrarTodos(); }} className="btn btn-primary btn-sm mt-5">
						{isEn ? "Clear search and filters" : isEs ? "Limpiar búsqueda y filtros" : isFr ? "Effacer la recherche et les filtres" : isZh ? "清除搜索和筛选" : isDe ? "Suche und Filter zurücksetzen" : "Limpar busca e filtros"}
					</button>
				</div>
			) : viewMode === "grid" ? (
				<ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
					{visibleConnections.map((connection) => {
						const baseColor = type_colors[connection.tipo] || "#94a3b8";
						return (
							<li key={`${connection.numero}-${connection.nome}`} className="relative">
								<button
									type="button"
									onClick={(e) => abrir(connection, e)}
									aria-haspopup="dialog"
									aria-label={
										isEn
											? `Pin ${connection.nome}, number ${connection.numero}${connection.avisos ? ", with usage restrictions" : ""}`
											: isEs
											? `Pin ${connection.nome}, número ${connection.numero}${connection.avisos ? ", con restricciones de uso" : ""}`
											: isFr
											? `Broche ${connection.nome}, numéro ${connection.numero}${connection.avisos ? ", avec restrictions d'utilisation" : ""}`
											: isZh ? `引脚 ${connection.nome}，编号 ${connection.numero}${connection.avisos ? "，有使用限制" : ""}` : isDe
											? `Pin ${connection.nome}, Nummer ${connection.numero}${connection.avisos ? ", mit Nutzungseinschränkungen" : ""}`
											: `Pino ${connection.nome}, número ${connection.numero}${connection.avisos ? ", com restrições de uso" : ""}`
									}
									className="flex w-full flex-col items-center rounded-xl border border-line bg-surface p-3 transition-colors hover:bg-surface-2"
								>
									<span
										className="grid h-11 w-11 place-items-center rounded-full border-2 bg-surface text-sm font-semibold tabular-nums text-ink"
										style={{ borderColor: baseColor }}
									>
										{numeroCurto(connection)}
									</span>
									<span className="mt-2 break-all text-center text-sm font-medium leading-tight text-ink">{connection.nome}</span>
									<span className="mt-2 flex flex-wrap justify-center gap-1" aria-hidden="true">
										{connection.categorias.slice(0, 5).map((cat) => (
											<span key={cat} className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: getCategoryColor(cat) }} />
										))}
									</span>
								</button>
								{connection.avisos && (
									<span className="pointer-events-none absolute -right-1.5 -top-1.5 grid h-6 w-6 place-items-center rounded-full border-2 border-surface bg-danger-soft text-danger" aria-hidden="true">
										<AlertTriangle className="h-3 w-3" />
									</span>
								)}
							</li>
						);
					})}
				</ul>
			) : (
				<div className="overflow-x-auto rounded-xl border border-line">
					<table className="w-full min-w-[40rem] border-collapse text-left text-sm">
						<caption className="sr-only">
							{isEn
								? `Connections of ${serie.nome_completo}`
								: isEs
								? `Conexiones del ${serie.nome_completo}`
								: isFr
								? `Connexions de l'${serie.nome_completo}`
								: isZh ? `${serie.nome_completo} 的连接` : isDe
								? `Anschlüsse des ${serie.nome_completo}`
								: `Conexões do ${serie.nome_completo}`}
						</caption>
						<thead>
							<tr className="border-b border-line bg-surface-2 text-muted">
								<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Pin" : isEs ? "Pin" : isFr ? "Broche" : isZh ? "引脚" : isDe ? "Pin" : "Pino"}</th>
								<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Name" : isEs ? "Nombre" : isFr ? "Nom" : isZh ? "名称" : isDe ? "Name" : "Nome"}</th>
								<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Functions" : isEs ? "Funciones" : isFr ? "Fonctions" : isZh ? "功能" : isDe ? "Funktionen" : "Funções"}</th>
								<th scope="col" className="px-4 py-3 font-medium">{isEn ? "Usage" : isEs ? "Uso" : isFr ? "Utilisation" : isZh ? "用途" : isDe ? "Nutzung" : "Uso"}</th>
							</tr>
						</thead>
						<tbody className="divide-y divide-line">
							{visibleConnections.map((connection) => {
								const baseColor = type_colors[connection.tipo] || "#94a3b8";
								return (
									<tr key={`${connection.numero}-${connection.nome}`} className="hover:bg-surface-2/60">
										<td className="px-4 py-2.5">
											<button
												type="button"
												onClick={(e) => abrir(connection, e)}
												aria-haspopup="dialog"
												aria-label={
													isEn
														? `Open pin details for ${connection.nome}, number ${connection.numero}`
														: isEs
														? `Abrir detalles del pin ${connection.nome}, número ${connection.numero}`
														: isFr
														? `Ouvrir les détails de la broche ${connection.nome}, numéro ${connection.numero}`
														: isZh ? `展开引脚 ${connection.nome} 的详情，编号 ${connection.numero}` : isDe
														? `Pindetails für ${connection.nome}, Nummer ${connection.numero} öffnen`
														: `Abrir detalhes do pino ${connection.nome}, número ${connection.numero}`
												}
												className="grid h-11 w-11 place-items-center rounded-full border-2 bg-surface text-sm font-semibold tabular-nums text-ink hover:bg-surface-2"
												style={{ borderColor: baseColor }}
											>
												{numeroCurto(connection)}
											</button>
										</td>
										<td className="px-4 py-2.5 font-medium text-ink">{connection.nome}</td>
										<td className="max-w-md px-4 py-2.5 text-muted">
											<span className="line-clamp-2">{connection.funcoes.join(", ")}</span>
										</td>
										<td className="whitespace-nowrap px-4 py-2.5">
											{connection.avisos ? (
												<span className="inline-flex items-center gap-1.5 font-medium text-danger">
													<AlertTriangle className="h-4 w-4" aria-hidden="true" />
													{isEn ? "Restricted" : isEs ? "Restringido" : isFr ? "Restreint" : isZh ? "受限" : isDe ? "Eingeschränkt" : "Restrito"}
												</span>
											) : (
												<span className="inline-flex items-center gap-1.5 text-ok">
													<CheckCircle className="h-4 w-4" aria-hidden="true" />
													{isEn ? "Free" : isEs ? "Libre" : isFr ? "Libre" : isZh ? "可用" : isDe ? "Frei" : "Livre"}
												</span>
											)}
										</td>
									</tr>
								);
							})}
						</tbody>
					</table>
				</div>
			)}

			{connections.some((c) => c.avisos) && (
				<div className="callout callout-warn flex items-start gap-3">
					<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-gold" aria-hidden="true" />
					<div>
						<p className="font-semibold text-ink">{isEn ? "Pinout notes" : isEs ? "Notas sobre el patillaje" : isFr ? "Remarques sur le brochage" : isZh ? "引脚说明" : isDe ? "Hinweise zur Pinbelegung" : "Notas sobre a pinagem"}</p>
						<ul className="mt-1 list-disc space-y-1 pl-5">
							{isEn ? (
								<>
									<li>Pins with a warning icon have special boot roles or analog limitations. Open the pin to see details.</li>
									<li>Isolate capacitive touch traces from coupled RF noise.</li>
								</>
							) : isEs ? (
								<>
									<li>Los pines con icono de advertencia tienen un papel especial en el arranque o limitaciones analógicas. Abra el pin para ver los detalles.</li>
									<li>Aísle las pistas táctiles capacitivas del ruido de RF acoplado.</li>
								</>
							) : isFr ? (
								<>
									<li>Les broches signalées par une icône d'avertissement ont un rôle spécial au démarrage ou des restrictions analogiques. Ouvrez la broche pour voir les détails.</li>
									<li>Isolez les pistes tactiles capacitives des bruits RF couplés.</li>
								</>
							) : isZh ? ( <>
<li>带警告图标的引脚在启动时有特殊作用，或存在模拟功能限制。展开该引脚查看详情。</li>
<li>请将电容触摸电路与耦合了射频噪声的引脚隔离开。</li>
</> ) : isDe ? (
								<>
									<li>Pins mit einem Warnsymbol spielen eine besondere Rolle beim Booten oder unterliegen analogen Einschränkungen. Öffnen Sie den Pin für Details.</li>
									<li>Isolieren Sie kapazitive Touch-Leitungen von eingekoppeltem HF-Rauschen.</li>
								</>
							) : (
								<>
									<li>Pinos com o ícone de alerta têm papel especial no boot ou limitações analógicas. Abra o pino para ver os detalhes.</li>
									<li>Isole os circuitos de toque capacitivo de pinos com ruído de RF acoplado.</li>
								</>
							)}
						</ul>
					</div>
				</div>
			)}

			{selectedConnection && mounted && createPortal(
				<div className="dialog-scrim fixed inset-0 z-50 flex items-center justify-center bg-code/80 p-4 backdrop-blur-sm" onClick={fechar}>
					<div
						ref={dialogRef}
						role="dialog"
						aria-modal="true"
						aria-labelledby="modal-title"
						className="dialog-panel flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-line bg-surface shadow-[var(--shadow)]"
						onClick={(e) => e.stopPropagation()}
					>
						<div className="flex items-start justify-between gap-4 border-b border-line p-5 sm:p-7">
							<div className="flex min-w-0 items-center gap-4">
								<span
									className="grid h-14 w-14 shrink-0 place-items-center rounded-full border-2 bg-surface text-lg font-semibold tabular-nums text-ink"
									style={{ borderColor: type_colors[selectedConnection.tipo] || "#64748b" }}
								>
									{numeroCurto(selectedConnection)}
								</span>
								<div className="min-w-0">
									<h3 id="modal-title" className="break-words font-display text-2xl font-semibold tracking-[-0.03em] text-ink">
										{selectedConnection.nome}
									</h3>
									<p className="text-sm text-muted">
										{isEn
											? `Physical pin ${selectedConnection.numero}`
											: isEs
											? `Pin físico ${selectedConnection.numero}`
											: isFr
											? `Broche physique ${selectedConnection.numero}`
											: isZh ? `物理引脚 ${selectedConnection.numero}` : isDe
											? `Physischer Pin ${selectedConnection.numero}`
											: `Pino físico ${selectedConnection.numero}`}
									</p>
								</div>
							</div>
							<button
								type="button"
								onClick={fechar}
								aria-label={isEn ? "Close pin details" : isEs ? "Cerrar detalles del pin" : isFr ? "Fermer les détails de la broche" : isZh ? "关闭引脚详情" : isDe ? "Pindetails schließen" : "Fechar detalhes do pino"}
								className="grid h-11 w-11 shrink-0 place-items-center rounded-full text-muted transition-colors hover:bg-surface-2 hover:text-ink"
							>
								<X className="h-5 w-5" aria-hidden="true" />
							</button>
						</div>

						<div className="flex-1 space-y-6 overflow-y-auto p-5 sm:p-7">
							{selectedConnection.categorias.length > 0 && (
								<section>
									<h4 className="text-sm font-semibold text-ink">{isEn ? "Categories" : isEs ? "Categorías" : isFr ? "Catégories" : isZh ? "类别" : isDe ? "Kategorien" : "Categorias"}</h4>
									<ul className="mt-3 flex flex-wrap gap-2">
										{selectedConnection.categorias.map((cat) => (
											<li key={cat} className="chip">
												<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getCategoryColor(cat) }} aria-hidden="true" />
												{nomeCategoria(cat)}
											</li>
										))}
									</ul>
								</section>
							)}

							{selectedConnection.alimentacao && (
								<section>
									<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
										<Zap className="h-4 w-4 text-danger" aria-hidden="true" />
										{isEn ? "Power domain" : isEs ? "Dominio de alimentación" : isFr ? "Domaine d'alimentation" : isZh ? "供电域" : isDe ? "Spannungsbereich" : "Domínio de alimentação"}
									</h4>
									<ul className="tile mt-3 space-y-2">
										{selectedConnection.alimentacao.map((source) => (
											<li key={source} className="text-sm text-ink-soft">{source}</li>
										))}
									</ul>
								</section>
							)}

							<section>
								<h4 className="text-sm font-semibold text-ink">{isEn ? "Available functions" : isEs ? "Funciones disponibles" : isFr ? "Fonctions disponibles" : isZh ? "可用功能" : isDe ? "Verfügbare Funktionen" : "Funções disponíveis"}</h4>
								<ul className="tile mt-3 grid gap-2.5 sm:grid-cols-2">
									{selectedConnection.funcoes.map((func) => (
										<li key={func} className="flex items-center gap-2.5 text-sm text-ink-soft">
											<span className="h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: type_colors[selectedConnection.tipo] || "#64748b" }} aria-hidden="true" />
											{func}
										</li>
									))}
								</ul>
							</section>

							{selectedConnection.avisos && (
								<section className="callout callout-danger">
									<h4 className="flex items-center gap-2 font-semibold text-ink">
										<AlertTriangle className="h-4 w-4 text-danger" aria-hidden="true" />
										{isEn ? "Engineering notes" : isEs ? "Notas de ingeniería" : isFr ? "Notes d'ingénierie" : isZh ? "工程警告" : isDe ? "Entwicklungshinweise" : "Avisos de engenharia"}
									</h4>
									<ul className="mt-2 list-disc space-y-1.5 pl-5">
										{selectedConnection.avisos.map((aviso) => (
											<li key={aviso}>{aviso}</li>
										))}
									</ul>
								</section>
							)}
						</div>

						<div className="border-t border-line p-4 sm:px-7">
							<button type="button" onClick={fechar} className="btn btn-primary w-full">
								{isEn ? "Close" : isEs ? "Cerrar" : isFr ? "Fermer" : isZh ? "关闭" : isDe ? "Schließen" : "Fechar"}
							</button>
						</div>
					</div>
				</div>,
				document.body
			)}
		</div>
	);
}