import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { ErrorBoundary, Suspense } from "solid-js";
import { AuthProvider } from "~/lib/auth";
import { AiChatWidget } from "~/components/AiChatWidget";
import "./app.css";

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>NXTGAUGE Frontend Solid</Title>
          <AuthProvider>
            <ErrorBoundary
              fallback={(err) => (
                <main
                  style={{
                    padding: "24px",
                    "font-family": "Inter, system-ui, sans-serif",
                    color: "#111827",
                    background: "#fff",
                  }}
                >
                  <h1 style={{ margin: 0, "font-size": "20px" }}>Frontend Error</h1>
                  <p style={{ "margin-top": "8px" }}>
                    A runtime error occurred while rendering this page.
                  </p>
                  <pre
                    style={{
                      "margin-top": "12px",
                      padding: "12px",
                      background: "#f3f4f6",
                      "border-radius": "8px",
                      "white-space": "pre-wrap",
                    }}
                  >
                    {String((err as any)?.message || err)}
                  </pre>
                </main>
              )}
            >
              <Suspense>{props.children}</Suspense>
              <AiChatWidget />
            </ErrorBoundary>
          </AuthProvider>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}