Genarrative/src/ActiveApp.tsx

import { useCallback, useEffect, useState } from 'react';

import { useAuthUi } from './components/auth/AuthUiContext';
import type { SelectionStage } from './components/platform-entry/platformEntryActiveTypes';
import { PlatformEntryFlowShell } from './components/platform-entry/PlatformEntryFlowShell';
import { useHostNavigationCanGoBack } from './hooks/useHostNavigationCanGoBack';
import {
  isAppHistoryState,
  isKnownMainAppPagePath,
  normalizeAppPath,
  pushAppHistoryPath,
  replaceAppHistoryPath,
  resolveInitialSelectionStageFromPath,
  resolvePathForSelectionStage,
  shouldRedirectEditorCanvasWithoutProject,
} from './routing/activeAppPageRoutes';
import {
  resolveAppTitleForSelectionStage,
  syncAppTitle,
} from './services/activeAppTitle';
import {
  refreshNativeAppHostRuntime,
  subscribeHostRuntimeChange,
} from './services/host-bridge/hostBridge';

function resolveInitialAppSelectionStage() {
  if (
    shouldRedirectEditorCanvasWithoutProject(
      window.location.pathname,
      window.location.search,
    )
  ) {
    replaceAppHistoryPath('/project');
    return 'project';
  }

  if (!isKnownMainAppPagePath(window.location.pathname)) {
    replaceAppHistoryPath('/');
    return 'platform';
  }

  return resolveInitialSelectionStageFromPath(window.location.pathname, false);
}

export default function App() {
  const authUi = useAuthUi();
  const hostNavigation = useHostNavigationCanGoBack();
  const [, setHostRuntimeRevision] = useState(0);
  const [selectionStage, setRawSelectionStage] = useState<SelectionStage>(
    resolveInitialAppSelectionStage,
  );

  const setSelectionStage = useCallback(
    (stage: SelectionStage, options?: { path?: string }) => {
      setRawSelectionStage(stage);
      pushAppHistoryPath(options?.path ?? resolvePathForSelectionStage(stage));
    },
    [],
  );

  useEffect(() => {
    const unsubscribe = subscribeHostRuntimeChange(() => {
      setHostRuntimeRevision((revision) => revision + 1);
    });

    void refreshNativeAppHostRuntime();

    return unsubscribe;
  }, []);

  useEffect(() => {
    const syncStageFromHistory = () => {
      if (
        shouldRedirectEditorCanvasWithoutProject(
          window.location.pathname,
          window.location.search,
        )
      ) {
        replaceAppHistoryPath('/project');
        setRawSelectionStage('project');
        return;
      }
      if (!isKnownMainAppPagePath(window.location.pathname)) {
        replaceAppHistoryPath('/');
        setRawSelectionStage('platform');
        return;
      }
      setRawSelectionStage(
        resolveInitialSelectionStageFromPath(window.location.pathname, false),
      );
    };

    window.addEventListener('popstate', syncStageFromHistory);
    return () => window.removeEventListener('popstate', syncStageFromHistory);
  }, []);

  useEffect(() => {
    if (
      !hostNavigation.isSupported ||
      hostNavigation.canGoBack ||
      selectionStage === 'platform' ||
      isAppHistoryState(window.history.state)
    ) {
      return;
    }

    const currentPath = normalizeAppPath(window.location.pathname);
    const currentSearch = window.location.search;

    replaceAppHistoryPath('/');
    pushAppHistoryPath(`${currentPath}${currentSearch}`);
  }, [hostNavigation.canGoBack, hostNavigation.isSupported, selectionStage]);
  const platformThemeClass =
    authUi?.platformTheme === 'dark'
      ? 'platform-theme--dark'
      : 'platform-theme--light';
  const isImageEditorStage = selectionStage === 'image-editor';
  const platformShellSurfaceClass = isImageEditorStage
    ? 'bg-white p-0'
    : 'bg-[image:var(--platform-body-fill)] p-2 sm:p-4';

  useEffect(() => {
    syncAppTitle(resolveAppTitleForSelectionStage(selectionStage));
  }, [selectionStage]);

  return (
    <div
      className={`platform-ui-shell platform-viewport-shell platform-theme ${platformThemeClass} flex flex-col overflow-hidden ${platformShellSurfaceClass} font-sans text-[var(--platform-text-strong)]`}
    >
      <PlatformEntryFlowShell
        selectionStage={selectionStage}
        setSelectionStage={setSelectionStage}
      />
    </div>
  );
}