import React, { createContext, useState, useCallback, useMemo } from 'react';
import es from './locales/es';
import ca from './locales/ca';

const locales = { es, ca };

function getInitialLang() {
  try {
    const saved = localStorage.getItem('ff-lang');
    if (saved === 'ca' || saved === 'es') return saved;
  } catch {}
  const browserLang = navigator.language || navigator.userLanguage || '';
  return browserLang.startsWith('ca') ? 'ca' : 'es';
}

export const LanguageContext = createContext(null);

export function LanguageProvider({ children }) {
  const [lang, setLangState] = useState(getInitialLang);

  const setLang = useCallback((newLang) => {
    if (newLang !== 'ca' && newLang !== 'es') return;
    setLangState(newLang);
    try {
      localStorage.setItem('ff-lang', newLang);
    } catch {}
  }, []);

  const t = useCallback((key) => {
    return locales[lang]?.[key] || locales.es[key] || key;
  }, [lang]);

  const value = useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);

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