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

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

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

import { FloatingFeedbackEntry } from './components/common/FloatingFeedbackEntry';
import { stabilizeMobileViewportKeyboardFocus } from './mobileViewportKeyboardFocus';
import { lockMobileViewportZoom } from './mobileViewportZoomLock';
import { resolveAppRoute } from './routing/activeAppRoutes';
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 />;

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

root.render(
  <StrictMode>
    <Suspense fallback={null}>{routeElement}</Suspense>
    {route.kind === 'platform' ? <FloatingFeedbackEntry /> : null}
  </StrictMode>,
);