import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import "./index.css";

console.log('Client-side rendering');

const root = document.getElementById("root");
if (!root) throw new Error("Root element not found");

// Polyfill for requestIdleCallback (Safari compatibility)
if (typeof window !== 'undefined' && !window.requestIdleCallback) {
  window.requestIdleCallback = function (callback: IdleRequestCallback) {
    const start = Date.now();
    return setTimeout(function () {
      callback({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        },
      });
    }, 1) as any;
  };

  window.cancelIdleCallback = function (id: number) {
    clearTimeout(id);
  };
}

createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Defer performance monitoring to not block initial render
if (import.meta.env.DEV) {
  requestIdleCallback(() => {
    import("./lib/performance").then(({ reportWebVitals }) => reportWebVitals());
  }, { timeout: 3000 });
}