// shell.jsx — app chrome: navigation config, sidebar rail, topbar,
// role switcher, mobile drawer + bottom tab bar.
(function () {
  const { useState } = React;

  const NAV = {
    client: [
      { group: 'Workspace', items: [
        ['home', 'Home', 'home'],
        ['run-audit', 'Run audit', 'play'],
        ['results', 'Results', 'gauge'],
        ['answer', 'In the answer', 'bot'],
        ['recommendations', 'Recommendations', 'sparkles', '5'],
        ['exports', 'Exports', 'download'],
      ]},
      { group: 'Track', items: [
        ['monitoring', 'Monitoring', 'activity'],
      ]},
    ],
    agency: [
      { group: 'Delivery', items: [
        ['home', 'Dashboard', 'grid'],
        ['clients', 'Clients', 'users', '12'],
        ['results', 'Audit results', 'gauge'],
        ['compare', 'Compare', 'target'],
        ['visibility', 'Visibility tests', 'eye'],
        ['answer', 'In the answer', 'bot'],
        ['monitoring', 'Monitoring', 'activity'],
      ]},
      { group: 'Platform tools', items: [
        ['knowledge', 'Knowledge & widget', 'layers'],
        ['integrations', 'Integrations & publishing', 'puzzle'],
      ]},
      { group: 'Brand', items: [
        ['whitelabel', 'White-label', 'palette'],
      ]},
    ],
    super_admin: [
      { group: 'Workspace', items: [
        ['home', 'Overview', 'grid'],
        ['results', 'Audit results', 'gauge'],
        ['clients', 'Tenants & clients', 'users'],
      ]},
      { group: 'Operations', items: [
        ['production', 'Operations', 'server'],
        ['launch', 'Launch readiness', 'rocket'],
        ['integrations', 'Integrations', 'puzzle'],
      ]},
      { group: 'System', items: [
        ['settings', 'Settings & logs', 'settings'],
      ]},
    ],
  };
  window.NAV = NAV;

  const VIEW_TITLES = {
    home: 'Home', 'run-audit': 'Run audit', results: 'Audit results', recommendations: 'Recommendations',
    exports: 'Exports', monitoring: 'Monitoring', clients: 'Clients', compare: 'Competitor compare',
    answer: 'In the answer',
    visibility: 'AI visibility', knowledge: 'Knowledge & widget', integrations: 'Integrations',
    whitelabel: 'White-label', production: 'Operations', launch: 'Launch readiness', settings: 'Settings & logs',
  };
  window.VIEW_TITLES = VIEW_TITLES;

  // ---- Sidebar -----------------------------------------------------------
  function Sidebar({ role, view, go, collapsed }) {
    const groups = NAV[role] || [];
    const r = JS_DATA.ROLES[role];
    return (
      <aside className="js-rail">
        <div className="js-rail-head">
          <div className="js-rail-mark"><img src="assets/logo-mark.png" alt="JiffyScore" /></div>
          <div className="js-rail-word">JiffyScore<small>AI · {r.label.toUpperCase()}</small></div>
        </div>
        <div className="js-rail-scroll">
          {groups.map(g => (
            <div className="js-navgroup" key={g.group}>
              <div className="js-navgroup-label">{g.group}</div>
              {g.items.map(([id, label, icon, badge]) => (
                <div key={id} className={'js-navitem' + (view === id ? ' is-active' : '')} onClick={() => go(id)} title={label}>
                  <Icon name={icon} />
                  <span className="js-navlabel">{label}</span>
                  {id === 'clients' ? <span className="js-navbadge">{(window.JS_DATA.CLIENTS || []).length}</span> : badge && <span className="js-navbadge">{badge}</span>}
                </div>
              ))}
            </div>
          ))}
        </div>
        <div className="js-rail-foot">
          <div className="js-navitem" onClick={() => go('settings')} title="Settings">
            <Icon name="settings" /><span className="js-navlabel">Settings</span>
          </div>
        </div>
      </aside>
    );
  }
  window.Sidebar = Sidebar;

  // ---- Role switcher -----------------------------------------------------
  function RoleSwitch({ role, setRole, session, onLogout }) {
    const [open, setOpen] = useState(false);
    const r = JS_DATA.ROLES[role];
    const canSwitch = Boolean(session?.developmentBypass || session?.user?.id === 'local-dev-admin');
    const roles = canSwitch ? Object.values(JS_DATA.ROLES) : [r];
    return (
      <div className="js-roleswitch">
        <button className="js-roleswitch-btn" onClick={() => setOpen(o => !o)}>
          <span className="rs-glyph">{r.initials}</span>
          <span className="rs-meta"><span className="rs-name">{r.name}</span><span className="rs-role">{r.label}</span></span>
          <Icon name="chevronDown" size={15} />
        </button>
        {open && (
          <>
            <div style={{ position: 'fixed', inset: 0, zIndex: 80 }} onClick={() => setOpen(false)} />
            <div className="js-menu" style={{ zIndex: 91 }}>
              <div className="js-menu-label">View the app as</div>
              {roles.map(rr => (
                <div key={rr.key} className={'js-menu-item' + (rr.key === role ? ' is-active' : '')}
                  onClick={() => { setRole(rr.key); setOpen(false); }}>
                  <span className="mi-glyph">{rr.initials}</span>
                  <div><div className="mi-name">{rr.label}</div><div className="mi-desc">{rr.name} · {rr.desc}</div></div>
                  <span className="mi-check"><Icon name="check" size={18} /></span>
                </div>
              ))}
              <div style={{ borderTop: '1px solid var(--line-soft)', margin: '8px 4px 4px' }} />
              <div className="js-menu-item" onClick={() => { setOpen(false); onLogout && onLogout(); }}><span className="mi-glyph"><Icon name="logout" size={15} /></span><div><div className="mi-name">Sign out</div></div></div>
            </div>
          </>
        )}
      </div>
    );
  }

  // ---- Topbar ------------------------------------------------------------
  function Topbar({ role, view, setRole, collapsed, toggleCollapse, openDrawer, openTweaks, mode, toggleMode, session, onLogout }) {
    return (
      <header className="js-topbar">
        <button className="js-iconbtn js-hamburger" onClick={openDrawer} aria-label="Menu"><Icon name="menu" /></button>
        <button className="js-iconbtn js-collapse-btn" onClick={toggleCollapse} aria-label="Collapse"><Icon name="chevronsLeft" /></button>
        <div className="js-crumbs">
          <span className="c-muted">JiffyScore</span>
          <span className="c-sep"><Icon name="chevronRight" size={13} /></span>
          <span className="c-now">{VIEW_TITLES[view] || view}</span>
        </div>
        <div className="js-spacer" />
        <div className="js-topsearch">
          <Icon name="search" />
          <input placeholder="Search audits, clients, queries…" />
        </div>
        <button className="js-iconbtn" onClick={toggleMode} aria-label="Toggle appearance" title={mode === 'dark' ? 'Switch to light' : 'Switch to dark'}><Icon name={mode === 'dark' ? 'sun' : 'moon'} /></button>
        <button className="js-iconbtn" onClick={openTweaks} aria-label="Preferences" title="Preferences"><Icon name="palette" /></button>
        <button className="js-iconbtn" aria-label="Notifications"><Icon name="bell" /><span className="js-dot-alert" /></button>
        <RoleSwitch role={role} setRole={setRole} session={session} onLogout={onLogout} />
      </header>
    );
  }
  window.Topbar = Topbar;

  // ---- Mobile bottom bar -------------------------------------------------
  function MobileNav({ role, view, go }) {
    const items = (NAV[role][0].items).slice(0, 5);
    return (
      <nav className="js-mobnav">
        {items.map(([id, label, icon]) => (
          <button key={id} className={view === id ? 'is-active' : ''} onClick={() => go(id)}>
            <Icon name={icon} /><span>{label.split(' ')[0]}</span>
          </button>
        ))}
      </nav>
    );
  }
  window.MobileNav = MobileNav;

})();