import { AuthProvider, useAuth } from './context/AuthContext';
import { Dashboard } from './pages/Dashboard';
import { SignIn } from './pages/SignIn';
import { SignUp } from './pages/SignUp';
import './styles.css';
import './styles-application.css';

function Application() {
  const { authenticated, loading } = useAuth();
  if (loading) return <main className="center"><div className="loader" /><p>Resolving your FeltDB session…</p></main>;
  if (!authenticated) return <AuthScreen />;
  return <Dashboard />;
}

function AuthScreen() {
  const signIn = new URLSearchParams(window.location.search).get('view') === 'signin';
  return <main className="auth-layout"><section className="intro"><a className="brand" href="https://feltdb.com">FeltDB</a><div><span className="eyebrow">State first</span><h1>A real application, from the first command.</h1><p>Sign up to create a durable user, organization, membership, and session—then inspect all of it in Studio.</p></div><div className="flow"><span>Identity</span><i>→</i><span>Tenant</span><i>→</i><span>State</span></div></section><section className="auth-card">{signIn ? <SignIn /> : <SignUp />}</section></main>;
}

export function App() { return <AuthProvider><Application /></AuthProvider>; }