/* ============================================================
   App shell + role switcher -> mounts to #root
   ============================================================ */
const { useState } = React;

const ROLES = {
  super:     { label:'Super Admin',     short:'Super Admin', mod:'SuperAdmin',     defaultPage:'overview',  roleName:'Elephant Ed', roleSub:'Platform Admin' },
  workplace: { label:'Workplace Admin', short:'Workplace',   mod:'WorkplaceAdmin', defaultPage:'dashboard', roleName:'Riparide',    roleSub:'People & Culture' },
  employee:  { label:'Employee',        short:'Employee',    mod:'Employee',       defaultPage:'learning',  roleName:'My Learning', roleSub:'Learner' },
};

function App() {
  const [role, setRole] = useState('super');
  const [pages, setPages] = useState({ super:'overview', workplace:'dashboard', employee:'learning' });
  const [toast, setToast] = useState(null);

  const cfg = ROLES[role];
  const mod = window[cfg.mod];
  const page = pages[role];
  const meta = mod.PAGE_META[page] || {};
  const setPage = p => setPages(s=>({ ...s, [role]: p }));
  const pushToast = msg => setToast(msg);

  const searchPlaceholder = role==='super'? 'Search courses, workplaces…' : role==='workplace'? 'Search employees, courses…' : 'Search courses…';

  // top-bar contextual action
  let topAction = null;
  if (role==='super' && page==='courses') topAction = <button className="btn primary sm" onClick={()=>pushToast('New course — name & first SCORM upload')}><Icon n="plus" size={15} />New course</button>;
  if (role==='workplace' && page==='employees') topAction = null;

  return (
    <div className="app">
      {/* demo / role bar */}
      <div className="demobar">
        <div className="wordmark">
          <span className="logo-text">elephant<b>ed</b></span>
        </div>
        <span className="demo-label">V1 Platform · Interactive Prototype</span>
        <div className="spacer"></div>
        <div className="roleseg">
          {Object.entries(ROLES).map(([k,v])=>(
            <button key={k} className={role===k?'active':''} onClick={()=>setRole(k)}>{v.short}</button>
          ))}
        </div>
      </div>

      <div className="shell">
        <Sidebar
          roleName={cfg.roleName}
          roleSub={cfg.roleSub}
          nav={mod.NAV}
          active={page}
          onNav={setPage}
          user={mod.user}
        />
        <div className="main">
          <Topbar crumb={meta.crumb} title={meta.title || cfg.label} searchPlaceholder={searchPlaceholder} actions={topAction} />
          <div className="content">
            <div className="content-inner" key={role+page}>
              <mod.Component page={page} toast={pushToast} />
            </div>
          </div>
        </div>
      </div>

      {toast && <Toast msg={toast} onDone={()=>setToast(null)} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);