// tnych-app.jsx — root app: routing and page state
const { useState: useAppState, useEffect: useAppEffect } = React;

const DEFAULT_DOMAIN = 'tnych.dev';

function App() {
  const [page, setPage] = useAppState(() => {
    return sessionStorage.getItem('tnych-page') || 'landing';
  });
  const [domain, setDomain] = useAppState(() => localStorage.getItem('tnych-domain') || DEFAULT_DOMAIN);

  useAppEffect(() => { sessionStorage.setItem('tnych-page', page); }, [page]);
  useAppEffect(() => { localStorage.setItem('tnych-domain', domain); }, [domain]);

  useAppEffect(() => {
    if (page !== 'admin') return;
    fetch('/api/auth/me')
      .then(r => { if (!r.ok) setPage('login'); })
      .catch(() => setPage('login'));
  }, [page]);

  const logout = () => {
    fetch('/api/auth/logout', { method: 'POST' }).catch(() => {});
    setPage('login');
  };

  return (
    <>
      {page === 'landing' && (
        <Landing domain={domain} onLoginClick={() => {
          fetch('/api/auth/me')
            .then(r => setPage(r.ok ? 'admin' : 'login'))
            .catch(() => setPage('login'));
        }} />
      )}
      {page === 'login' && (
        <Login domain={domain} onLogin={() => setPage('admin')} onBack={() => setPage('landing')} />
      )}
      {page === 'admin' && (
        <Admin domain={domain} onLogout={logout} onBack={() => setPage('landing')} onDomainChange={setDomain} />
      )}
    </>
  );
}

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