import "./instrument";
import { ConfirmationModalProvider, ToastProvider } from "@cv/ui";
import * as Sentry from "@sentry/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import { AuthProvider } from "./contexts/TokenProvider";
import "./index.css";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5,
      gcTime: 1000 * 60 * 10,
      refetchOnWindowFocus: true,
      retry: 1,
    },
  },
});

const ErrorFallback = (): React.ReactElement => (
  <div
    style={{
      padding: "2rem",
      maxWidth: "32rem",
      margin: "4rem auto",
      fontFamily: "system-ui, sans-serif",
    }}
  >
    <h1 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
      Something went wrong
    </h1>
    <p style={{ color: "#555", marginBottom: "1rem" }}>
      The page failed to render. The error has been reported. Try refreshing.
    </p>
    <button
      type="button"
      onClick={() => window.location.reload()}
      style={{
        padding: "0.5rem 1rem",
        border: "1px solid #ccc",
        borderRadius: "0.25rem",
        cursor: "pointer",
      }}
    >
      Reload
    </button>
  </div>
);

const container = document.getElementById("app");

if (container) {
  const root = createRoot(container);
  root.render(
    <React.StrictMode>
      <Sentry.ErrorBoundary fallback={<ErrorFallback />}>
        <QueryClientProvider client={queryClient}>
          <AuthProvider>
            <ToastProvider>
              <ConfirmationModalProvider>
                <App />
              </ConfirmationModalProvider>
            </ToastProvider>
          </AuthProvider>
          <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
      </Sentry.ErrorBoundary>
    </React.StrictMode>,
  );
}