/* global React */
/* i18n — merge, context, provider, useLang
   Depends on: i18n-langs.jsx (window._WCS_LANG_LIST/_WCS_COUNTRY_LANG/_WCS_T)
               i18n-partial.jsx (window._WCS_PARTIAL) */
const { createContext, useContext, useState, useEffect } = React;

const LANG_LIST    = window._WCS_LANG_LIST;
const COUNTRY_LANG = window._WCS_COUNTRY_LANG;
const T            = window._WCS_T;
const PARTIAL      = window._WCS_PARTIAL;

/* Merge 22 partial languages into T (EN base + partial overrides) */
Object.keys(PARTIAL).forEach(code => {
  T[code] = Object.assign({}, T.en, PARTIAL[code]);
});

/* 솔루션 섹션 UI 오버레이(sol_*, cat_*, sol_btn_*) 30개 언어를 T에 병합.
   (i18n-solutions.jsx 가 window._WCS_SOL_T 정의 — 본 파일보다 먼저 로드) */
const SOL_T = (typeof window !== 'undefined' && window._WCS_SOL_T) || {};
Object.keys(SOL_T).forEach(code => {
  T[code] = Object.assign({}, T[code] || T.en, SOL_T[code]);
});

/* ── Context & Provider ─────────────────────────────────────── */
const LangContext = createContext(null);

function LangProvider({ children }) {
  const [lang, setLangState] = useState('en');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const saved = localStorage.getItem('wcs-lang');
    if (saved && T[saved]) {
      applyLang(saved);
      setLoading(false);
      return;
    }

    fetch('https://ipapi.co/json/')
      .then(r => r.json())
      .then(data => {
        const countryCode = data.country_code;
        const detected = COUNTRY_LANG[countryCode] || data.languages?.split(',')[0]?.split('-')[0] || 'en';
        const code = T[detected] ? detected : 'en';
        applyLang(code);
      })
      .catch(() => {
        const bl = navigator.language.split('-')[0];
        applyLang(T[bl] ? bl : 'en');
      })
      .finally(() => setLoading(false));
  }, []);

  function _setMeta(attr, key, val) {
    let el = document.querySelector(`meta[${attr}="${key}"]`);
    if (!el) { el = document.createElement('meta'); el.setAttribute(attr, key); document.head.appendChild(el); }
    el.setAttribute('content', val);
  }

  function applyLang(code) {
    setLangState(code);
    const info = LANG_LIST.find(l => l.code === code);
    document.documentElement.dir = info?.dir || 'ltr';
    document.documentElement.lang = code;

    const tr   = T[code] || T.en;
    const title = tr.seo_title || T.en.seo_title;
    const desc  = tr.seo_desc  || T.en.seo_desc;
    const base  = 'https://backendwcs.com';
    const url   = `${base}/?lang=${code}`;
    const ogImg = `${base}/og-image.png`;

    document.title = title;
    _setMeta('name',     'description',         desc);
    _setMeta('property', 'og:title',            title);
    _setMeta('property', 'og:description',      desc);
    _setMeta('property', 'og:url',              url);
    _setMeta('property', 'og:locale',           code.replace('-', '_'));
    _setMeta('property', 'og:image',            ogImg);
    _setMeta('name',     'twitter:title',       title);
    _setMeta('name',     'twitter:description', desc);
    _setMeta('name',     'twitter:image',       ogImg);

    const canonical = document.querySelector('link[rel="canonical"]');
    if (canonical) canonical.href = url;
  }

  function setLang(code) {
    localStorage.setItem('wcs-lang', code);
    applyLang(code);
  }

  function t(key) {
    return (T[lang] && T[lang][key]) || T.en[key] || key;
  }

  return React.createElement(
    LangContext.Provider,
    { value: { lang, setLang, t, loading, LANG_LIST } },
    children
  );
}

function useLang() {
  const ctx = useContext(LangContext);
  if (!ctx) return { lang: 'en', setLang: () => {}, t: k => k, loading: false, LANG_LIST };
  return ctx;
}

/* Expose globals */
window.LangContext   = LangContext;
window.LangProvider  = LangProvider;
window.useLang       = useLang;
window.LANG_LIST_DATA = LANG_LIST;