/* eslint-disable react-refresh/only-export-components */

import '@genarrative/image-canvas-react/styles.css';
import 'overlayscrollbars/styles/overlayscrollbars.css';
import './index.css';

import {StrictMode, Suspense} from 'react';
import {createRoot} from 'react-dom/client';

import {FloatingFeedbackEntry} from './components/common/FloatingFeedbackEntry';
import {getInitialPlatformDesktopLayout} from './components/platform-entry/platformEntryResponsive';
import {stabilizeMobileViewportKeyboardFocus} from './mobileViewportKeyboardFocus';
import {lockMobileViewportZoom} from './mobileViewportZoomLock';
import {
  resolveAppRoute,
  shouldUseRecommendationRouteLoading,
} from './routing/appRoutes';
import {RouteImageReadyGate} from './routing/RouteImageReadyGate';
import {RouteLoadingScreen} from './routing/RouteLoadingScreen';
import {
  getHostRuntime,
  refreshNativeAppHostRuntime,
} from './services/host-bridge/hostBridge';

type AppRoot = ReturnType<typeof createRoot>;

declare global {
  interface Window {
    __tavernRealmsRoot__?: AppRoot;
  }
}

const route = resolveAppRoute(window.location.pathname);
const rootElement = document.getElementById('root');

if (!rootElement) {
  throw new Error('Missing #root container');
}

function markWechatMiniProgramRuntime() {
  if (getHostRuntime().kind === 'wechat_mini_program') {
    document.documentElement.dataset.wechatMiniProgramRuntime = 'true';
  }
}

const root = window.__tavernRealmsRoot__ ??= createRoot(rootElement);
const RouteComponent = route.Component;
const routeElement = <RouteComponent {...(route.componentProps ?? {})} />;
const shouldGateRouteImages = shouldUseRecommendationRouteLoading(
  window.location.pathname,
  getInitialPlatformDesktopLayout(),
);

lockMobileViewportZoom();
stabilizeMobileViewportKeyboardFocus();
markWechatMiniProgramRuntime();
void refreshNativeAppHostRuntime();

root.render(
  <StrictMode>
    <Suspense
      fallback={
        shouldGateRouteImages ? (
          <RouteLoadingScreen
            eyebrow={route.loadingEyebrow}
            text={route.loadingText}
          />
        ) : null
      }
    >
      {shouldGateRouteImages ? (
        <RouteImageReadyGate
          eyebrow={route.loadingEyebrow}
          text={route.loadingText}
        >
          {routeElement}
        </RouteImageReadyGate>
      ) : (
        routeElement
      )}
    </Suspense>
    <FloatingFeedbackEntry />
  </StrictMode>,
);