import { lazy, Suspense } from "react";
import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Route, Switch, Router } from "wouter";
import { useHashLocation } from "wouter/use-hash-location";
import ErrorBoundary from "./components/ErrorBoundary";
import PageLoader from "./components/PageLoader";
import { ThemeProvider } from "./contexts/ThemeContext";
import { DeviceProvider } from "./contexts/DeviceContext";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Dashboard from "./pages/Dashboard";
import AudioPage from "./pages/AudioPage";
import SystemPage from "./pages/SystemPage";
import IOPage from "./pages/IOPage";
import VUPage from "./pages/VUPage";
import SelectPage from "./pages/SelectPage";
import CommunityPage from "./pages/CommunityPage";
import { AIDrawerProvider } from "./contexts/AIDrawerContext";
import DesktopAIShell from "./components/DesktopAIShell";
import { appShellColumnClass, appShellOuterClass } from "./lib/appShell";

const EQPage = lazy(() => import("./pages/EQPage"));
const EffectsPage = lazy(() => import("./pages/EffectsPage"));
const AIPage = lazy(() => import("./pages/AIPage"));

function LazyRoute({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={<PageLoader />}>{children}</Suspense>;
}

function AIPageRoute() {
  return (
    <LazyRoute>
      <AIPage />
    </LazyRoute>
  );
}

function EQPageRoute() {
  return (
    <LazyRoute>
      <EQPage />
    </LazyRoute>
  );
}

function EffectsPageRoute() {
  return (
    <LazyRoute>
      <EffectsPage />
    </LazyRoute>
  );
}

function AppRouter() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/audio" component={AudioPage} />
      <Route path="/eq" component={EQPageRoute} />
      <Route path="/effects" component={EffectsPageRoute} />
      <Route path="/system" component={SystemPage} />
      <Route path="/io" component={IOPage} />
      <Route path="/vu" component={VUPage} />
      <Route path="/select" component={SelectPage} />
      <Route path="/ai" component={AIPageRoute} />
      <Route path="/community" component={CommunityPage} />
      <Route path="/404" component={NotFound} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="dark">
        <DeviceProvider>
          <TooltipProvider>
            <Toaster />
            <Router hook={useHashLocation}>
              <AIDrawerProvider>
                <div className={appShellOuterClass}>
                  <div className={appShellColumnClass}>
                    <DesktopAIShell>
                      <AppRouter />
                    </DesktopAIShell>
                  </div>
                </div>
              </AIDrawerProvider>
            </Router>
          </TooltipProvider>
        </DeviceProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;