/* eslint-disable */
// I18n.jsx — tiny language toggle for the prototype.
//
// Usage:
//   const t = useT();
//   <h1>{t('Mint', 'Минт')}</h1>
//
// The LangProvider is mounted at the top of PrototypeApp; a small
// <LangToggle/> control lives in the console top bar and onboarding header.
// State is persisted to localStorage so refreshing the page keeps the choice.

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

const LangProvider = ({ children }) => {
  const [lang, setLangState] = React.useState(() => {
    try {
      const saved = localStorage.getItem('kgst.lang');
      return saved === 'ru' ? 'ru' : 'en';
    } catch (e) { return 'en'; }
  });
  const setLang = React.useCallback((l) => {
    setLangState(l);
    try { localStorage.setItem('kgst.lang', l); } catch (e) {}
  }, []);
  const ctx = React.useMemo(() => ({ lang, setLang }), [lang, setLang]);
  return <LangContext.Provider value={ctx}>{children}</LangContext.Provider>;
};

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

// useT — returns a translator bound to the current language. Call as t(en, ru).
// If ru is omitted, falls back to en. The function identity changes when
// lang changes, so components consuming it re-render automatically.
const useT = () => {
  const { lang } = useLang();
  return React.useCallback((en, ru) => (lang === 'ru' && ru) ? ru : en, [lang]);
};

// Compact segmented toggle. Tunable: size="sm" for the topbar, "md" for auth header.
const LangToggle = ({ size = 'sm', style }) => {
  const { lang, setLang } = useLang();
  const opts = [
    { id: 'en', label: 'EN' },
    { id: 'ru', label: 'RU' },
  ];
  const pad = size === 'md' ? '5px 12px' : '3px 9px';
  const font = size === 'md' ? 12 : 10.5;
  return (
    <div role="group" aria-label="Language"
      style={{
        display: 'inline-flex', alignItems: 'center',
        padding: 2, borderRadius: 999,
        background: 'var(--ink-2)',
        border: '1px solid var(--border-subtle)',
        gap: 1,
        ...style,
      }}>
      {opts.map(o => {
        const active = o.id === lang;
        return (
          <button key={o.id} type="button"
            onClick={() => setLang(o.id)}
            style={{
              padding: pad, borderRadius: 999, fontSize: font, fontWeight: 600,
              letterSpacing: '0.06em',
              background: active ? 'rgba(201,152,64,0.14)' : 'transparent',
              color: active ? 'var(--gold-200)' : 'var(--fg-tertiary)',
              border: '1px solid ' + (active ? 'var(--border-gold)' : 'transparent'),
              cursor: 'pointer', fontFamily: 'inherit',
              transition: 'background 120ms ease, color 120ms ease',
            }}>
            {o.label}
          </button>
        );
      })}
    </div>
  );
};

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