// App root + topbar + routing

function TopBar({ tab, setTab }){
  const store = useStore();
  const me = store.currentUser();
  const [menuOpen, setMenuOpen] = React.useState(false);

  const ref = React.useRef(null);

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

  const tabs = [
    { k: 'classes',  label: 'Online Class',   icon: 'book',  show: true },
    { k: 'meetings', label: 'Online Meeting', icon: 'video', show: true },
    { k: 'admin',    label: 'Admin',          icon: 'shield', show: me.role === 'admin' },
  ].filter(t => t.show);

  return (
    <div className="topbar">
      <div className="brand">
        <img src="/favicon.ico" alt="Merida logo" style={{ width: 28, height: 28, borderRadius: 6 }} />
        <div>
          <div className="brand-name">Merida</div>
          <div className="brand-sub">Skill Learning Academy</div>
        </div>
      </div>

      <div className="tabs">
        {tabs.map(t => (
          <button key={t.k} className={`tab ${tab===t.k?'is-active':''}`} onClick={() => setTab(t.k)}>
            <Icon name={t.icon} size={14} /> {t.label}
          </button>
        ))}
      </div>


      <div className="menu-wrap" ref={ref}>
        <button className="user-chip" onClick={() => setMenuOpen(o=>!o)}>
          <div className="avatar">{initials(me.name)}</div>
          <div style={{ textAlign:'left' }}>
            <div className="name">{me.name}</div>
            <div className="role">{me.role[0].toUpperCase()+me.role.slice(1)}</div>
          </div>
        </button>
        {menuOpen && (
          <div className="menu" onClick={() => setMenuOpen(false)}>
            <div style={{ padding:'8px 10px', borderBottom:'1px solid var(--line)', marginBottom: 4 }}>
              <div style={{ fontWeight:700, fontSize:13 }}>{me.name}</div>
              <div style={{ fontSize:11.5, color:'var(--ink-3)', fontFamily:"'JetBrains Mono', monospace" }}>{me.email}</div>
            </div>

            <hr />
            <button className="danger" onClick={() => store.logout()}>
              <Icon name="logout" size={14} /> Sign out
            </button>
          </div>
        )}
      </div>


    </div>
  );
}

function App(){
  const store = useStore();
  const me = store.currentUser();
  const [tab, setTab] = React.useState('classes');

  // If role loses access to current tab, snap back
  React.useEffect(() => {
    if(!me) return;
    if(tab === 'admin' && me.role !== 'admin') setTab('classes');
  }, [me, tab]);

  if(!me) return <Login />;

  return (
    <div className="app">
      <TopBar tab={tab} setTab={setTab} />
      {tab === 'classes' && <ClassesTab />}
      {tab === 'meetings' && <MeetingsTab />}
      {tab === 'admin' && <AdminPanel />}
    </div>
  );
}

function Root(){
  return (
    <StoreProvider>
      <ToastProvider>
        <App />
      </ToastProvider>
    </StoreProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Root />);