// Anthropic-style radial spike mark, adapted as JervisBox brand glyph.
// Inlined precomputed so no cross-scope reference is needed at render time.
const BRAND_GLYPH_LINES = (() => {
  const spikes = 12;
  const out = [];
  for (let i = 0; i < spikes; i++) {
    const a = (i / spikes) * Math.PI * 2;
    const len = 9 + (i % 3) * 1.2;
    out.push({ x2: (Math.cos(a) * len).toFixed(2), y2: (Math.sin(a) * len).toFixed(2) });
  }
  return out;
})();

function BrandGlyph({ className = 'anthropic-mark brand-glyph' }) {
  return (
    <svg className={className} viewBox="-12 -12 24 24" aria-hidden="true">
      {BRAND_GLYPH_LINES.map((ln, i) => (
        <line key={i} x1="0" y1="0" x2={ln.x2} y2={ln.y2}
          stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
      ))}
    </svg>
  );
}

function LangSwitcher() {
  const { lang, setLang, t } = useI18n();
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);

  React.useEffect(() => {
    function onDoc(e) {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    }
    if (open) document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  return (
    <div className="lang-switcher" ref={wrapRef}>
      <button
        className="lang-btn"
        onClick={() => setOpen(o => !o)}
        aria-label={t('lang.label')}
        aria-haspopup="listbox"
        aria-expanded={open}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ flexShrink: 0 }}>
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18M12 3a13 13 0 010 18M12 3a13 13 0 000 18" />
        </svg>
        <span className="lang-code">{lang === 'en' ? 'EN' : 'KO'}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ opacity: 0.6 }}>
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      {open && (
        <div className="lang-menu" role="listbox">
          <button
            role="option"
            aria-selected={lang === 'en'}
            className={'lang-option' + (lang === 'en' ? ' active' : '')}
            onClick={() => { setLang('en'); setOpen(false); }}
          >
            <span>English</span>
            <span className="lang-option-code">EN</span>
            {lang === 'en' && <span className="lang-check">✓</span>}
          </button>
          <button
            role="option"
            aria-selected={lang === 'ko'}
            className={'lang-option' + (lang === 'ko' ? ' active' : '')}
            onClick={() => { setLang('ko'); setOpen(false); }}
          >
            <span>한국어</span>
            <span className="lang-option-code">KO</span>
            {lang === 'ko' && <span className="lang-check">✓</span>}
          </button>
        </div>
      )}
    </div>
  );
}

function shortAddress(addr) {
  return addr.slice(0, 6) + '…' + addr.slice(-4);
}

function Nav({ route, onNavigate }) {
  const { address, connecting, connect, chainConfig, isAdmin } = useWallet();
  const { t } = useI18n();

  const link = (id, label) => (
    <a
      className={'nav-link' + (route === id ? ' active' : '')}
      onClick={(e) => { e.preventDefault(); onNavigate(id); }}
      href={'#' + id}
    >{label}</a>
  );
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="brand" onClick={() => onNavigate('landing')}>
          <BrandGlyph />
          <span className="brand-mark">Jervis<em>Box</em></span>
          <span className="brand-tag">{t('brand.tag')}</span>
        </div>
        <div className="nav-links">
          {link('dashboard', t('nav.dashboard'))}
          {link('upload', t('nav.newRecord'))}
          {link('verify', t('nav.verify'))}
          {chainConfig?.configured && link('explorer', t('nav.explorer'))}
          {link('settings', t('nav.settings'))}
          {isAdmin && link('admin', t('nav.admin'))}
          <LangSwitcher />
          {address ? (
            <button className="wallet-chip" onClick={() => onNavigate('settings')}>
              <span className="wallet-dot" />
              <span className="ink-4">{shortAddress(address)}</span>
            </button>
          ) : (
            <button className="btn btn-secondary btn-sm" onClick={connect} disabled={connecting}>
              {connecting ? t('wallet.connecting') : t('wallet.connect')}
            </button>
          )}
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;
window.LangSwitcher = LangSwitcher;
window.BrandGlyph = BrandGlyph;