import { faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { JSX, useLayoutEffect, useState } from "react";
import { type BundledLanguage, highlight } from "../../highlight";

type Props = {
	code: string;
	language: BundledLanguage;
};

function Plaintext({ code }: { code: string }) {
	const lines = code.split("\n");
	return (
		<pre>
			<code>
				{lines.map((line, i) => (
					<span key={i} className="line">
						{line}
						{i < lines.length - 1 ? "\n" : ""}
					</span>
				))}
			</code>
		</pre>
	);
}

export default function CodeBlock({ code, language }: Props) {
	const [nodes, setNodes] = useState<JSX.Element | null>(null);
	const [showCopied, setShowCopied] = useState(false);

	useLayoutEffect(() => {
		highlight(code, language)
			.then(setNodes)
			.catch(() => setNodes(null));
	}, [code, language]);

	const handleCopy = () => {
		navigator.clipboard.writeText(code).then(() => {
			setShowCopied(true);
			setTimeout(() => setShowCopied(false), 3000);
		});
	};

	return (
		<div className="relative">
			{code !== "" && (
				<button
					onClick={handleCopy}
					className="absolute top-2 right-2 z-10 px-2 py-1 bg-white border border-gray-300 rounded shadow-md hover:bg-gray-100 transition-colors"
					title="コードをコピーする"
				>
					<FontAwesomeIcon icon={faCopy} className="text-gray-600" />
					{showCopied && (
						<span className="ml-1 text-xs text-brand-600">Copied!</span>
					)}
				</button>
			)}
			<div className="shiki h-full w-full p-2 pr-12 bg-white rounded-lg border border-gray-300 whitespace-pre-wrap break-words">
				{nodes ?? <Plaintext code={code} />}
			</div>
		</div>
	);
}