import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import "@fontsource/dm-sans/latin-400.css";
import "@fontsource/dm-sans/latin-500.css";
import "@fontsource/dm-sans/latin-600.css";
import "@fontsource/dm-sans/latin-700.css";
import "@fontsource/newsreader/latin-400.css";
import "@fontsource/newsreader/latin-400-italic.css";
import "./styles.css";
import PublicLayout from "./components/PublicLayout";
import {
  Home,
  Product,
  ToolLibraryPublic,
  Pricing,
  Information,
} from "./pages/Marketing";
import { AuthPage, SecureAccount, Challenge } from "./pages/Auth";
import {
  AppLayout,
  Dashboard,
  Library,
  ToolPage,
  Activity,
  Usage,
  Billing,
  Account,
  Security,
  Settings,
  Help,
} from "./pages/Application";
class ErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { failed: boolean }
> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  render() {
    return this.state.failed ? (
      <div className="information-page">
        <h1>We couldn’t load this page.</h1>
        <p>Refresh the page to try again.</p>
        <a className="button primary" href="/">
          Return home
        </a>
      </div>
    ) : (
      this.props.children
    );
  }
}
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ErrorBoundary>
      <BrowserRouter>
        <Routes>
          <Route element={<PublicLayout />}>
            <Route index element={<Home />} />
            <Route path="product" element={<Product />} />
            <Route path="tools" element={<ToolLibraryPublic />} />
            <Route path="pricing" element={<Pricing />} />
            {["security", "privacy", "terms", "contact"].map((p) => (
              <Route key={p} path={p} element={<Information kind={p} />} />
            ))}
          </Route>
          {["login", "register", "forgot-password", "reset-password"].map(
            (p) => (
              <Route key={p} path={p} element={<AuthPage mode={p} />} />
            ),
          )}
          <Route path="secure-account" element={<SecureAccount />} />
          <Route path="verify-mfa" element={<Challenge />} />
          <Route path="app" element={<AppLayout />}>
            <Route index element={<Navigate to="dashboard" replace />} />
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="tools" element={<Library />} />
            <Route path="tools/:id" element={<ToolPage />} />
            <Route path="activity" element={<Activity />} />
            <Route path="usage" element={<Usage />} />
            <Route path="billing" element={<Billing />} />
            <Route path="account" element={<Account />} />
            <Route path="security" element={<Security />} />
            <Route path="settings" element={<Settings />} />
            <Route path="help" element={<Help />} />
          </Route>
          <Route
            path="dashboard"
            element={<Navigate to="/app/dashboard" replace />}
          />
          <Route
            path="*"
            element={
              <div className="information-page">
                <h1>This page could not be found.</h1>
                <a href="/">Return to KeyworkPro</a>
              </div>
            }
          />
        </Routes>
      </BrowserRouter>
    </ErrorBoundary>
  </React.StrictMode>,
);