import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import NotFound from "@/pages/NotFound";
import { Route, Switch, useLocation } from "wouter";
import ErrorBoundary from "./components/ErrorBoundary";
import { ThemeProvider } from "./contexts/ThemeContext";
import { AppShell } from "./components/layout/AppShell";
import { Suspense, lazy } from "react";

// Lazy-load all pages
const WarRoom = lazy(() => import("./pages/WarRoom"));
const Signals = lazy(() => import("./pages/Signals"));
const Drafts = lazy(() => import("./pages/Drafts"));
const Calendar = lazy(() => import("./pages/Calendar"));
const Campaigns = lazy(() => import("./pages/Campaigns"));
const Products = lazy(() => import("./pages/Products"));
const Approvals = lazy(() => import("./pages/Approvals"));
const Analytics = lazy(() => import("./pages/Analytics"));
const Settings = lazy(() => import("./pages/Settings"));

function LoadingFallback() {
  return (
    <div className="flex items-center justify-center h-full" style={{ color: 'var(--atlas-cyan)' }}>
      <div className="flex flex-col items-center gap-3">
        <div 
          className="w-6 h-6 rounded-full border-2 border-t-transparent animate-spin"
          style={{ borderColor: 'var(--atlas-cyan)', borderTopColor: 'transparent' }}
        />
        <span className="text-xs" style={{ fontFamily: 'var(--font-mono)', color: 'var(--muted-foreground)' }}>
          ATLAS LOADING...
        </span>
      </div>
    </div>
  );
}

function AppRoutes() {
  const [location] = useLocation();

  return (
    <AppShell currentPath={location}>
      <Suspense fallback={<LoadingFallback />}>
        <Switch>
          <Route path="/" component={WarRoom} />
          <Route path="/signals" component={Signals} />
          <Route path="/drafts" component={Drafts} />
          <Route path="/calendar" component={Calendar} />
          <Route path="/campaigns" component={Campaigns} />
          <Route path="/products" component={Products} />
          <Route path="/approvals" component={Approvals} />
          <Route path="/analytics" component={Analytics} />
          <Route path="/settings" component={Settings} />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </AppShell>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="dark">
        <TooltipProvider>
          <Toaster />
          <AppRoutes />
        </TooltipProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;
