'use client';

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

type Lang = 'ar' | 'en' | 'fr';

interface LangContextType {
  lang: Lang;
  setLang: (l: Lang) => void;
  dir: 'ltr' | 'rtl';
}

const LangContext = createContext<LangContextType>({
  lang: 'ar',
  setLang: () => {},
  dir: 'rtl',
});

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

  useEffect(() => {
    const saved = localStorage.getItem('once-lang') as Lang | null;
    if (saved && ['ar', 'en', 'fr'].includes(saved)) {
      setLangState(saved);
      return;
    }
    // Auto-detect from browser - default to Arabic
    const browserLang = navigator.language.toLowerCase();
    if (browserLang.startsWith('en')) setLangState('en');
    else if (browserLang.startsWith('fr')) setLangState('fr');
    else setLangState('ar');
  }, []);

  const setLang = (l: Lang) => {
    setLangState(l);
    localStorage.setItem('once-lang', l);
  };

  const dir: 'ltr' | 'rtl' = lang === 'ar' ? 'rtl' : 'ltr';

  return (
    <LangContext.Provider value={{ lang, setLang, dir }}>
      <div dir={dir} className={lang === 'ar' ? 'font-arabic' : ''}>
        {children}
      </div>
    </LangContext.Provider>
  );
}

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