import * as React from "react";

import { MotionPreferenceControl } from "./components/preferences/MotionPreferenceControl";
import { defaultMachineId } from "./modules/machines/catalogue";
import {
  IntegratedErrorBoundary,
  IntegratedLoadingFallback,
  IntegratedProductionAppShell,
  IntegratedReducedMotionProvider,
} from "./production/integrationAdapters";
import { navigateTo, useBrowserLocation, useSpaLinkInterceptor } from "./utils/navigation";

const CataloguePage = React.lazy(() => import("./pages/CataloguePage"));
const MachineViewerPage = React.lazy(() => import("./pages/MachineViewerPage"));

type Route =
  | { kind: "catalogue"; query: string; key: string }
  | { kind: "machine"; machineId: string; key: string };

function parseRoute(pathname: string, search: string): Route {
  const params = new URLSearchParams(search);
  const segments = pathname.split("/").filter(Boolean);
  const query = params.get("q") ?? "";

  if (segments[0] === "machine" && segments[1]) {
    return {
      kind: "machine",
      machineId: decodeURIComponent(segments[1]),
      key: `machine:${segments[1]}`,
    };
  }

  const sharedMachineId = params.get("machine") ?? params.get("m");
  if (sharedMachineId) {
    return {
      kind: "machine",
      machineId: sharedMachineId,
      key: `machine:${sharedMachineId}`,
    };
  }

  if (segments[0] === "viewer") {
    return {
      kind: "machine",
      machineId: sharedMachineId ?? defaultMachineId,
      key: `machine:${sharedMachineId ?? defaultMachineId}`,
    };
  }

  return {
    kind: "catalogue",
    query,
    key: `catalogue:${query}`,
  };
}

function useRoutePreloading(): void {
  React.useEffect(() => {
    if (typeof window === "undefined") {
      return undefined;
    }

    const preload = () => {
      void import("./pages/CataloguePage");
      void import("./pages/MachineViewerPage");
    };

    const idleWindow = window as Window & {
      requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number;
      cancelIdleCallback?: (id: number) => void;
    };

    if (idleWindow.requestIdleCallback && idleWindow.cancelIdleCallback) {
      const id = idleWindow.requestIdleCallback(preload, { timeout: 2200 });
      return () => idleWindow.cancelIdleCallback?.(id);
    }

    const id = window.setTimeout(preload, 800);
    return () => window.clearTimeout(id);
  }, []);
}

export default function App(): JSX.Element {
  const location = useBrowserLocation();
  const route = React.useMemo(
    () => parseRoute(location.pathname, location.search),
    [location.pathname, location.search],
  );

  useSpaLinkInterceptor();
  useRoutePreloading();

  const handleGlobalSearch = React.useCallback((query: string) => {
    const params = new URLSearchParams();

    if (query.trim()) {
      params.set("q", query.trim());
    }

    navigateTo(`/catalogue${params.toString() ? `?${params.toString()}` : ""}`);
  }, []);

  const routeContent =
    route.kind === "catalogue" ? (
      <CataloguePage
        initialQuery={route.query}
        onOpenMachine={(machineId) => navigateTo(`/machine/${machineId}`)}
      />
    ) : (
      <MachineViewerPage
        machineId={route.machineId}
        search={location.search}
        onBackToCatalogue={() => navigateTo("/catalogue")}
      />
    );

  return (
    <IntegratedReducedMotionProvider>
      <IntegratedProductionAppShell
        activePath={route.kind}
        toolbarSlot={<MotionPreferenceControl compact />}
        onNavigate={navigateTo}
        onGlobalSearchSubmit={handleGlobalSearch}
      >
        <IntegratedErrorBoundary name="route" resetKeys={[route.key]}>
          <React.Suspense
            fallback={
              <div className="mx-auto max-w-[1800px] p-4">
                <IntegratedLoadingFallback
                  label="Loading Mechanica"
                  detail="Code-split route bundle is loading…"
                />
              </div>
            }
          >
            {routeContent}
          </React.Suspense>
        </IntegratedErrorBoundary>
      </IntegratedProductionAppShell>
    </IntegratedReducedMotionProvider>
  );
}