import {lazy, Suspense} from 'react';

import type {GameCanvasProps} from './game-canvas/GameCanvasShared';

export type {
  GameCanvasEntitySelection,
  GameCanvasProps,
} from './game-canvas/GameCanvasShared';

const GameCanvasRuntime = lazy(async () => {
  const module = await import('./game-canvas/GameCanvasRuntime');

  return {
    default: module.GameCanvasRuntime,
  };
});

function GameCanvasLoadingFallback({
  sceneName,
}: {
  sceneName: string | null;
}) {
  return (
    <div className="relative h-full w-full overflow-hidden bg-black">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),transparent_38%),linear-gradient(180deg,rgba(12,16,24,0.96),rgba(3,5,10,1))]" />
      {sceneName && (
        <div className="absolute left-1/2 top-3 -translate-x-1/2 rounded-full border border-white/10 bg-black/45 px-4 py-1 text-[10px] uppercase tracking-[0.2em] text-zinc-300">
          {sceneName}
        </div>
      )}
      <div className="absolute inset-0 flex items-center justify-center text-[11px] uppercase tracking-[0.3em] text-zinc-500">
        Loading scene
      </div>
    </div>
  );
}

export function GameCanvas(props: GameCanvasProps) {
  return (
    <Suspense fallback={<GameCanvasLoadingFallback sceneName={props.currentScenePreset?.name ?? null} />}>
      <GameCanvasRuntime {...props} />
    </Suspense>
  );
}