import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import theme from "./theme";
import reportWebVitals from "./reportWebVitals";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import axios from "axios";

// Global error handler to catch unhandled errors and prevent reloads
window.onerror = function (message, source, lineno, colno, error) {
  console.error("Global error handler:", {
    message,
    source,
    lineno,
    colno,
    error,
  });
  // Prevent default browser reload on error
  return true;
};

window.onunhandledrejection = function (event) {
  console.error("Global unhandledrejection:", event.reason);
  // Prevent default browser reload on unhandled promise rejection
  return true;
};

const queryClient = new QueryClient();
axios.defaults.baseURL =
  process.env.REACT_APP_API_URL || "http://localhost:8000";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

reportWebVitals();