/* Shell.jsx — window chrome, toolbar, role switcher, language toggle, nav rail. */
function LangToggle({ lang, setLang }) {
  return (
    <div className="lang">
      {[['en', 'EN'], ['sw', 'SW']].map(([k, lab]) => (
        <button key={k} className={lang === k ? 'on' : ''} onClick={() => setLang(k)}>{lab}</button>
      ))}
    </div>
  );
}

function RoleSwitch({ role, setRole, t }) {
  const [open, setOpen] = useState(false);
  const roles = window.RADA.ROLES;
  const cur = roles.find(r => r.id === role);
  useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener('click', close);
    return () => window.removeEventListener('click', close);
  }, [open]);
  return (
    <div className="seat" onClick={e => e.stopPropagation()}>
      <button className="seat-btn" onClick={() => setOpen(!open)}>
        <span className="seat-dot"></span>
        <span className="who">{t('viewing_as')}</span>
        <b style={{ fontWeight: 600 }}>{cur.label}</b>
        <Icon d="chevdown" size={13} color="var(--ink-mute)" />
      </button>
      {open && (
        <div className="seat-menu">
          {roles.map(r => (
            <div key={r.id} className={'seat-opt' + (r.id === role ? ' on' : '')} onClick={() => { setRole(r.id); setOpen(false); }}>
              <div style={{ flex: 1 }}>
                <div className="nm">{r.label}</div>
                <div className="sb">{r.sub}</div>
              </div>
              {r.id === role && <Icon d="check" size={15} color="var(--green-deep)" />}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function NavRail({ items, view, setView, initials }) {
  return (
    <div className="nav">
      {items.map((it, i) => it.sep
        ? <div className="nav-sep" key={'s' + i}></div>
        : (
          <div key={it.id} className={'nav-item' + (view === it.id ? ' on' : '')} onClick={() => setView(it.id)}>
            <Icon d={it.icon} size={21} sw={view === it.id ? 2 : 1.7} />
            <span>{it.label}</span>
          </div>
        ))}
      <div className="nav-spacer"></div>
      <div className="nav-avatar" title="Profile">{initials}</div>
    </div>
  );
}

function Shell({ role, setRole, lang, setLang, view, setView, navItems, title, t, children }) {
  return (
    <div className="win">
      <div className="titlebar">
        <div className="lights"><span className="light r"></span><span className="light y"></span><span className="light g"></span></div>
        <div className="title">{title}</div>
      </div>
      <div className="toolbar">
        <div className="brand">
          <img src="assets/rada-mark.png" alt="RaDa" />
          <div>
            <div className="nm">{t('app_name')}</div>
            <div className="sub">{t('app_sub')}</div>
          </div>
        </div>
        <div className="search">
          <Icon d="search" size={16} color="var(--ink-mute)" />
          <input placeholder={t('search_ph')} />
        </div>
        <div className="spacer"></div>
        <LangToggle lang={lang} setLang={setLang} />
        <button className="icon-btn"><Icon d="bell" size={18} /><span className="badge"></span></button>
        <button className="icon-btn" title="Sign out" onClick={() => { try { firebase.auth().signOut(); } catch (e) {} }}><Icon d="person" size={18} /></button>
      </div>
      <div className="body">
        <NavRail items={navItems} view={view} setView={setView} initials="RC" />
        <div className="main">{children}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Shell });