const translationCache = {};

const TranslationContext = React.createContext(null);

function TranslationProvider({ children }) {
	const [lang, setLang] = React.useState(() => {
		const saved = localStorage.getItem("lang");
		if (saved) return saved;
		return navigator.language.startsWith("ja") ? "ja" : "en";
	});

	const [translations, setTranslations] = React.useState(() => {
		return translationCache[lang] || {};
	});
	const [loading, setLoading] = React.useState(!translationCache[lang]);

	React.useEffect(() => {
		if (translationCache[lang]) {
			setTranslations(translationCache[lang]);
			setLoading(false);
			document.documentElement.setAttribute("lang", lang);
			localStorage.setItem("lang", lang);
			return;
		}

		setLoading(true);
		fetch(`/src/locales/${lang}.json`)
			.then((res) => res.json())
			.then((data) => {
				translationCache[lang] = data;
				setTranslations(data);
				document.documentElement.setAttribute("lang", lang);
				localStorage.setItem("lang", lang);
				setLoading(false);
			})
			.catch((err) => {
				console.error("Failed to load translations:", err);
				setLoading(false);
			});
	}, [lang]);

	const t = React.useCallback(
		(key) => {
			if (translations[key]) {
				return translations[key];
			}
			return key;
		},
		[translations],
	);

	const changeLanguage = React.useCallback((newLang) => {
		setLang(newLang);
	}, []);

	const value = React.useMemo(
		() => ({ lang, t, changeLanguage, loading }),
		[lang, t, changeLanguage, loading],
	);

	return React.createElement(TranslationContext.Provider, { value }, children);
}

function useTranslation() {
	const ctx = React.useContext(TranslationContext);
	if (!ctx) {
		throw new Error("useTranslation must be used within a TranslationProvider");
	}
	return ctx;
}