import React from "react";
import { AgentGraphProvider } from "./context/AgentGraphContext";
import { ThemeProvider } from "./context/ThemeContext";
import { NotificationProvider } from "./context/NotificationContext";
import { ModalProvider, useModal } from "./context/ModalContext";
import { NavigationProvider } from "./context/NavigationContext";
import { KGDisplayModeProvider } from "./context/KGDisplayModeContext";
import { AuthProvider } from "./context/AuthContext";
import { MainLayout } from "./components/layout/MainLayout";
import { ModalSystem } from "./components/shared/ModalSystem";
import { Toaster } from "./components/ui/toaster";
import { ErrorBoundary } from "./components/shared/ErrorBoundary";
import "./styles/globals.css";

function AppContent() {
  const { modalState, closeModal } = useModal();

  return (
    <div className="h-screen bg-background text-foreground flex flex-col">
      <ErrorBoundary>
        <MainLayout />
      </ErrorBoundary>
      <Toaster />
      <ModalSystem modalState={modalState} onClose={closeModal} />
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider>
        <NotificationProvider>
          <NavigationProvider>
            <ModalProvider>
              <AuthProvider>
                <KGDisplayModeProvider>
                  <AgentGraphProvider>
                    <AppContent />
                  </AgentGraphProvider>
                </KGDisplayModeProvider>
              </AuthProvider>
            </ModalProvider>
          </NavigationProvider>
        </NotificationProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;