/* i18n.jsx — language context + full translation strings */

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

function LangProvider({ children }) {
  const [lang, setLang] = React.useState(() => {
    try { return localStorage.getItem('pop_lang') || 'zh'; } catch { return 'zh'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('pop_lang', lang); } catch {}
    document.documentElement.lang = lang === 'zh' ? 'zh' : 'en';
  }, [lang]);
  return <LangContext.Provider value={{ lang, setLang }}>{children}</LangContext.Provider>;
}

function useLang() { return React.useContext(LangContext); }

/* T component — pick zh or en string */
function T({ zh, en }) {
  const { lang } = useLang();
  return <>{lang === 'zh' ? zh : en}</>;
}

/* SN — species name pill, language aware */
function SN({ id }) {
  const { lang } = useLang();
  const s = SPECIES.find(x => x.id === id);
  if (!s) return null;
  if (lang === 'zh') return <span>{s.zh}<span className="cjk-en">（{s.en}）</span></span>;
  return <span>{s.en}</span>;
}

/* CE — paired CJK(EN), but EN-only when lang=en */
function CE({ zh, en }) {
  const { lang } = useLang();
  if (lang === 'zh') return <>{zh}<span className="cjk-en">（{en}）</span></>;
  return <em style={{fontStyle:'italic'}}>{en}</em>;
}

/* Helper: English-aware num display */
function YR({ y }) { return <span className="num">{y}</span>; }

Object.assign(window, { LangContext, LangProvider, useLang, T, SN, CE, YR });