/* =========================================================================
   Sidebar + Meta column (Direction C, expanded)
   - Desktop  : left rail (nav) + right meta column
   - Tablet   : left rail gains the meta info (right column hidden)
   - Phone    : compact top bar + hamburger → slide-in sheet (nav, meta, toggles)
   ========================================================================= */
const { useState, useEffect, useRef } = React;

function MetaList({ m, withPortrait }) {
  return (
    <div className="meta-list">
      {withPortrait ? <div className="portrait"><img src="assets/portrait.webp" alt="Andrej Oliver Olsen" /></div> : null}
      <div className="meta-block">
        <div className="label mb-label">{m.focus.label}</div>
        <div className="mb-big">{m.focus.big}</div>
      </div>
      <div className="meta-rule"></div>
      <div className="meta-block">
        <div className="label mb-label">{m.now.label}</div>
        <div className="mb-big">{m.now.big}</div>
        <div className="mb-sub">{m.now.sub}</div>
      </div>
      <div className="meta-rule"></div>
      <div className="meta-block">
        <div className="label mb-label">{m.loc.label}</div>
        <div className="mb-big">{m.loc.big}</div>
        <div className="mb-sub">{m.loc.sub}</div>
      </div>
      <div className="meta-rule"></div>
      <div className="meta-block">
        <div className="label mb-label">{m.contact.label}</div>
        <a className="mb-big teal mb-link" href={'mailto:' + m.contact.big}>{m.contact.big}</a>
      </div>
    </div>
  );
}

function Toggles({ t, lang, setLang, theme, setTheme }) {
  return (
    <div className="sb-controls">
      <div className="seg" role="group" aria-label="Language">
        <button className={lang === 'de' ? 'on' : ''} onClick={() => setLang('de')}>DE</button>
        <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
      </div>
      <div className="seg" role="group" aria-label="Theme">
        <button className={theme === 'light' ? 'on' : ''} onClick={() => setTheme('light')}>☀</button>
        <button className={theme === 'dark' ? 'on' : ''} onClick={() => setTheme('dark')}>☾</button>
      </div>
    </div>
  );
}

function Sidebar({ t, lang, setLang, theme, setTheme, active, go }) {
  const [open, setOpen] = useState(false);

  // lock body scroll while the mobile sheet is open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // close on Escape
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const navTo = (id) => { go(id); setOpen(false); };

  return (
    <aside className={'sidebar' + (open ? ' open' : '')}>
      <div className="sb-bar">
        <div className="sb-id">
          <a className="sb-logo" href="Andrej Olsen.html" aria-label="Seite neu laden"
             onClick={(e) => { e.preventDefault(); window.location.reload(); }}>
            <span className="sb-logo-full">
              <img className="sb-logo-light" src="assets/logo-vert-light.svg" alt="Andrej Oliver Olsen — Experience Design" />
              <img className="sb-logo-dark" src="assets/logo-vert-dark.svg" alt="Andrej Oliver Olsen — Experience Design" />
            </span>
            <span className="sb-logo-mark">
              <img className="sb-logo-mlight" src="assets/logo-mobile-light.png" alt="Andrej Oliver Olsen" />
              <img className="sb-logo-mdark" src="assets/logo-mobile-dark.svg" alt="Andrej Oliver Olsen" />
            </span>
          </a>
          <div className="sb-role">{t.identity.tagline}</div>
        </div>
        <button className="sb-burger" aria-label="Menü" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className="sb-scrim" onClick={() => setOpen(false)}></div>

      <div className="sb-panel">
        <div className="sb-panel-head">
          <span className="label">{t.ui.menu}</span>
          <button className="sb-close" aria-label="Schließen" onClick={() => setOpen(false)}>×</button>
        </div>

        <nav className="sb-nav">
          {t.nav.map((it) => (
            <a key={it.id} className={'sb-link' + (active === it.id ? ' active' : '')}
               href={'#' + it.id}
               onClick={(e) => { e.preventDefault(); navTo(it.id); }}>
              <span className="sb-num">{it.n}</span>
              <span>{it.t}</span>
            </a>
          ))}
        </nav>

        <div className="sb-extra">
          <MetaList m={t.meta} withPortrait={false} />
        </div>

        <div className="sb-foot">
          <div className="sb-legal">
            <a href="Impressum.html">{t.footer.impressum}</a>
            <a href="Datenschutz.html">{t.footer.datenschutz}</a>
          </div>
          <div className="sb-status"><span className={'sb-dot' + (t.identity.available === false ? ' off' : '')}></span>{t.identity.status}</div>
          <Toggles t={t} lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />
        </div>
      </div>
    </aside>
  );
}

function MetaColumn({ t }) {
  return (
    <aside className="meta">
      <MetaList m={t.meta} withPortrait={true} />
    </aside>
  );
}

window.Sidebar = Sidebar;
window.MetaColumn = MetaColumn;