import React, { createContext, useState, useCallback, useMemo } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import es from './locales/es';
import ca from './locales/ca';

const locales = { es, ca };
const STORAGE_KEY = 'ff-lang';

function getInitialLang() {
  // Default to 'es' - will be updated from AsyncStorage in the provider
  return 'es';
}

export const LanguageContext = createContext(null);

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

  // Load saved language on mount
  React.useEffect(() => {
    AsyncStorage.getItem(STORAGE_KEY).then((saved) => {
      if (saved === 'ca' || saved === 'es') {
        setLangState(saved);
      }
      // Default to 'es' if no saved preference
      setReady(true);
    }).catch(() => {
      setReady(true);
    });
  }, []);

  const setLang = useCallback((newLang) => {
    if (newLang !== 'ca' && newLang !== 'es') return;
    setLangState(newLang);
    AsyncStorage.setItem(STORAGE_KEY, newLang).catch(() => {});
  }, []);

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

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

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