import { Suspense, type ReactNode } from 'react';

import { AppErrorBoundary, type ErrorBoundaryProps } from '../components/error-boundary/ErrorBoundary';
import { RouteLoadingFallback } from '../components/loading/LoadingFallback';
import { ReducedMotionProvider, type MotionPreference } from '../hooks/useReducedMotion';

export interface ProductionAppShellProps {
  children: ReactNode;
  loadingFallback?: ReactNode;
  className?: string;
  reducedMotionStorageKey?: string;
  defaultMotionPreference?: MotionPreference;
  persistMotionPreference?: boolean;
  onError?: ErrorBoundaryProps['onError'];
}

export function ProductionAppShell({
  children,
  loadingFallback = <RouteLoadingFallback />,
  className,
  reducedMotionStorageKey,
  defaultMotionPreference = 'system',
  persistMotionPreference = true,
  onError,
}: ProductionAppShellProps): JSX.Element {
  return (
    <ReducedMotionProvider
      defaultPreference={defaultMotionPreference}
      storageKey={reducedMotionStorageKey}
      persist={persistMotionPreference}
    >
      <AppErrorBoundary onError={onError}>
        <Suspense fallback={loadingFallback}>
          <div className={className}>
            <a
              href="#main-content"
              className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-full focus:bg-[#4C8DFF] focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-white"
            >
              Skip to explorer content
            </a>
            {children}
          </div>
        </Suspense>
      </AppErrorBoundary>
    </ReducedMotionProvider>
  );
}