// EN / 日本語 language switch and the one-time Japanese suggestion card (shared by /en/ and /ja/).
// On /en/ and /ja/ the URL decides the language: the switch is plain links. Only the root router
// (index.html) picks a language, using the choice remembered here first and the browser language second.
// The choice is stored in localStorage and in an `nh_lang` cookie the router and the quote app can read.

const LANG_PAGES = { en: '/en/', ja: '/ja/' };
const LANG_KEY = 'nh-lang';
const LANG_SUGGEST_KEY = 'nh-lang-suggest';

function rememberLang(lang) {
  try { localStorage.setItem(LANG_KEY, lang); } catch (e) { /* storage blocked */ }
  document.cookie = `nh_lang=${lang}; path=/; max-age=31536000; SameSite=Lax`;
}

function storedLang() {
  try {
    const v = localStorage.getItem(LANG_KEY);
    if (v) return v;
  } catch (e) { /* storage blocked */ }
  const m = document.cookie.match(/(?:^|; )nh_lang=([^;]+)/);
  return m ? m[1] : null;
}

// variant: 'pill' (header and menu) or 'footer' (text links on the dark footer).
// Each label is written in its own language, never "Japanese" / "英語".
function LangSwitch({ current, variant = 'pill', className = '' }) {
  const items = variant === 'footer'
    ? [['en', 'English'], ['ja', '日本語']]
    : [['en', 'EN'], ['ja', '日本語']];
  return (
    <div className={`lang-switch lang-switch--${variant} ${className}`.trim()} role="group" aria-label={current === 'ja' ? '言語 / Language' : 'Language / 言語'}>
      {items.map(([code, label]) => (
        <a
          key={code}
          href={LANG_PAGES[code]}
          hrefLang={code}
          lang={code}
          aria-current={code === current ? 'true' : undefined}
          onClick={() => rememberLang(code)}
        >
          {label}
        </a>
      ))}
    </div>
  );
}

// Shown on the English page only, once, when the browser's first language is Japanese.
// Add ?suggest=ja to the URL to preview it from any browser.
function LangSuggest() {
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    const force = /[?&]suggest=ja(?:&|$)/.test(window.location.search);
    const first = (navigator.languages && navigator.languages[0]) || navigator.language || '';
    let dismissed = false;
    try { dismissed = localStorage.getItem(LANG_SUGGEST_KEY) === 'done'; } catch (e) { /* storage blocked */ }
    if (force || (!dismissed && !storedLang() && /^ja\b/i.test(first))) setShow(true);
  }, []);

  if (!show) return null;

  const done = (lang) => {
    try { localStorage.setItem(LANG_SUGGEST_KEY, 'done'); } catch (e) { /* storage blocked */ }
    if (lang) rememberLang(lang);
    setShow(false);
  };

  return (
    <aside className="lang-suggest" lang="ja" aria-labelledby="lang-suggest-title">
      <p id="lang-suggest-title" className="lang-suggest-title">日本語のページがあります。</p>
      <p className="lang-suggest-text">このサイトを日本語で表示しますか？</p>
      <div className="lang-suggest-actions">
        <a className="btn btn-accent" href={LANG_PAGES.ja} hrefLang="ja" onClick={() => done('ja')}>日本語で見る</a>
        <button type="button" className="btn btn-outline" onClick={() => done('en')}>英語のまま見る</button>
      </div>
      <button type="button" className="lang-suggest-close" aria-label="閉じる" onClick={() => done(null)}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
      </button>
    </aside>
  );
}

Object.assign(window, { LANG_PAGES, rememberLang, storedLang, LangSwitch, LangSuggest });