/* ROOT of the standalone /admin page.
   Decides between AdminLogin and Admin based on the cookie session. */

function AdminApp() {
  // null = checking session, true/false = decided
  const [authed, setAuthed] = React.useState(null);

  React.useEffect(() => {
    document.body.classList.add('native-cursor');
    return () => document.body.classList.remove('native-cursor');
  }, []);

  React.useEffect(() => {
    let cancelled = false;
    fetch('/api/auth/me', { credentials: 'same-origin' })
      .then(r => r.json())
      .then(j => { if (!cancelled) setAuthed(!!j.authenticated); })
      .catch(() => { if (!cancelled) setAuthed(false); });
    return () => { cancelled = true; };
  }, []);

  const goHome = () => { window.location.href = '/'; };

  if (authed === null) {
    return (
      <React.Fragment>
        <div className="bg-stage"/>
        <div className="bg-grid"/>
        <div className="bg-noise"/>
        <div style={{
          position: 'fixed', inset: 0, display: 'grid', placeItems: 'center',
          color: 'var(--ink-2)', fontFamily: 'var(--font-mono)', fontSize: 13,
          letterSpacing: '.1em', textTransform: 'uppercase', zIndex: 10,
        }}>Загрузка…</div>
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <div className="bg-stage"/>
      <div className="bg-grid"/>
      <div className="bg-noise"/>
      {authed ? (
        <Admin
          onClose={goHome}
          onLoggedOut={() => setAuthed(false)}
        />
      ) : (
        <AdminLogin
          onClose={goHome}
          onSuccess={() => setAuthed(true)}
        />
      )}
    </React.Fragment>
  );
}

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