ESPDocs/components/CodeExample.jsx

"use client";

import { useEffect, useState } from "react";
import { Check, Copy, ExternalLink } from "lucide-react";
import { usePathname } from "next/navigation";

export default function CodeExample({ framework }) {
	const pathname = usePathname() || "";
	const isEn = pathname === "/en" || pathname.startsWith("/en/");

	const examplesUrl = framework?.exemplos;

	const [sample, setSample] = useState("");
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState(null);
	const [copied, setCopied] = useState(false);

	useEffect(() => {
		setSample("");
		setError(null);
		setLoading(false);

		if (!framework) return;

		const exemploPath = framework.exemplo;
		if (!exemploPath) {
			setSample(
				isEn
					? `// Full examples: ${examplesUrl || "see repository"}\n`
					: `// Exemplos completos: ${examplesUrl || "ver repositório"}\n`
			);
			return;
		}

		// Se locale for en, busca primeiro em /exemplos/en/
		let url = exemploPath.startsWith("/") ? exemploPath : `/${exemploPath}`;
		if (isEn && url.startsWith("/exemplos/") && !url.startsWith("/exemplos/en/")) {
			url = url.replace("/exemplos/", "/exemplos/en/");
		}

		let cancelled = false;
		setLoading(true);

		fetch(url)
			.then((res) => {
				if (!res.ok) {
					// Fallback para o arquivo original se não achar a versão traduzida
					const fallbackUrl = exemploPath.startsWith("/") ? exemploPath : `/${exemploPath}`;
					if (fallbackUrl !== url) {
						return fetch(fallbackUrl).then((r2) => {
							if (!r2.ok) throw new Error(`HTTP ${r2.status}`);
							return r2.text();
						});
					}
					throw new Error(`HTTP ${res.status}`);
				}
				return res.text();
			})
			.then((text) => {
				if (cancelled) return;
				if (text && text.trim().length > 0) {
					setSample(text);
				} else {
					setSample(
						isEn
							? "// The example file is empty. Refer to the official repository.\n"
							: "// O arquivo de exemplo está vazio. Consulte o repositório oficial.\n"
					);
					setError(isEn ? "empty file" : "arquivo vazio");
				}
			})
			.catch((err) => {
				if (cancelled) return;
				setSample(
					isEn
						? "// Could not load example.\n// Refer to official repository for complete examples.\n"
						: "// Não foi possível carregar o exemplo.\n// Consulte o repositório oficial para exemplos completos.\n"
				);
				setError(err.message || (isEn ? "load failure" : "falha ao carregar"));
			})
			.finally(() => {
				if (!cancelled) setLoading(false);
			});

		return () => {
			cancelled = true;
		};
	}, [framework?.exemplo, framework?.exemplos, isEn]);

	const lines = (sample || "").replace(/\n$/, "").split("\n");

	async function handleCopy() {
		try {
			await navigator.clipboard.writeText(sample);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch {}
	}

	return (
		<div className="card p-5 sm:p-7">
			<div className="flex flex-wrap items-start justify-between gap-4">
				<div>
					<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
						{isEn ? "Code example" : "Exemplo de código"}
					</h2>
					<p className="mt-1 text-sm text-muted">
						{isEn
							? `Starter snippet in ${framework?.linguagem}. Adjust pins and configuration for your board.`
							: `Trecho de partida em ${framework?.linguagem}. Ajuste pinos e configuração à sua placa.`}
					</p>
				</div>

				<div className="flex flex-wrap items-center gap-2">
					<button type="button" onClick={handleCopy} className="btn btn-ghost btn-sm">
						{copied ? <Check className="h-4 w-4 text-ok" aria-hidden="true" /> : <Copy className="h-4 w-4" aria-hidden="true" />}
						<span role="status">{copied ? (isEn ? "Copied" : "Copiado") : (isEn ? "Copy" : "Copiar")}</span>
					</button>
					{examplesUrl && (
						<a href={examplesUrl} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm">
							{isEn ? "More examples" : "Mais exemplos"}
							<ExternalLink className="h-4 w-4" aria-hidden="true" />
							<span className="sr-only">{isEn ? " (opens in new tab)" : " (abre em nova aba)"}</span>
						</a>
					)}
				</div>
			</div>

			<div className="code-panel mt-5" aria-busy={loading}>
				<div className="flex items-center justify-between border-b border-white/10 px-4 py-2.5 text-xs text-[#a6afbd]">
					<span className="font-mono">{framework?.nome}</span>
					<span>{loading ? (isEn ? "Loading example…" : "Carregando exemplo…") : framework?.linguagem}</span>
				</div>
				<pre tabIndex={0} aria-label={isEn ? `Code example in ${framework?.linguagem}` : `Código de exemplo em ${framework?.linguagem}`}>
					<code>
						{lines.map((line, idx) => (
							<span key={idx} className="flex">
								<span className="mr-4 w-7 shrink-0 select-none text-right text-[#7d8794]">{idx + 1}</span>
								<span className="min-w-0 whitespace-pre text-[#e9eef4]">{line || " "}</span>
							</span>
						))}
					</code>
				</pre>
			</div>

			{error && (
				<p role="alert" className="callout callout-warn mt-4">
					{isEn
						? `Could not load local example (${error}). Use “More examples” to view official code.`
						: `Não foi possível carregar o exemplo local (${error}). Use “Mais exemplos” para ver o código oficial.`}
				</p>
			)}
		</div>
	);
}