import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';

import { bn } from './translations/bn';
import { en, type Translations } from './translations/en';

type Lang = 'en' | 'bn';

interface LangContextValue {
    lang: Lang;
    t: Translations;
    toggleLang: () => void;
}

const LangContext = createContext<LangContextValue>({
    lang: 'en',
    t: en,
    toggleLang: () => {},
});

const STORAGE_KEY = 'kb_lang';

export function LangProvider({ children }: { children: ReactNode }) {
    const [lang, setLang] = useState<Lang>(() => {
        try {
            const stored = localStorage.getItem(STORAGE_KEY);
            return stored === 'bn' ? 'bn' : 'en';
        } catch {
            return 'en';
        }
    });

    useEffect(() => {
        try {
            localStorage.setItem(STORAGE_KEY, lang);
        } catch {
            // ignore
        }
    }, [lang]);

    const toggleLang = () => setLang((l) => (l === 'en' ? 'bn' : 'en'));

    const t = lang === 'bn' ? bn : en;

    return <LangContext.Provider value={{ lang, t, toggleLang }}>{children}</LangContext.Provider>;
}

export function useLang() {
    return useContext(LangContext);
}