import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "@shopify/app-bridge-react";
import App from "./App.tsx";
import AdminPage from "./components/AdminPage.tsx";
import SettingsPage from "./components/SettingsPage.tsx";
import "./index.css";

const params = new URLSearchParams(window.location.search);
const host = params.get("host") || "";
const shop = params.get("shop") || "";
const apiKey = import.meta.env.VITE_SHOPIFY_API_KEY;

const config = { apiKey, host, shop, forceRedirect: true };
(window as any).ShopifyAppBridge?.createApp(config);

const root = document.getElementById("root")!;

const renderApp = (
  <StrictMode>
    <Provider config={config}>
      <App />
    </Provider>
  </StrictMode>
);

const renderAdmin = (settingsPath: string) => (
  <StrictMode>
    <Provider config={config}>
      <AdminPage settingsPath={settingsPath} />
    </Provider>
  </StrictMode>
);

const renderSettings = (
  <StrictMode>
    <Provider config={config}>
      <SettingsPage />
    </Provider>
  </StrictMode>
);

const path = window.location.pathname;
const isSettingsPage = path.startsWith("/app/settings");
const isAdminPage = path.startsWith("/app");

const renderTarget = isSettingsPage
  ? renderSettings
  : isAdminPage
    ? renderAdmin("/app/settings")
    : renderApp;

createRoot(root).render(renderTarget);