// i18n for Sellatr landing. Provides Lang context + useT() hook.
// Pattern: const t = useT(); t('عربي', 'English')
// English uses Geist; Arabic uses IBM Plex Sans Arabic.

const LangContext = React.createContext({ lang: 'ar', setLang: () => {} });

const LangProvider = ({ children }) => {
  const [lang, setLangState] = React.useState(() => {
    try { return localStorage.getItem('sellatr-lang') || 'ar'; } catch { return 'ar'; }
  });
  const setLang = React.useCallback((next) => {
    setLangState(next);
    try { localStorage.setItem('sellatr-lang', next); } catch {}
  }, []);
  React.useEffect(() => {
    const html = document.documentElement;
    html.lang = lang;
    html.dir = lang === 'ar' ? 'rtl' : 'ltr';
    // Pick the right default font family on body too
    document.body.style.fontFamily = lang === 'ar' ? 'var(--font-arabic)' : 'var(--font-sans)';
  }, [lang]);
  return (
    <LangContext.Provider value={{ lang, setLang }}>
      {children}
    </LangContext.Provider>
  );
};

const useLang = () => React.useContext(LangContext);

// Returns a function: t(arabicText, englishText).
// Optionally pass an object: t({ ar: '..', en: '..' }).
const useT = () => {
  const { lang } = useLang();
  return (ar, en) => {
    // Plain object dict form: t({ ar: '..', en: '..' })
    // Must NOT match React elements (which are objects with $$typeof).
    if (typeof ar === 'object' && ar !== null && !React.isValidElement(ar) && !Array.isArray(ar)) {
      return ar[lang] ?? ar.ar ?? ar.en ?? '';
    }
    return lang === 'en' ? (en ?? ar) : ar;
  };
};

// Language toggle button for the nav.
const LangToggle = ({ compact }) => {
  const { lang, setLang } = useLang();
  return (
    <button
      onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '7px 11px', borderRadius: 999,
        background: '#fff', border: '1px solid var(--border)',
        color: 'var(--fg)', fontSize: 12, fontWeight: 700,
        cursor: 'pointer', boxShadow: 'var(--shadow-1)',
        fontFamily: lang === 'ar' ? 'var(--font-arabic)' : 'var(--font-sans)',
        transition: 'all 160ms var(--ease-out)',
      }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}
      aria-label="Switch language"
    >
      <Icon name="globe" size={13} />
      <span>{lang === 'ar' ? 'EN' : 'العربية'}</span>
    </button>
  );
};

// Western Arabic digits utility for English mode (so "١٢" → "12")
const localizedNum = (str, lang) => {
  if (typeof str !== 'string') return str;
  if (lang !== 'en') return str;
  const map = { '٠':'0','١':'1','٢':'2','٣':'3','٤':'4','٥':'5','٦':'6','٧':'7','٨':'8','٩':'9' };
  return str.replace(/[٠-٩]/g, d => map[d]);
};

Object.assign(window, { LangContext, LangProvider, useLang, useT, LangToggle, localizedNum });