'use client';

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from 'react';
import {
  readStoredRegisterLang,
  storeRegisterLang,
  t as translate,
  type RegisterLang,
} from '@/lib/registerLang';

export type AppLang = RegisterLang;

type LanguageContextValue = {
  lang: AppLang;
  setLang: (lang: AppLang) => void;
  t: (en: string, tl: string) => string;
};

const LanguageContext = createContext<LanguageContextValue | null>(null);

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [lang, setLangState] = useState<AppLang>('en');

  useEffect(() => {
    setLangState(readStoredRegisterLang());
  }, []);

  const setLang = useCallback((next: AppLang) => {
    setLangState(next);
    storeRegisterLang(next);
  }, []);

  const value = useMemo<LanguageContextValue>(
    () => ({
      lang,
      setLang,
      t: (en, tl) => translate(lang, en, tl),
    }),
    [lang, setLang]
  );

  return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
}

export function useLanguage() {
  const ctx = useContext(LanguageContext);
  if (!ctx) throw new Error('useLanguage must be used within LanguageProvider');
  return ctx;
}