// WorkTwins — static-site i18n runtime

const WT_SUPPORTED_LOCALES = [
  'en', 'es', 'zh', 'ar', 'pt', 'ru', 'id', 'fr', 'de', 'ja', 'tr', 'it', 'nl',
  'hi', 'bn', 'hu', 'nb', 'pl', 'sv'
];

const WT_LOCALE_NAMES = {
  en: 'English',
  es: 'Español',
  zh: '中文',
  ar: 'العربية',
  pt: 'Português',
  ru: 'Русский',
  id: 'Bahasa Indonesia',
  fr: 'Français',
  de: 'Deutsch',
  ja: '日本語',
  tr: 'Türkçe',
  it: 'Italiano',
  nl: 'Nederlands',
  hi: 'हिन्दी',
  bn: 'বাংলা',
  hu: 'Magyar',
  nb: 'Norsk',
  pl: 'Polski',
  sv: 'Svenska'
};

const WT_FLAG_URLS = {
  en: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1fa-1f1f8.svg',
  es: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ea-1f1f8.svg',
  zh: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1e8-1f1f3.svg',
  ar: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f8-1f1e6.svg',
  pt: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f5-1f1f9.svg',
  ru: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f7-1f1fa.svg',
  id: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ee-1f1e9.svg',
  fr: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1eb-1f1f7.svg',
  de: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1e9-1f1ea.svg',
  ja: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ef-1f1f5.svg',
  tr: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f9-1f1f7.svg',
  it: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ee-1f1f9.svg',
  nl: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f3-1f1f1.svg',
  hi: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ee-1f1f3.svg',
  bn: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1e7-1f1e9.svg',
  hu: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1ed-1f1fa.svg',
  nb: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f3-1f1f4.svg',
  pl: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f5-1f1f1.svg',
  sv: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f1f8-1f1ea.svg'
};

const WT_I18N_STORAGE_KEY = 'worktwins-language';
const WT_DEFAULT_FLAG_URL = 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f310.svg';
const WT_I18nContext = React.createContext(null);
const wtTranslationCache = {};
let wtActiveLocale = 'en';
let wtActiveTranslations = {};
let wtEnglishTranslations = {};

function wtNormalizeLocale(locale) {
  if (!locale) return null;
  const clean = String(locale).trim();
  if (WT_SUPPORTED_LOCALES.includes(clean)) return clean;
  const base = clean.split('-')[0].toLowerCase();
  return WT_SUPPORTED_LOCALES.includes(base) ? base : null;
}

function wtDetectLanguage() {
  try {
    const params = new URLSearchParams(window.location.search);
    const requested = wtNormalizeLocale(params.get('lang') || params.get('language'));
    if (requested) return requested;
  } catch (e) {}

  try {
    const saved = wtNormalizeLocale(localStorage.getItem(WT_I18N_STORAGE_KEY));
    if (saved) return saved;
  } catch (e) {}

  const browserLocales = navigator.languages && navigator.languages.length
    ? navigator.languages
    : [navigator.language];
  for (const locale of browserLocales) {
    const match = wtNormalizeLocale(locale);
    if (match) return match;
  }

  return 'en';
}

async function wtLoadLocale(locale) {
  const normalized = wtNormalizeLocale(locale) || 'en';
  if (wtTranslationCache[normalized]) return wtTranslationCache[normalized];

  const response = await fetch(`public/languages/${normalized}.json`, { cache: 'no-cache' });
  if (!response.ok) {
    if (normalized !== 'en') return wtLoadLocale('en');
    throw new Error(`Could not load WorkTwins translations for ${normalized}`);
  }

  const data = await response.json();
  wtTranslationCache[normalized] = data;
  if (normalized === 'en') wtEnglishTranslations = data;
  return data;
}

function wtTranslate(value) {
  if (typeof value !== 'string') return value;
  const key = value.trim();
  if (!key) return value;
  const translated = wtActiveTranslations[key];
  if (translated && translated !== 'non_translated_yet') return translated;
  const english = wtEnglishTranslations[key];
  if (english && english !== 'non_translated_yet') return english;
  return value;
}

