import React from 'react';
import { AuthProvider, useAuth } from '../auth/AuthProvider';
import SignInOverlay from '../components/SignInOverlay';
import Shell from '../components/Shell';

function AppContent() {
  const { isAuthenticated, isLoading } = useAuth();

  // Show loading state while checking auth
  if (isLoading) {
    return (
      <div className="app-loading">
        <div className="loading-spinner" />
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <div className="app-container">
      {/* Dashboard is always rendered but blurred when not authenticated */}
      <div className={`dashboard ${!isAuthenticated ? 'dashboard-blurred' : ''}`}>
        <Shell />
      </div>
      
      {/* Sign-in overlay shown when not authenticated */}
      {!isAuthenticated && <SignInOverlay />}
    </div>
  );
}

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