/**
 * Settings Page Entry Point
 *
 * React app for the Opus Price Builder settings page.
 */

import React from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { SettingsPage } from "@/components/SettingsPage";
import { Toaster } from "@/components/ui";
import "@/extensions/registry";
import { registerProExtensions } from "@/extensions/registerPro";
import "@/styles/main.css";

// Create a QueryClient instance
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5 minutes
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

/**
 * Initialize the settings app
 */
function initSettingsApp() {
  const container = document.getElementById("opus-price-builder-settings");

  if (!container) {
    console.warn("Opus Price Builder: Settings container not found");
    return;
  }

  registerProExtensions();

  const root = createRoot(container);

  root.render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <SettingsPage />
        <Toaster />
      </QueryClientProvider>
    </React.StrictMode>
  );
}

// Initialize when DOM is ready
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initSettingsApp);
} else {
  initSettingsApp();
}
