'use client';

import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useState,
} from 'react';
import { I18N_LANGUAGES, Language } from '@/i18n/config';
import { DirectionProvider as RadixDirectionProvider } from '@radix-ui/react-direction';

interface I18nProviderProps {
  children: ReactNode;
}

interface LanguageContextProps {
  languageCode: string;
  language: Language;
  changeLanguage: (code: string) => void;
}

const LanguageContext = createContext<LanguageContextProps | undefined>(
  undefined,
);

function I18nProvider({ children }: I18nProviderProps) {
  /*
     * Starts on the server default and adopts the stored language after mount.
     *
     * Reading localStorage in the useState initializer ran it during the
     * client first render, so anyone with a non-default language stored
     * rendered different markup than the server sent — React error #418 on
     * every load, before anything else on the page. The effect below runs
     * after hydration, where a change is a normal re-render, not a mismatch.
     */
  const [languageCode, setLanguageCode] = useState<string>("en");

  useEffect(() => {
    const stored = localStorage.getItem("language");
    if (stored && stored !== languageCode) {
      setLanguageCode(stored);
    }
    // Mount only; later changes go through changeLanguage.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Find the current language configuration based on the language code
  const language =
    I18N_LANGUAGES.find((lang) => lang.code === languageCode) ||
    I18N_LANGUAGES[0];

  useEffect(() => {
    if (typeof window !== 'undefined') {
      // Only access localStorage in the browser
      localStorage.setItem('language', languageCode);
    }
    if (language?.direction) {
      document.documentElement.setAttribute('dir', language.direction);
    }
  }, [languageCode, language]);

  const changeLanguage = (code: string) => {
    setLanguageCode(code);
    if (typeof window !== 'undefined') {
      localStorage.setItem('language', code);
    }
  };

  return (
    <LanguageContext.Provider
      value={{ languageCode, changeLanguage, language }}
    >
      <RadixDirectionProvider dir={language.direction}>
        {children}
      </RadixDirectionProvider>
    </LanguageContext.Provider>
  );
}

const useLanguage = () => {
  const context = useContext(LanguageContext);
  if (!context) {
    throw new Error('useLanguage must be used within an I18nProvider');
  }
  return context;
};

export { I18nProvider, useLanguage };