// nav.jsx — SharedNav: one nav component for every page
// Load order: after tweaks-panel.jsx and i18n.js, before any page JSX.
const { useState, useEffect, useRef } = React;

function Logo() {
  return <img src="dib_Logo_White.svg" alt="" className="nav__logo-img" aria-hidden="true" />;
}

/**
 * SharedNav — shared across index.html, contact.html, Articles.html, Article.html.
 *
 * Props:
 *   t        — full window.I18N[lang] object; used for t.nav.cta label
 *   tweaks   — tweaks state object (theme, language, …)
 *   setTweak — setter from useTweaks
 *   langs    — array of { value, label, flag }
 *   links    — array of { href?, label, current? }
 *              current:true renders a <span> (non-link active page indicator)
 *   logoHref  — href for the logo / wordmark (default: 'index.html')
 *   showCta   — render the "Get in touch" CTA button (default: true)
 */
function SharedNav({ t, tweaks, setTweak, langs, links = [], logoHref = 'index.html', showCta = true }) {
  const [langOpen, setLangOpen] = useState(false);
  const langRef = useRef(null);

  useEffect(() => {
    const onDoc = e => {
      if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, []);

  const currentLang = langs.find(l => l.value === tweaks.language) || langs[0];
  const isLight = tweaks.theme === 'light';
  const toggleTheme = () => setTweak('theme', isLight ? 'dark' : 'light');
  const ctaLabel = t && t.nav ? t.nav.cta : 'Get in touch →';

  return (
    <nav className="nav" aria-label="Main navigation">
      <a href={logoHref} className="nav__logo" aria-label="Digital Immersive Box — home">
        <span className="nav__mark"><Logo /></span>
        Digital Immersive Box
      </a>

      <div className="nav__links">
        {links.map(({ href, label, current }) =>
          current
            ? <span key={label} className="nav__links-current" aria-current="page">{label}</span>
            : <a key={label} href={href}>{label}</a>
        )}
      </div>

      <div className="nav__right">
        {/* Theme toggle — single press, no dropdown */}
        <button
          className="nav__icon-btn"
          onClick={toggleTheme}
          aria-label={isLight ? 'Switch to dark mode' : 'Switch to light mode'}
        >
          <span className={`nav__theme-icon ${isLight ? 'is-light' : 'is-dark'}`}>
            {isLight ? (
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M13 9.5A5.5 5.5 0 0 1 6.5 3a5.5 5.5 0 1 0 6.5 6.5z" fill="currentColor"/>
              </svg>
            ) : (
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <circle cx="8" cy="8" r="3" fill="currentColor"/>
                <g stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
                  <line x1="8" y1="1" x2="8" y2="3"/>
                  <line x1="8" y1="13" x2="8" y2="15"/>
                  <line x1="1" y1="8" x2="3" y2="8"/>
                  <line x1="13" y1="8" x2="15" y2="8"/>
                  <line x1="3" y1="3" x2="4.4" y2="4.4"/>
                  <line x1="11.6" y1="11.6" x2="13" y2="13"/>
                  <line x1="3" y1="13" x2="4.4" y2="11.6"/>
                  <line x1="11.6" y1="4.4" x2="13" y2="3"/>
                </g>
              </svg>
            )}
          </span>
        </button>

        {/* Language selector */}
        <div className="nav__pop" ref={langRef}>
          <button
            className="nav__icon-btn"
            onClick={() => setLangOpen(o => !o)}
            aria-label="Language" aria-expanded={langOpen}
          >
            <span className="nav__flag">{currentLang.flag}</span>
            <span className="nav__code">{currentLang.value.toUpperCase()}</span>
            <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
              <path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" fill="none"
                    strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          {langOpen && (
            <div className="nav__menu">
              {langs.map(l => (
                <button
                  key={l.value}
                  className={`nav__menu-item ${tweaks.language === l.value ? 'on' : ''}`}
                  onClick={() => { setTweak('language', l.value); setLangOpen(false); }}
                >
                  <span className="nav__flag">{l.flag}</span>
                  <span>{l.label}</span>
                  <span className="nav__menu-code">{l.value.toUpperCase()}</span>
                </button>
              ))}
            </div>
          )}
        </div>

        {showCta && <a href="contact.html" className="nav__cta">{ctaLabel}</a>}
      </div>
    </nav>
  );
}

Object.assign(window, { Logo, SharedNav });