import React, { useContext } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import './styles/DarkTheme.css';
import './styles/DashboardButtons.css';
import './styles/LandingPage.css';

// Error handling
import ErrorBoundary from './components/common/ErrorBoundary';

// Context providers
import { AuthProvider, AuthContext } from './context/AuthContext';
import { ThemeProvider } from './context/ThemeContext';

// Components
import NavbarComponent from './components/layout/Navbar';
import AppRoutes from './routes/AppRoutes';

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <AuthProvider>
          <AppContent />
        </AuthProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

const AppContent = () => {
  const { loading, isAuthenticated } = useContext(AuthContext);

  // Determine whether to show navbar based on authentication status
  const showNavbar = isAuthenticated();

  return (
    <Router>
      <div className="App d-flex flex-column min-vh-100">
        {showNavbar && <NavbarComponent />}
        
        <Container fluid className="flex-grow-1 py-3">
          <AppRoutes />
        </Container>
        
        <footer className="bg-light py-3 text-center">
          <Container>
            <p className="text-muted mb-0">
              Project Progress Tracker &copy; {new Date().getFullYear()}
            </p>
            <p className="text-muted mb-0">
              Created with ❤️ by <a href="https://link.ozdag.me/@m3mo" target="_blank" rel="noopener noreferrer">ozdag</a>
            </p>
          </Container>
        </footer>
      </div>
    </Router>
  );
};

export default App;