function wtTranslateProps(props) {
  if (!props) return props;
  let nextProps = props;
  const propNames = ['title', 'alt', 'aria-label', 'placeholder'];
  for (const name of propNames) {
    if (typeof props[name] === 'string') {
      const translated = wtTranslate(props[name]);
      if (translated !== props[name]) {
        if (nextProps === props) nextProps = { ...props };
        nextProps[name] = translated;
      }
    }
  }
  return nextProps;
}

function wtTranslateChild(child) {
  if (typeof child === 'string') return wtTranslate(child);
  if (Array.isArray(child)) return child.map(wtTranslateChild);
  return child;
}

if (!React.__worktwinsI18nPatched) {
  const originalCreateElement = React.createElement;
  React.createElement = function patchedCreateElement(type, props, ...children) {
    const translatedProps = wtTranslateProps(props);
    const translatedChildren = children.map(wtTranslateChild);
    return originalCreateElement.apply(React, [type, translatedProps, ...translatedChildren]);
  };
  React.__worktwinsI18nPatched = true;
}

function WorkTwinsI18nProvider({ children }) {
  const [locale, setLocale] = React.useState(wtDetectLanguage);
  const [isReady, setIsReady] = React.useState(false);

  React.useEffect(() => {
    let cancelled = false;

    async function load() {
      setIsReady(false);
      try {
        const english = await wtLoadLocale('en');
        const translations = locale === 'en' ? english : await wtLoadLocale(locale);
        if (cancelled) return;
        wtActiveLocale = locale;
        wtEnglishTranslations = english;
        wtActiveTranslations = { ...english, ...translations };
        document.documentElement.lang = locale;
        document.documentElement.dir = locale === 'ar' ? 'rtl' : 'ltr';
        setIsReady(true);
      } catch (error) {
        console.warn('[worktwins:i18n] Translation load failed:', error);
        if (cancelled) return;
        wtActiveLocale = 'en';
        wtActiveTranslations = wtEnglishTranslations;
        setIsReady(true);
      }
    }

    load();
    return () => {
      cancelled = true;
    };
  }, [locale]);

  const changeLanguage = React.useCallback((newLocale) => {
    const normalized = wtNormalizeLocale(newLocale);
    if (!normalized) return;
    try { localStorage.setItem(WT_I18N_STORAGE_KEY, normalized); } catch (e) {}
    setLocale(normalized);
  }, []);

  const value = React.useMemo(() => ({
    locale,
    locales: WT_SUPPORTED_LOCALES,
    localeNames: WT_LOCALE_NAMES,
    isReady,
    t: wtTranslate,
    changeLanguage
  }), [locale, isReady, changeLanguage]);

  return (
    <WT_I18nContext.Provider value={value}>
      <div className={isReady ? 'i18n-ready' : 'i18n-loading'}>
        {children}
      </div>
    </WT_I18nContext.Provider>
  );
}

function useWorkTwinsI18n() {
  return React.useContext(WT_I18nContext) || {
    locale: wtActiveLocale,
    locales: WT_SUPPORTED_LOCALES,
    localeNames: WT_LOCALE_NAMES,
    isReady: true,
    t: wtTranslate,
    changeLanguage: () => {}
  };
}

function FloatingLanguageSwitcher() {
  const { locale, locales, localeNames, changeLanguage } = useWorkTwinsI18n();
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className="language-switcher">
      <button
        className="language-current"
        type="button"
        aria-label="Change language"
        aria-haspopup="listbox"
        aria-expanded={isOpen}
        title={`Current: ${localeNames[locale] || locale}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        <img src={WT_FLAG_URLS[locale] || WT_DEFAULT_FLAG_URL} alt="" width="24" height="24" />
      </button>

      {isOpen && (
        <div className="language-menu" role="listbox">
          {locales.map((loc) => (
            <button
              key={loc}
              className={"language-option " + (loc === locale ? 'active' : '')}
              type="button"
              role="option"
              aria-selected={loc === locale}
              onClick={() => {
                changeLanguage(loc);
                setIsOpen(false);
              }}
            >
              <img src={WT_FLAG_URLS[loc] || WT_DEFAULT_FLAG_URL} alt="" width="20" height="20" />
              <span>{localeNames[loc] || loc}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

window.WorkTwinsI18nProvider = WorkTwinsI18nProvider;
window.useWorkTwinsI18n = useWorkTwinsI18n;
window.FloatingLanguageSwitcher = FloatingLanguageSwitcher;