// admin.jsx — root: auth gate, top bar with tabs, view router.

function AdminApp() {
  const { session, loading, login, logout } = useAuth();
  const [tab, setTab] = React.useState('applications');
  const [pendingCount, setPendingCount] = React.useState(0);
  const [apps, setApps] = React.useState([]);

  // Load applications and set pending count
  React.useEffect(() => {
    if (!session) return;
    const loadApps = async () => {
      const data = await ATS.loadApplications();
      setApps(data);
      setPendingCount(data.filter((a) => a.status === 'pending').length);
    };
    loadApps();
  }, [session]);

  if (loading) return null;
  if (!session) return <LoginGate onLogin={login} />;

  const role = session.role;
  const tabs = [
    { id: 'applications', label: 'Applications', icon: <ADMIN_ICONS.inbox width="14" height="14" />, badge: pendingCount, role: 'staff' },
    { id: 'drafts', label: 'Page drafts', icon: <ADMIN_ICONS.edit width="14" height="14" />, role: 'web_admin' },
    { id: 'alliances', label: 'Alliances', icon: <ADMIN_ICONS.shield width="14" height="14" />, role: 'web_admin' },
    { id: 'svs', label: 'SVS Details', icon: <ADMIN_ICONS.trophy width="14" height="14" />, role: 'alliance_admin' },
    { id: 'content', label: 'Content', icon: <ADMIN_ICONS.doc width="14" height="14" />, role: 'web_admin' },
    { id: 'users', label: 'Users', icon: <ADMIN_ICONS.users width="14" height="14" />, role: 'admin' },
  ].filter((t) => ATS.roleAtLeast(role, t.role));

  return (
    <div className="admin-shell">
      <div className="bg-aurora" />
      <div className="bg-grain" />

      <div className="admin-bar">
        <div className="left">
          <a href="index.html" className="btn btn-ghost btn-sm">
            <ADMIN_ICONS.back width="14" height="14" /> Site
          </a>
          <span className="admin-tag"><ADMIN_ICONS.lock width="11" height="11" /> 4wos Admin</span>
          <div className="admin-tabs">
            {tabs.map((t) =>
              <button key={t.id} className={tab === t.id ? 'on' : ''} onClick={() => setTab(t.id)}>
                {t.icon}
                <span className="tab-label">{t.label}</span>
                {t.badge > 0 && <span className="count">{t.badge}</span>}
              </button>
            )}
          </div>
        </div>
        <div className="right">
          <span className="who">
            <b>{session.name}</b>
            <span className={'role-pill ' + session.role}>{ATS.ROLE_LABEL[session.role]}</span>
          </span>
          <button className="btn btn-ghost btn-sm" onClick={logout}>
            <ADMIN_ICONS.logout width="14" height="14" /> Log out
          </button>
        </div>
      </div>

      <div className="admin-page">
        {tab === 'applications' && <ApplicationsView session={session} apps={apps} />}
        {tab === 'drafts' && <DraftsView session={session} />}
        {tab === 'alliances' && <AlliancesView session={session} />}
        {tab === 'svs' && <SVSView session={session} />}
        {tab === 'content' && <ContentView session={session} />}
        {tab === 'users' && <UsersView session={session} />}
      </div>
    </div>
  );
}

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