"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 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 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);

	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 = FILTER_CATEGORIES.find((f) => f.id === category);
		return filter?.color || "#64748b";
	};

	const nomeCategoria = (cat) => (cat === "Strapping" ? "Inicialização" : 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">Diagrama de conexões indisponível</p>
				<p className="mt-1 text-sm text-muted">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">Diagrama de conexões interativo</h2>
				<p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted">
					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">Filtrado pela busca:</strong> {motivoFiltro || "pinos selecionados"} ({pinosFiltro.size}{" "}
						{pinosFiltro.size === 1 ? "pino" : "pinos"})
					</p>
					<button type="button" onClick={mostrarTodos} className="btn btn-ghost btn-sm">
						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">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="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="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" />
						Grade
					</button>
					<button type="button" onClick={() => setViewMode("list")} aria-pressed={viewMode === "list"} className="chip-btn">
						<List className="h-4 w-4" aria-hidden="true" />
						Lista
					</button>
				</div>
			</div>

			<div>
				<div className="flex items-center justify-between gap-3">
					<h3 className="text-sm font-semibold text-ink">Função do pino</h3>
					<p role="status" aria-live="polite" className="text-sm text-muted">
						{visibleConnections.length} de {connections.length} pinos
					</p>
				</div>
				<div role="group" aria-label="Filtrar por função" className="mt-3 flex flex-wrap gap-2">
					{FILTER_CATEGORIES.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">Nenhuma conexão encontrada</p>
					<p className="mt-1 text-sm text-muted">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">
						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={`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">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">Pino</th>
								<th scope="col" className="px-4 py-3 font-medium">Nome</th>
								<th scope="col" className="px-4 py-3 font-medium">Funções</th>
								<th scope="col" className="px-4 py-3 font-medium">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={`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" />
													Restrito
												</span>
											) : (
												<span className="inline-flex items-center gap-1.5 text-ok">
													<CheckCircle className="h-4 w-4" aria-hidden="true" />
													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">Notas sobre a pinagem</p>
						<ul className="mt-1 list-disc space-y-1 pl-5">
							<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">Pino físico {selectedConnection.numero}</p>
								</div>
							</div>
							<button type="button" onClick={fechar} aria-label="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">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" />
										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">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" />
										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">Fechar</button>
						</div>
					</div>
				</div>,
				document.body
			)}
		</div>
	);
}