import React from 'react';
import { AuthProvider } from '../auth';
import { useKeycloakAuth } from '@micahgoodman/auth';
import { LoginPage } from './pages/LoginPage';
import { NotesPage } from './pages/NotesPage';

/**
 * Router component - shows appropriate page based on auth state
 */
function Router() {
  const { user, loading } = useKeycloakAuth();

  if (loading) {
    return (
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
      }}>
        Loading...
      </div>
    );
  }

  return user ? <NotesPage /> : <LoginPage />;
}

/**
 * Main app component for standalone mode
 */
export function StandaloneApp() {
  return (
    <AuthProvider mode="standalone">
      <Router />
    </AuthProvider>
  );
}