"use client";

import { useState, useMemo, useRef } from "react";
import { usePathname } from "next/navigation";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import PageHero from "@/components/PageHero";
import * as diagnosticoPt from "@/lib/diagnosticoData";
import * as diagnosticoEn from "@/lib/data/en/diagnostico";
import * as diagnosticoEs from "@/lib/data/es/diagnostico";
import * as diagnosticoFr from "@/lib/data/fr/diagnostico";
import * as diagnosticoDe from "@/lib/data/de/diagnostico";
import {
	Activity,
	AlertTriangle,
	Check,
	CheckCircle2,
	ChevronDown,
	Copy,
	Cpu,
	ExternalLink,
	HelpCircle,
	Layers,
	LayoutGrid,
	RotateCcw,
	Search,
	ShieldAlert,
	Terminal,
	Wifi,
	Wrench,
	X,
	XCircle,
	Zap,
} from "lucide-react";

/** Os rótulos dos sintomas vêm com emoji nos dados; a interface usa só texto e ícones. */
const semEmoji = (texto) => texto.replace(/^[\p{Extended_Pictographic}\uFE0F\s]+/u, "");

const ICONES = { Zap, Cpu, Layers, Activity, Terminal, Wifi };

const EXEMPLOS_LOG_PT = [
	["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
	["LoadProhibited", "Guru Meditation Error: Core  0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
	["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
	["Handshake TLS", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];

const EXEMPLOS_LOG_EN = [
	["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
	["LoadProhibited", "Guru Meditation Error: Core  0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
	["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
	["TLS Handshake", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];

const EXEMPLOS_LOG_ES = [
	["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
	["LoadProhibited", "Guru Meditation Error: Core  0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
	["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
	["Handshake TLS", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];

const EXEMPLOS_LOG_FR = [
	["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
	["LoadProhibited", "Guru Meditation Error: Core  0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
	["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
	["Handshake TLS", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];

const EXEMPLOS_LOG_DE = [
	["Brownout", "Brownout detector was triggered\n\nrst:0xc (SW_CPU_RESET),boot:0x13"],
	["LoadProhibited", "Guru Meditation Error: Core  0 panic'ed (LoadProhibited).\nEXCVADDR: 0x00000000"],
	["Task watchdog", "Task watchdog got triggered. The following tasks/users did not reset the watchdog: - IDLE0"],
	["TLS-Handshake", "mbedtls_ssl_handshake returned -0x2700\nThe certificate is not yet valid"],
];

const GRAVIDADE = {
	"Crítica": "text-danger",
	"Critical": "text-danger",
	"Critique": "text-danger",
	"Kritisch": "text-danger",
	Alta: "text-gold",
	High: "text-gold",
	"Élevée": "text-gold",
	Hoch: "text-gold",
	"Média": "text-accent",
	Medium: "text-accent",
	Media: "text-accent",
	Moyenne: "text-accent",
	Mittel: "text-accent",
};

const CHECKLISTS_PT = [
	{
		icon: Zap,
		titulo: "Hardware e alimentação",
		itens: [
			"Capacitor de 10 µF a 100 µF de baixo ESR no VCC, mais um cerâmico de 100 nF junto ao chip.",
			"LDO dimensionado para picos de 600 mA a 1 A, com folga térmica.",
			"Nenhum periférico forçando nível lógico nos pinos de strapping durante o boot.",
			"Capacitor de 10 µF ou 1 µF no pino EN (RST) para auto-reset estável na gravação.",
		],
	},
	{
		icon: Layers,
		titulo: "Firmware e FreeRTOS",
		itens: [
			"Toda tarefa FreeRTOS cede a CPU com vTaskDelay, filas ou semáforos.",
			"Toda ISR marcada com IRAM_ATTR e sem chamadas bloqueantes.",
			"Sem uso contínuo de String do Arduino em laços, para evitar fragmentação do heap.",
			"Horário sincronizado por SNTP antes de abrir conexões TLS/HTTPS.",
		],
	},
];

const CHECKLISTS_EN = [
	{
		icon: Zap,
		titulo: "Hardware and Power Supply",
		itens: [
			"10 µF to 100 µF low-ESR capacitor on VCC, plus a 100 nF ceramic capacitor close to the chip.",
			"LDO regulator sized for 600 mA to 1 A current spikes, with adequate thermal margin.",
			"No external peripherals forcing logic levels on strapping pins during reset and boot.",
			"10 µF or 1 µF capacitor on the EN (RST) pin for stable auto-reset flashing.",
		],
	},
	{
		icon: Layers,
		titulo: "Firmware and FreeRTOS",
		itens: [
			"Every FreeRTOS task yields CPU time with vTaskDelay, queues, or semaphores.",
			"Every ISR marked with IRAM_ATTR with zero blocking calls.",
			"Avoid continuous heap reallocations using Arduino Strings in tight loops.",
			"Clock synchronized via SNTP before attempting TLS/HTTPS handshakes.",
		],
	},
];

const CHECKLISTS_ES = [
	{
		icon: Zap,
		titulo: "Hardware y alimentación",
		itens: [
			"Condensador de 10 µF a 100 µF de bajo ESR en VCC, más uno cerámico de 100 nF junto al chip.",
			"Regulador LDO dimensionado para picos de 600 mA a 1 A, con margen térmico.",
			"Ningún periférico forzando niveles lógicos en los pines de strapping durante el arranque.",
			"Condensador de 10 µF o 1 µF en el pin EN (RST) para auto-reset estable durante la programación.",
		],
	},
	{
		icon: Layers,
		titulo: "Firmware y FreeRTOS",
		itens: [
			"Cada tarea de FreeRTOS cede la CPU con vTaskDelay, colas o semáforos.",
			"Cada ISR marcada con IRAM_ATTR y sin llamadas bloqueantes.",
			"Sin uso continuo de String de Arduino en bucles para evitar la fragmentación del heap.",
			"Hora sincronizada mediante SNTP antes de abrir conexiones TLS/HTTPS.",
		],
	},
];

const CHECKLISTS_FR = [
	{
		icon: Zap,
		titulo: "Matériel et alimentation",
		itens: [
			"Condensateur de 10 µF à 100 µF à faible ESR sur VCC, plus un céramique de 100 nF près de la puce.",
			"Régulateur LDO dimensionné pour des pointes de 600 mA à 1 A, avec marge thermique.",
			"Aucun périphérique ne forçant de niveau logique sur les broches de strapping pendant le boot.",
			"Condensateur de 10 µF ou 1 µF sur la broche EN (RST) pour un auto-reset stable au flashage.",
		],
	},
	{
		icon: Layers,
		titulo: "Firmware et FreeRTOS",
		itens: [
			"Chaque tâche FreeRTOS cède la CPU avec vTaskDelay, des files ou des sémaphores.",
			"Chaque ISR marquée avec IRAM_ATTR et exempte d'appels bloquants.",
			"Pas d'usage continu de String d'Arduino dans les boucles, afin d'éviter la fragmentation du tas.",
			"Horloge synchronisée par SNTP avant d'ouvrir des connexions TLS/HTTPS.",
		],
	},
];

const CHECKLISTS_DE = [
	{
		icon: Zap,
		titulo: "Hardware und Spannungsversorgung",
		itens: [
			"10 µF bis 100 µF Low-ESR-Kondensator an VCC, plus ein 100-nF-Keramikkondensator nah am Chip.",
			"LDO-Regler ausgelegt für 600 mA bis 1 A Stromspitzen mit thermischer Reserve.",
			"Keine Peripheriegeräte, die beim Booten Logikpegel an Strapping-Pins erzwingen.",
			"10 µF- oder 1 µF-Kondensator am EN-Pin (RST) für zuverlässigen Auto-Reset beim Flashen.",
		],
	},
	{
		icon: Layers,
		titulo: "Firmware und FreeRTOS",
		itens: [
			"Jeder FreeRTOS-Task gibt CPU-Zeit mit vTaskDelay, Queues oder Semaphoren ab.",
			"Jede ISR mit IRAM_ATTR versehen und frei von blockierenden Aufrufen.",
			"Keine fortlaufende Verwendung von Arduino-Strings in Schleifen zur Vermeidung von Heap-Fragmentierung.",
			"Uhrzeit vor dem Aufbau von TLS/HTTPS-Verbindungen per SNTP synchronisiert.",
		],
	},
];

export default function DiagnosticoPage() {
	const pathname = usePathname();
	const isEn = pathname?.startsWith("/en");
	const isEs = pathname?.startsWith("/es");
	const isFr = pathname?.startsWith("/fr");
	const isDe = pathname?.startsWith("/de");
	const { categoriasDiagnostico, sintomasRapidos, errosCatalogo, regrasDecodificadorLog } = isEs ? diagnosticoEs : isEn ? diagnosticoEn : isFr ? diagnosticoFr : isDe ? diagnosticoDe : diagnosticoPt;
	const exemplosLog = isEs ? EXEMPLOS_LOG_ES : isEn ? EXEMPLOS_LOG_EN : isFr ? EXEMPLOS_LOG_FR : isDe ? EXEMPLOS_LOG_DE : EXEMPLOS_LOG_PT;
	const checklists = isEs ? CHECKLISTS_ES : isEn ? CHECKLISTS_EN : isFr ? CHECKLISTS_FR : isDe ? CHECKLISTS_DE : CHECKLISTS_PT;

	const [termoBusca, setTermoBusca] = useState("");
	const [categoriaAtiva, setCategoriaAtiva] = useState("todos");
	const [sintomaAtivo, setSintomaAtivo] = useState(null);
	const [cardAberto, setCardAberto] = useState(null);
	const [linguagemCodigo, setLinguagemCodigo] = useState({}); // { [id]: 'arduino' | 'espidf' }
	const [copiadoId, setCopiadoId] = useState(null);
	const searchInputRef = useRef(null);

	// Estado do Analisador de Logs
	const [logInput, setLogInput] = useState("");
	const [resultadoLog, setResultadoLog] = useState(null);

	// Função de Análise do Log
	const analisarLog = (texto) => {
		setLogInput(texto);
		if (!texto || texto.trim() === "") {
			setResultadoLog(null);
			return;
		}

		for (const regra of regrasDecodificadorLog) {
			if (regra.padrao.test(texto)) {
				setResultadoLog(regra);
				return;
			}
		}

		setResultadoLog(
			isEs
				? {
						titulo: "Patrón de error no categorizado automáticamente",
						tipo: "Desconocido",
						explicacao:
							"No identificamos una firma clásica de Guru Meditation o Brownout en este fragmento. Verifique que la velocidad de baudios (ej: 115200) sea correcta y si el encabezado 'rst:' o 'panic' está presente.",
						acaoRecomendada:
							"Busque palabras clave como 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' o 'panic' en la consola serie.",
					}
				: isEn
				? {
						titulo: "Error pattern not automatically classified",
						tipo: "Unknown",
						explicacao:
							"We could not identify a classic Guru Meditation or Brownout signature in this snippet. Verify that the baud rate (e.g. 115200) is correct and whether the 'rst:' or 'panic' header is present.",
						acaoRecomendada:
							"Look for keywords such as 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog', or 'panic' in the serial output.",
					}
				: isFr
				? {
						titulo: "Modèle d'erreur non catégorisé automatiquement",
						tipo: "Inconnu",
						explicacao:
							"Nous n'avons pas identifié de signature classique de Guru Meditation ou Brownout dans cet extrait. Vérifiez que la vitesse en bauds (ex. : 115200) est correcte et si l'en-tête 'rst:' ou 'panic' est présent.",
						acaoRecomendada:
							"Recherchez des mots-clés tels que 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' ou 'panic' dans la console série.",
					}
				: isDe
				? {
						titulo: "Fehlermuster nicht automatisch kategorisiert",
						tipo: "Unbekannt",
						explicacao:
							"Wir konnten in diesem Ausschnitt keine klassische Guru-Meditation- oder Brownout-Signatur erkennen. Prüfen Sie, ob die Baudrate (z. B. 115200) korrekt ist und ob der Header 'rst:' oder 'panic' vorhanden ist.",
						acaoRecomendada:
							"Suchen Sie in der seriellen Konsole nach Begriffen wie 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' oder 'panic'.",
					}
				: {
						titulo: "Padrão de erro não categorizado automaticamente",
						tipo: "Desconhecido",
						explicacao:
							"Não identificamos uma assinatura clássica de Guru Meditation ou Brownout neste trecho. Verifique se a taxa de baud rate (ex: 115200) está correta e se o cabeçalho 'rst:' ou 'panic' está presente.",
						acaoRecomendada:
							"Procure por palavras-chave como 'Guru Meditation', 'rst:', 'LoadProhibited', 'watchdog' ou 'panic' no console serial.",
					}
		);
	};

	const copiarParaClipboard = (texto, id) => {
		navigator.clipboard.writeText(texto);
		setCopiadoId(id);
		setTimeout(() => setCopiadoId(null), 2000);
	};

	// Filtragem dos erros
	const errosFiltrados = useMemo(() => {
		const termo = termoBusca.toLowerCase().trim();
		return errosCatalogo.filter((erro) => {
			const matchCategoria =
				categoriaAtiva === "todos" || erro.categoria === categoriaAtiva;
			const matchSintoma =
				!sintomaAtivo || erro.sintomas.includes(sintomaAtivo);
			const matchBusca =
				!termo ||
				erro.titulo.toLowerCase().includes(termo) ||
				erro.resumo.toLowerCase().includes(termo) ||
				erro.causaRaiz.toLowerCase().includes(termo) ||
				erro.logSerial.toLowerCase().includes(termo);

			return matchCategoria && matchSintoma && matchBusca;
		});
	}, [categoriaAtiva, sintomaAtivo, termoBusca, errosCatalogo]);

	const temFiltroAtivo =
		termoBusca.trim() !== "" ||
		categoriaAtiva !== "todos" ||
		sintomaAtivo !== null;

	const limparTodosFiltros = () => {
		setTermoBusca("");
		setCategoriaAtiva("todos");
		setSintomaAtivo(null);
		searchInputRef.current?.focus();
	};

	const toggleCard = (id) => {
		setCardAberto((prev) => (prev === id ? null : id));
	};

	const setLang = (id, lang) => {
		setLinguagemCodigo((prev) => ({ ...prev, [id]: lang }));
	};

	const totalFiltros = (termoBusca.trim() ? 1 : 0) + (categoriaAtiva !== "todos" ? 1 : 0) + (sintomaAtivo ? 1 : 0);

	return (
		<div className="site-canvas min-h-screen">
			<Header />

			<main id="conteudo">
				<PageHero
					isEn={isEn}
					isEs={isEs}
					isFr={isFr}
					isDe={isDe}
					trail={[{ label: isEs ? "Diagnóstico" : isEn ? "Diagnostics" : isFr ? "Diagnostic" : isDe ? "Diagnose" : "Diagnóstico" }]}
					icon={AlertTriangle}
					label={isEs ? "Depuración de firmware" : isEn ? "Firmware Debugging" : isFr ? "Débogage du firmware" : isDe ? "Firmware-Debugging" : "Depuração de firmware"}
					title={isEs ? "Diagnóstico de fallas del ESP32" : isEn ? "ESP32 Diagnostics and Crash Decoder" : isFr ? "Diagnostic des pannes de l'ESP32" : isDe ? "ESP32-Fehlerdiagnose und Crash-Decoder" : "Diagnóstico de falhas do ESP32"}
					lede={
						isEs
							? "Comprenda la causa raíz de las fallas por Brownout, Guru Meditation, Watchdog y Stack Overflow, y aplique la corrección de ingeniería en lugar de soluciones improvisadas."
							: isEn
							? "Understand the root cause of Brownout, Guru Meditation, Watchdog, and Stack Overflow crashes, and apply engineering solutions instead of workarounds."
							: isFr
							? "Comprenez la cause racine des pannes de Brownout, Guru Meditation, Watchdog et Stack Overflow, et appliquez la correction d'ingénierie plutôt qu'un bricolage."
							: isDe
							? "Verstehen Sie die Ursache von Brownout, Guru Meditation, Watchdog und Stack Overflow und wenden Sie saubere Ingenieurlösungen statt Notbehelfen an."
							: "Entenda a causa de Brownout, Guru Meditation, Watchdog e Stack Overflow, e aplique a correção de engenharia, não o remendo."
					}
				>
					<a
						href="https://cienciaembarcada.com.br/publicacoes/esp32-5-erros-comuns-e-como-resolve-los-profissionalmente/"
						target="_blank"
						rel="noopener noreferrer"
						className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong"
					>
						{isEs ? "Basado en el artículo de Ciência Embarcada" : isEn ? "Based on article by Ciência Embarcada" : isFr ? "D'après l'article de Ciência Embarcada" : isDe ? "Basierend auf dem Artikel von Ciência Embarcada" : "Baseado no artigo do Ciência Embarcada"}
						<ExternalLink className="h-4 w-4" aria-hidden="true" />
						<span className="sr-only"> {isEs ? "(abre en una nueva pestaña)" : isEn ? "(opens in a new tab)" : isFr ? "(ouvre un nouvel onglet)" : isDe ? "(öffnet in neuem Tab)" : "(abre em nova aba)"}</span>
					</a>
				</PageHero>

				<section className="shell pt-10 sm:pt-12" aria-labelledby="decodificador-titulo">
					<div className="panel p-5 sm:p-8">
						<div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
							<div className="max-w-xl">
								<h2 id="decodificador-titulo" className="section-title">
									{isEs ? "Pegue el registro y descubra la causa" : isEn ? "Paste the log to see the cause" : isFr ? "Collez le journal et découvrez la cause" : isDe ? "Log einfügen und Ursache ermitteln" : "Cole o log e veja a causa"}
								</h2>
								<p className="mt-2 text-sm text-muted">
									{isEs ? "Copie el fragmento del monitor serie. El diagnóstico aparece al instante." : isEn ? "Copy the serial monitor output snippet. Diagnostics appear instantly." : isFr ? "Copiez l'extrait du moniteur série. Le diagnostic apparaît immédiatement." : isDe ? "Kopieren Sie den Ausschnitt aus dem seriellen Monitor. Die Diagnose erscheint sofort." : "Copie o trecho do monitor serial. O diagnóstico aparece na hora."}
								</p>
							</div>
							<div className="flex flex-wrap items-center gap-2">
								<span className="text-sm text-muted">{isEs ? "Probar con" : isEn ? "Test with" : isFr ? "Tester avec" : isDe ? "Testen mit" : "Testar com"}</span>
								{exemplosLog.map(([rotulo, texto]) => (
									<button key={rotulo} type="button" onClick={() => analisarLog(texto)} className="chip-btn">
										{rotulo}
									</button>
								))}
							</div>
						</div>

						<div className="relative mt-5">
							<label htmlFor="log-serial" className="sr-only">
								{isEs ? "Registro del monitor serie" : isEn ? "Serial monitor log" : isFr ? "Journal du moniteur série" : isDe ? "Serieller Monitor-Log" : "Log do monitor serial"}
							</label>
							<textarea
								id="log-serial"
								rows={4}
								value={logInput}
								onChange={(e) => analisarLog(e.target.value)}
								placeholder={isEs ? "Pegue el registro del monitor serie aquí" : isEn ? "Paste serial monitor log here" : isFr ? "Collez le journal du moniteur série ici" : isDe ? "Seriellen Monitor-Log hier einfügen" : "Cole o log do monitor serial aqui"}
								spellCheck={false}
								className="code-panel field !min-h-32 w-full resize-y !rounded-xl !border-white/10 !bg-[var(--code-bg)] p-4 font-mono text-sm !text-[#e9eef4] placeholder:!text-[#a6afbd]"
							/>
							{logInput && (
								<button type="button" onClick={() => analisarLog("")} className="absolute right-3 top-3 inline-flex min-h-11 items-center gap-1 rounded-full border border-white/15 px-3 text-xs font-medium text-[#e9eef4] hover:bg-white/10">
									<X className="h-3.5 w-3.5" aria-hidden="true" />
									{isEs ? "Limpiar" : isEn ? "Clear" : isFr ? "Effacer" : isDe ? "Löschen" : "Limpar"}
								</button>
							)}
						</div>

						<div role="status" aria-live="polite">
							{resultadoLog && (
								<div className="callout callout-warn mt-4 flex items-start gap-3">
									<ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-gold" aria-hidden="true" />
									<div className="min-w-0 space-y-2">
										<div className="flex flex-wrap items-center gap-2">
											<h3 className="font-semibold text-ink">{resultadoLog.titulo}</h3>
											<span className="chip">{resultadoLog.tipo}</span>
										</div>
										<p><strong className="font-semibold text-ink">{isEs ? "Causa probable:" : isEn ? "Likely cause:" : isFr ? "Cause probable :" : isDe ? "Wahrscheinliche Ursache :" : "Causa provável:"}</strong> {resultadoLog.explicacao}</p>
										<p><strong className="font-semibold text-ink">{isEs ? "Qué hacer:" : isEn ? "What to do:" : isFr ? "Que faire :" : isDe ? "Was zu tun ist :" : "O que fazer:"}</strong> {resultadoLog.acaoRecomendada}</p>
									</div>
								</div>
							)}
						</div>
					</div>
				</section>

				<section className="shell section pt-12 sm:pt-14" aria-labelledby="catalogo-titulo">
					<h2 id="catalogo-titulo" className="section-title">
						{isEs ? "Catálogo de fallas" : isEn ? "Fault catalog" : isFr ? "Catalogue de pannes" : isDe ? "Fehlerkatalog" : "Catálogo de falhas"}
					</h2>

					<div className="panel mt-6 p-5 sm:p-6">
						<div className="relative">
							<label htmlFor="busca-erro" className="sr-only">
								{isEs ? "Buscar por error, síntoma o mensaje serie" : isEn ? "Search by error, symptom, or serial message" : isFr ? "Rechercher par erreur, symptôme ou message série" : isDe ? "Nach Fehler, Symptom oder serieller Meldung suchen" : "Buscar por erro, sintoma ou mensagem serial"}
							</label>
							<Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-muted" aria-hidden="true" />
							<input
								id="busca-erro"
								ref={searchInputRef}
								type="search"
								value={termoBusca}
								onChange={(e) => setTermoBusca(e.target.value)}
								placeholder={isEs ? "Buscar error, síntoma o mensaje" : isEn ? "Search error, symptom, or message" : isFr ? "Rechercher une erreur, un symptôme ou un message" : isDe ? "Fehler, Symptom oder Meldung suchen" : "Buscar erro, sintoma ou mensagem"}
								autoComplete="off"
								className="field pl-12 pr-4 text-base"
							/>
						</div>

						<div className="mt-5">
							<h3 className="text-sm font-semibold text-ink">{isEs ? "Síntoma" : isEn ? "Symptom" : isFr ? "Symptôme" : isDe ? "Symptom" : "Sintoma"}</h3>
							<div className="mt-3 flex flex-wrap gap-2">
								{sintomasRapidos.map((sintoma) => (
									<button key={sintoma.id} type="button" onClick={() => setSintomaAtivo(sintomaAtivo === sintoma.id ? null : sintoma.id)} aria-pressed={sintomaAtivo === sintoma.id} className="chip-btn">
										{semEmoji(sintoma.rotulo)}
									</button>
								))}
							</div>
						</div>

						<div className="mt-5 border-t border-line pt-5">
							<h3 className="text-sm font-semibold text-ink">{isEs ? "Área" : isEn ? "Area" : isFr ? "Domaine" : isDe ? "Bereich" : "Área"}</h3>
							<div className="mt-3 flex flex-wrap gap-2">
								<button type="button" onClick={() => setCategoriaAtiva("todos")} aria-pressed={categoriaAtiva === "todos"} className="chip-btn">
									<LayoutGrid className="h-4 w-4" aria-hidden="true" />
									{isEs ? "Todas" : isEn ? "All" : isFr ? "Tous" : isDe ? "Alle" : "Todas"}
									<span className="tabular-nums opacity-80">{errosCatalogo.length}</span>
								</button>
								{categoriasDiagnostico.map((cat) => {
									const Icone = ICONES[cat.icone] ?? AlertTriangle;
									const total = errosCatalogo.filter((e) => e.categoria === cat.id).length;
									return (
										<button key={cat.id} type="button" onClick={() => setCategoriaAtiva(cat.id)} aria-pressed={categoriaAtiva === cat.id} className="chip-btn">
											<Icone className="h-4 w-4" aria-hidden="true" />
											{cat.nome.split(/ &|,/)[0]}
											<span className="tabular-nums opacity-80">{total}</span>
										</button>
									);
								})}
							</div>
						</div>
					</div>

					<div className="mt-6 flex flex-wrap items-center justify-between gap-3">
						<p role="status" aria-live="polite" className="text-sm font-semibold text-ink">
							{errosFiltrados.length} {errosFiltrados.length === 1 ? (isEs ? "falla" : isEn ? "fault" : isFr ? "panne" : isDe ? "Fehler" : "falha") : (isEs ? "fallas" : isEn ? "faults" : isFr ? "pannes" : isDe ? "Fehler" : "falhas")}
							{totalFiltros > 0 && <span className="font-normal text-muted">{isEs ? " con los filtros actuales" : isEn ? " with current filters" : isFr ? " avec les filtres actuels" : isDe ? " mit aktuellen Filtern" : " com os filtros atuais"}</span>}
						</p>
						{temFiltroAtivo && (
							<button type="button" onClick={limparTodosFiltros} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
								<RotateCcw className="h-4 w-4" aria-hidden="true" />
								{isEs ? "Restablecer filtros" : isEn ? "Reset filters" : isFr ? "Réinitialiser les filtres" : isDe ? "Filter zurücksetzen" : "Redefinir filtros"}
							</button>
						)}
					</div>

					<div className="mt-3 space-y-3">
						{errosFiltrados.length === 0 ? (
							<div className="card px-6 py-14 text-center">
								<HelpCircle className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
								<h3 className="mt-4 font-display text-xl font-semibold text-ink">
									{isEs ? "Ninguna falla coincide con estos filtros" : isEn ? "No faults matching these filters" : isFr ? "Aucune panne ne correspond à ces filtres" : isDe ? "Keine Fehler entsprechen diesen Filtern" : "Nenhuma falha com esses filtros"}
								</h3>
								<p className="mx-auto mt-2 max-w-md text-sm text-muted">
									{isEs ? "Busque por un término más general o elimine el síntoma y el área seleccionados." : isEn ? "Search for a more general term or remove selected symptom and area." : isFr ? "Recherchez un terme plus général ou retirez le symptôme et le domaine sélectionnés." : isDe ? "Suchen Sie nach einem allgemeineren Begriff oder entfernen Sie gewähltes Symptom und Bereich." : "Busque por um termo mais geral ou remova o sintoma e a área selecionados."}
								</p>
								<button type="button" onClick={limparTodosFiltros} className="btn btn-primary mt-6">
									{isEs ? "Limpiar filtros" : isEn ? "Clear filters" : isFr ? "Effacer les filtres" : isDe ? "Filter zurücksetzen" : "Limpar filtros"}
								</button>
							</div>
						) : (
							errosFiltrados.map((erro) => {
								const estaAberto = cardAberto === erro.id;
								const lang = linguagemCodigo[erro.id] || "arduino";
								const codigoAtual =
									lang === "arduino" ? erro.codigoArduino : lang === "espidf" ? erro.codigoEspIdf : erro.codigoMicroPython || (isEs ? "# Ejemplo no aplicable" : isEn ? "# Example not applicable" : isFr ? "# Exemple non applicable" : isDe ? "# Beispiel nicht anwendbar" : "# Exemplo não aplicável");
								const catInfo = categoriasDiagnostico.find((c) => c.id === erro.categoria);
								const IconeCat = ICONES[catInfo?.icone] ?? AlertTriangle;

								return (
									<article key={erro.id} id={erro.id} className={`card scroll-mt-28 overflow-hidden ${estaAberto ? "border-line-strong" : ""}`}>
										<h3>
											<button
												type="button"
												onClick={() => toggleCard(erro.id)}
												aria-expanded={estaAberto}
												aria-controls={`detalhe-${erro.id}`}
												className="flex w-full cursor-pointer items-start justify-between gap-4 p-5 text-left sm:p-6"
											>
												<span className="min-w-0">
													<span className="flex flex-wrap items-center gap-2">
														<span className="chip">
															<IconeCat className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
															{catInfo?.nome}
														</span>
														<span className={`chip ${GRAVIDADE[erro.gravidade] ?? "text-accent"}`}>
															{isEs ? (
																<>Severidad {erro.gravidade.toLowerCase()}</>
															) : isEn ? (
																<>Severity: {erro.gravidade.toLowerCase()}</>
															) : isFr ? (
																<>Gravité : {erro.gravidade.toLowerCase()}</>
															) : isDe ? (
																<>Schweregrad: {erro.gravidade.toLowerCase()}</>
															) : (
																<>Gravidade {erro.gravidade.toLowerCase()}</>
															)}
														</span>
													</span>
													<span className="mt-3 block font-display text-xl font-semibold tracking-[-0.03em] text-ink">{erro.titulo}</span>
													<span className="mt-1.5 block text-sm font-normal leading-relaxed text-muted">{erro.resumo}</span>
												</span>
												<span className="mt-1 grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-2 text-muted">
													<ChevronDown className={`h-4 w-4 transition-transform ${estaAberto ? "rotate-180" : ""}`} aria-hidden="true" />
												</span>
											</button>
										</h3>

										{estaAberto && (
											<div id={`detalhe-${erro.id}`} className="space-y-6 border-t border-line p-5 sm:p-6">
												<div>
													<div className="flex items-center justify-between gap-3">
														<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
															<Terminal className="h-4 w-4 text-accent" aria-hidden="true" />
															{isEs ? "Cómo aparece en el monitor serie" : isEn ? "How it appears in serial monitor" : isFr ? "Apparence dans le moniteur série" : isDe ? "Erscheinungsbild im seriellen Monitor" : "Como aparece no monitor serial"}
														</h4>
														<button type="button" onClick={() => copiarParaClipboard(erro.logSerial, `log-${erro.id}`)} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
															{copiadoId === `log-${erro.id}` ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
															{copiadoId === `log-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar registro" : isEn ? "Copy log" : isFr ? "Copier le log" : isDe ? "Log kopieren" : "Copiar log")}
														</button>
													</div>
													<div className="code-panel mt-1">
														<pre tabIndex={0}><code className="text-[#e9eef4]">{erro.logSerial}</code></pre>
													</div>
												</div>

												<div>
													<h4 className="flex items-center gap-2 text-sm font-semibold text-ink">
														<Cpu className="h-4 w-4 text-accent" aria-hidden="true" />
														{isEs ? "Causa raíz" : isEn ? "Root cause" : isFr ? "Cause racine" : isDe ? "Ursache" : "Causa raiz"}
													</h4>
													<p className="callout mt-2">{erro.causaRaiz}</p>
												</div>

												<div className="grid gap-4 md:grid-cols-2">
													<div className="callout callout-danger">
														<p className="flex items-center gap-2 font-semibold text-ink">
															<XCircle className="h-4 w-4 shrink-0 text-danger" aria-hidden="true" />
															{isEs ? "La solución improvisada común" : isEn ? "The common workaround" : isFr ? "Le bricolage courant" : isDe ? "Der verbreitete Notbehelf" : "O remendo comum"}
														</p>
														<p className="mt-2 font-medium text-ink">{erro.gambiarra.titulo}</p>
														<p className="mt-1">{erro.gambiarra.descricao}</p>
														<p className="mt-2"><strong className="font-semibold text-danger">{isEs ? "Consecuencia:" : isEn ? "Consequence:" : isFr ? "Conséquence :" : isDe ? "Folge :" : "Consequência:"}</strong> {erro.gambiarra.consequencia}</p>
													</div>

													<div className="callout callout-ok">
														<p className="flex items-center gap-2 font-semibold text-ink">
															<CheckCircle2 className="h-4 w-4 shrink-0 text-ok" aria-hidden="true" />
															{isEs ? "La solución de ingeniería" : isEn ? "The engineering solution" : isFr ? "La solution d'ingénierie" : isDe ? "Die Ingenieurlösung" : "A solução de engenharia"}
														</p>
														<p className="mt-2 font-medium text-ink">{erro.solucaoEngenharia.titulo}</p>
														<ul className="mt-2 space-y-1.5">
															{erro.solucaoEngenharia.passos.map((passo) => (
																<li key={passo} className="flex items-start gap-2">
																	<Check className="mt-1 h-3.5 w-3.5 shrink-0 text-ok" aria-hidden="true" />
																	{passo}
																</li>
															))}
														</ul>
													</div>
												</div>

												<div>
													<div className="flex flex-wrap items-center justify-between gap-3">
														<div role="group" aria-label={isEs ? "Lenguaje del ejemplo" : isEn ? "Example language" : isFr ? "Langage de l'exemple" : isDe ? "Sprache des Beispiels" : "Linguagem do exemplo"} className="flex flex-wrap gap-2">
															{[
																["arduino", "Arduino C++"],
																["espidf", "ESP-IDF (C)"],
																["micropython", "MicroPython"],
															].map(([id, rotulo]) => (
																<button key={id} type="button" onClick={() => setLang(erro.id, id)} aria-pressed={lang === id} className="chip-btn">
																	{rotulo}
																</button>
															))}
														</div>
														<button type="button" onClick={() => copiarParaClipboard(codigoAtual, `code-${erro.id}`)} className="inline-flex min-h-11 items-center gap-1.5 text-sm font-medium text-accent hover:text-accent-strong">
															{copiadoId === `code-${erro.id}` ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
															{copiadoId === `code-${erro.id}` ? (isEs ? "Copiado" : isEn ? "Copied" : isFr ? "Copié" : isDe ? "Kopiert" : "Copiado") : (isEs ? "Copiar código" : isEn ? "Copy code" : isFr ? "Copier le code" : isDe ? "Code kopieren" : "Copiar código")}
														</button>
													</div>
													<div className="code-panel mt-3">
														<pre tabIndex={0}><code className="text-[#e9eef4]">{codigoAtual}</code></pre>
													</div>
												</div>

												<div className="callout callout-warn flex items-start gap-3">
													<Wrench className="mt-0.5 h-4 w-4 shrink-0 text-gold" aria-hidden="true" />
													<p><strong className="font-semibold text-ink">{isEs ? "Consejo de ingeniería:" : isEn ? "Engineering tip:" : isFr ? "Conseil d'ingénierie :" : isDe ? "Praxistipp :" : "Dica de engenharia:"}</strong> {erro.dicaPro}</p>
												</div>
											</div>
										)}
									</article>
								);
							})
						)}
					</div>
				</section>

				<section className="shell pb-20 md:pb-28" aria-labelledby="checklist-titulo">
					<h2 id="checklist-titulo" className="section-title">
						{isEs ? "Lista de verificación previa a campo" : isEn ? "Pre-deployment checklist" : isFr ? "Checklist avant déploiement" : isDe ? "Checkliste vor dem Feldeinsatz" : "Checklist antes de ir para campo"}
					</h2>
					<p className="mt-3 max-w-2xl text-base text-muted">
						{isEs ? "Elementos esenciales para validar en hardware y firmware antes de entregar el producto." : isEn ? "Essential items to validate on hardware and firmware before shipping a product." : isFr ? "Éléments essentiels à valider sur le matériel et le firmware avant de livrer le produit." : isDe ? "Wesentliche Punkte zur Prüfung von Hardware und Firmware vor der Auslieferung." : "Itens essenciais para validar no hardware e no firmware antes de entregar o produto."}
					</p>
					<div className="mt-8 grid gap-4 md:grid-cols-2">
						{checklists.map(({ icon: Icon, titulo, itens }) => (
							<div key={titulo} className="card p-5 sm:p-7">
								<h3 className="flex items-center gap-3 font-display text-xl font-semibold tracking-[-0.03em] text-ink">
									<span className="grid h-9 w-9 place-items-center rounded-full bg-accent-soft text-accent">
										<Icon className="h-4 w-4" aria-hidden="true" />
									</span>
									{titulo}
								</h3>
								<ul className="mt-5 space-y-3">
									{itens.map((item) => (
										<li key={item} className="flex items-start gap-3 text-sm leading-relaxed text-ink-soft">
											<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-ok" aria-hidden="true" />
											{item}
										</li>
									))}
								</ul>
							</div>
						))}
					</div>
				</section>
			</main>

			<Footer />
		</div>
	);
}