import { Suspense, lazy } from "react"
import { BrowserRouter, Routes, Route } from "react-router-dom"
import AppShell from "./components/AppShell"

const Dashboard = lazy(() => import("./pages/Dashboard"))
const History = lazy(() => import("./pages/History"))
const Live = lazy(() => import("./pages/Live"))
const Analytics = lazy(() => import("./pages/Analytics"))

function App() {
  return (
    <BrowserRouter>
      <AppShell>
        <div className="mx-auto flex w-full max-w-[1600px] flex-1 flex-col px-4 pb-8 pt-4 sm:px-6 lg:px-8">
          <Suspense
            fallback={
              <div className="surface-card p-6 text-sm text-slate-300">
                Loading inspection workspace...
              </div>
            }
          >
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/history" element={<History />} />
              <Route path="/live" element={<Live />} />
              <Route path="/analytics" element={<Analytics />} />
            </Routes>
          </Suspense>
        </div>
      </AppShell>
    </BrowserRouter>
  )
}

export default App