import { SessionProvider } from './context/SessionContext';
import { useSession } from './hooks/useSession';
import { AppRouter } from './router';
import { UserIdFallback } from './pages/UserIdFallback/UserIdFallback';

function AppContent() {
  const { session, loading, error } = useSession();

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="flex flex-col items-center gap-3">
          <div
            className="w-8 h-8 border-2 border-t-transparent rounded-full animate-spin"
            style={{ borderColor: 'var(--btn-primary-bg, #2563eb)', borderTopColor: 'transparent' }}
          />
          <p className="text-sm" style={{ color: 'var(--text-secondary, #6b7280)' }}>
            Loading...
          </p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen p-6">
        <div className="text-center space-y-2">
          <p className="text-sm font-medium" style={{ color: '#dc2626' }}>
            {error}
          </p>
          <button
            onClick={() => window.location.reload()}
            className="text-sm font-medium"
            style={{ color: 'var(--btn-primary-bg, #2563eb)' }}
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!session?.userId) {
    return <UserIdFallback />;
  }

  return <AppRouter />;
}

export function App() {
  return (
    <SessionProvider>
      <AppContent />
    </SessionProvider>
  );
}