// i18n.jsx — Language strings for EN/RU + language toggle UI

const STRINGS = {
  en: {
    systemOnline: '[ SYSTEM ONLINE ]',
    brand: 'CATCHFLOW',
    subtitle: 'HUNTER · DAILY DIRECTIVE',
    notification: '[ NOTIFICATION ]',
    dailyQuest: 'DAILY QUEST',
    threeObjectives: '3 OBJECTIVES · TAP TO BEGIN',
    questDate: '[ DAILY QUEST · 04.27 ]',
    roadTo: 'THE ROAD',
    rankD: 'TO RANK D',
    questDeepWork: 'DEEP WORK · 90 MIN',
    questRun: 'TRAINING · 5KM RUN',
    questSleep: 'REST · 7H SLEEP',
    cleared: 'CLEARED',
    pending: 'PENDING',
    expRank: (r) => `EXP · RANK ${r}`,
    reward: 'REWARD · 260 XP',
    streak: 'STREAK · 12D',
    levelUp1: 'LEVEL',
    levelUp2: 'UP',
    rankChange: 'RANK · E → D',
    xpGain: '+260 XP · STREAK 12 → 13',
    rankD2: 'RANK · D',
    goodHunt1: 'GOOD HUNT,',
    goodHunt2: 'HUNTER',
    miniExp: 'EXP\u00a0·\u00a096%',
    miniStreak: 'STREAK\u00a013',
    todayCleared: '[ TODAY · CLEARED ]',
    miniDeep: 'DEEP WORK · 90M',
    miniRun: 'RUN · 5KM',
    miniSleep: 'SLEEP · 7H',
    tomorrow: '[ TOMORROW · 06:00 ]',
    newQuest: 'NEW DAILY QUEST',
    nav: ['QUEST', 'STATS', 'GUILD', 'HUNTER'],
    tagline: 'LEVEL UP · DAILY',
  },
  ru: {
    systemOnline: '[ СИСТЕМА АКТИВНА ]',
    brand: 'CATCHFLOW',
    subtitle: 'ОХОТНИК · ДНЕВНОЙ ПРИКАЗ',
    notification: '[ УВЕДОМЛЕНИЕ ]',
    dailyQuest: 'ДНЕВНОЙ КВЕСТ',
    threeObjectives: '3 ЦЕЛИ · НАЖМИТЕ ЧТОБЫ НАЧАТЬ',
    questDate: '[ ДНЕВНОЙ КВЕСТ · 27.04 ]',
    roadTo: 'ПУТЬ',
    rankD: 'К РАНГУ D',
    questDeepWork: 'ФОКУС · 90 МИН',
    questRun: 'ТРЕНИРОВКА · 5 КМ',
    questSleep: 'ОТДЫХ · 7Ч СНА',
    cleared: 'ВЫПОЛНЕНО',
    pending: 'ОЖИДАЕТ',
    expRank: (r) => `ОПЫТ · РАНГ ${r}`,
    reward: 'НАГРАДА · 260 XP',
    streak: 'СТРИК · 12Д',
    levelUp1: 'НОВЫЙ',
    levelUp2: 'УРОВЕНЬ',
    rankChange: 'РАНГ · E → D',
    xpGain: '+260 XP · СТРИК 12 → 13',
    rankD2: 'РАНГ · D',
    goodHunt1: 'УДАЧНОЙ',
    goodHunt2: 'ОХОТЫ',
    miniExp: 'ОПЫТ\u00a0·\u00a096%',
    miniStreak: 'СТРИК\u00a013',
    todayCleared: '[ СЕГОДНЯ · ВЫПОЛНЕНО ]',
    miniDeep: 'ФОКУС · 90М',
    miniRun: 'БЕГ · 5 КМ',
    miniSleep: 'СОН · 7Ч',
    tomorrow: '[ ЗАВТРА · 06:00 ]',
    newQuest: 'НОВЫЙ КВЕСТ',
    nav: ['КВЕСТ', 'ПРОФИЛЬ', 'ГИЛЬДИЯ', 'ОХОТНИК'],
    tagline: 'УРОВЕНЬ ВЫШЕ · КАЖДЫЙ ДЕНЬ',
  },
};

// Detect default language from URL ?lang=ru, localStorage, or browser
function detectLang() {
  try {
    const urlLang = new URLSearchParams(window.location.search).get('lang');
    if (urlLang === 'ru' || urlLang === 'en') return urlLang;
    const stored = localStorage.getItem('catchflow:lang');
    if (stored === 'ru' || stored === 'en') return stored;
    const nav = (navigator.language || 'en').toLowerCase();
    if (nav.startsWith('ru')) return 'ru';
  } catch {}
  return 'en';
}

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

function LangProvider({ children }) {
  const [lang, setLangState] = React.useState(detectLang);

  const setLang = React.useCallback((l) => {
    setLangState(l);
    try { localStorage.setItem('catchflow:lang', l); } catch {}
  }, []);

  // Allow the parent page (site) to switch language via postMessage.
  // Message shape: { type: 'catchflow:setLang', lang: 'ru' | 'en' }
  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e && e.data;
      if (d && d.type === 'catchflow:setLang' && (d.lang === 'ru' || d.lang === 'en')) {
        setLang(d.lang);
      }
    };
    window.addEventListener('message', onMsg);
    // Tell the parent we're ready so it can send the initial lang preference
    try { window.parent && window.parent.postMessage({ type: 'catchflow:ready' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, [setLang]);

  const value = React.useMemo(() => ({
    lang,
    setLang,
    t: STRINGS[lang] || STRINGS.en,
  }), [lang, setLang]);

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

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

// Floating language toggle pill — sits in top-right of the stage
function LangToggle() {
  const { lang, setLang } = useLang();
  const pillStyle = (active) => ({
    padding: '10px 18px',
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 18,
    fontWeight: 600,
    letterSpacing: '0.16em',
    color: active ? '#03060d' : '#7DEBFF',
    background: active ? '#7DEBFF' : 'transparent',
    border: 'none',
    cursor: 'pointer',
    transition: 'all 150ms',
    textShadow: active ? 'none' : '0 0 6px rgba(125,235,255,0.6)',
  });

  return (
    <div style={{
      position: 'absolute',
      top: 36, right: 36,
      display: 'flex',
      background: 'rgba(8, 18, 40, 0.7)',
      border: '1.5px solid rgba(125,235,255,0.5)',
      backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
      clipPath: 'polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px)',
      zIndex: 1000,
      boxShadow: '0 0 14px rgba(125,235,255,0.3)',
    }}>
      <button onClick={() => setLang('en')} style={pillStyle(lang === 'en')}>EN</button>
      <button onClick={() => setLang('ru')} style={pillStyle(lang === 'ru')}>RU</button>
    </div>
  );
}

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