import React from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter } from 'react-router-dom'
import App from './App.jsx'
import ErrorBoundary from './components/ErrorBoundary.jsx'
import { AuthProvider } from './hooks/useAuth.jsx'
import { ThemeProvider } from './hooks/useTheme.jsx'
// index.css is linked directly from index.html (no bundler to handle a JS
// import of a stylesheet without one).

// ClassWave is a plain static site with no server-side rewrite rule (no
// 404.html SPA-redirect trick, see README.md -> "Deploying to GitHub
// Pages"). A path-based router (BrowserRouter) needs the host to always
// serve index.html for every URL under the app, including a hard refresh
// three levels deep - GitHub Pages (and most static hosts) don't do that
// out of the box, so a refresh or a shared deep link 404s at the SERVER
// before React Router ever gets a chance to run, and the exact base path
// it needs to strip (the "basename") also has to be guessed from
// document.baseURI, which is fragile across hosting setups.
//
// HashRouter sidesteps both problems: every route lives after a `#`
// (e.g. .../index.html#/app/classes), which the browser never sends to
// the server, so the server only ever needs to serve one file - the same
// index.html every time - no matter how deep the link is or where the
// site is hosted. That's what was producing the "Page not found" page on
// a fresh load: the app itself was fine, but the *host* served its own
// 404 for the initial path before React Router could render anything.
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <ThemeProvider>
        <AuthProvider>
          <HashRouter>
            <App />
          </HashRouter>
        </AuthProvider>
      </ThemeProvider>
    </ErrorBoundary>
  </React.StrictMode>
)