import { useEffect, useMemo } from "react";
import { BufferGeometry, Float32BufferAttribute, DoubleSide } from "three";
import geometry from "../../server/generated/arena-geometry.json" with { type: "json" };

/** The fallback draws the same surfaces used by the authoritative simulation. */
export default function ArenaFallbackStage({ stageId }: { stageId: string }) {
  const meshes = useMemo(() => {
    const data = (geometry as Record<string, { navigation: number[]; collision: number[] }>)[stageId];
    return ["navigation", "collision"].map((kind) => {
      const mesh = new BufferGeometry();
      mesh.setAttribute("position", new Float32BufferAttribute(data?.[kind as "navigation" | "collision"] ?? [], 3));
      mesh.computeVertexNormals();
      return mesh;
    });
  }, [stageId]);
  useEffect(() => () => meshes.forEach((mesh) => mesh.dispose()), [meshes]);
  return <group>
    <mesh geometry={meshes[0]} position={[0, -.025, 0]} receiveShadow><meshStandardMaterial color="#536452" side={DoubleSide} roughness={.9} /></mesh>
    <mesh geometry={meshes[1]} receiveShadow castShadow><meshStandardMaterial color="#66705e" side={DoubleSide} roughness={.85} /></mesh>
  </group>;
}