"use client";

/* eslint-disable @next/next/no-img-element */
import { Html, OrbitControls, PointerLockControls } from "@react-three/drei";
import { Canvas, type ThreeEvent, useFrame, useThree } from "@react-three/fiber";
import { SparkRenderer, SplatMesh as SparkSplatMesh } from "@sparkjsdev/spark";
import {
  AlertCircle,
  ArrowDown,
  ArrowLeft,
  ArrowRight,
  ArrowUp,
  Box,
  Crosshair,
  Globe,
  ImageIcon,
  Loader2,
  Sparkles,
} from "lucide-react";
import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
import * as THREE from "three";
import {
  type Model3DLayer,
  type Model3DStats,
  Model3DViewer,
  type Model3DViewerSettings,
} from "@/components/canvas/model3d/Model3DViewer";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { World3DHotspot, World3DViewMode } from "@/types/canvas";

type World3DPickResult = {
  point: [number, number, number];
};

type MovementCommand =
  | "forward"
  | "backward"
  | "left"
  | "right"
  | "up"
  | "down";

type MovementState = Record<MovementCommand, boolean>;
type SplatLoadingPhase = "loading" | "fading" | "hidden";

type World3DViewerProps = {
  mode: World3DViewMode;
  worldUrl?: string | null;
  imageUrl?: string | null;
  meshUrl?: string | null;
  splatUrl?: string | null;
  previewImageUrl?: string | null;
  emptyStateTitle?: string;
  meshSettings?: Model3DViewerSettings;
  meshLayerVisibility?: Record<string, boolean>;
  onMeshLayersChange?: (layers: Model3DLayer[]) => void;
  onMeshStatsChange?: (stats: Model3DStats) => void;
  firstPerson?: boolean;
  hotspots?: World3DHotspot[];
  interactionMode?: "navigate" | "hotspot";
  onPick?: (pick: World3DPickResult) => void;
  onHotspotSelect?: (hotspotId: string) => void;
  semanticsMetadata?: Record<string, unknown> | null;
  className?: string;
};

const DEFAULT_MESH_SETTINGS: Model3DViewerSettings = {
  envPreset: "city",
  lightIntensity: 1,
  autoRotate: false,
  showGrid: true,
  wireframe: false,
};

const EMPTY_MOVEMENT_STATE: MovementState = {
  forward: false,
  backward: false,
  left: false,
  right: false,
  up: false,
  down: false,
};

const KEY_TO_MOVEMENT: Partial<Record<string, MovementCommand>> = {
  KeyW: "forward",
  ArrowUp: "forward",
  KeyS: "backward",
  ArrowDown: "backward",
  KeyA: "left",
  ArrowLeft: "left",
  KeyD: "right",
  ArrowRight: "right",
  KeyQ: "up",
  KeyR: "up",
  PageUp: "up",
  KeyE: "down",
  KeyF: "down",
  PageDown: "down",
};

function isEditableKeyboardTarget(target: EventTarget | null) {
  if (!(target instanceof HTMLElement)) return false;
  if (target.isContentEditable) return true;

  const editableSelector = "input, textarea, select, [contenteditable='true'], [role='textbox']";
  if (target.matches(editableSelector)) return true;
  return Boolean(target.closest(editableSelector));
}

function getSemanticFacts(metadata?: Record<string, unknown> | null) {
  if (!metadata) return [];

  const facts: Array<{ label: string; value: string }> = [];
  const scaleFactor = metadata.metric_scale_factor;
  if (typeof scaleFactor === "number" && Number.isFinite(scaleFactor)) {
    facts.push({
      label: "比例尺",
      value: `${scaleFactor.toFixed(3)}x`,
    });
  }

  const groundOffset = metadata.ground_plane_offset;
  if (typeof groundOffset === "number" && Number.isFinite(groundOffset)) {
    facts.push({
      label: "地平面偏移",
      value: `${groundOffset.toFixed(2)}m`,
    });
  }

  return facts;
}

function WorldEmptyState({
  icon: Icon,
  title,
  description,
  previewImageUrl,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
  previewImageUrl?: string | null;
}) {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-zinc-950/70 p-6 text-center">
      {previewImageUrl ? (
        <div className="relative aspect-video w-full max-w-xl overflow-hidden rounded-2xl border border-white/10 bg-black/40 shadow-2xl">
          <img
            alt={title}
            className="h-full w-full object-cover opacity-50"
            src={previewImageUrl}
          />
          <div className="absolute inset-0 flex items-center justify-center bg-black/30 backdrop-blur-[1px]">
            <Loader2 className="h-8 w-8 animate-spin text-white/40" />
          </div>
        </div>
      ) : (
        <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-zinc-900/60 shadow-inner">
          <Icon className="h-10 w-10 text-zinc-700" />
        </div>
      )}
      <div className="space-y-2">
        <p className="font-medium text-lg text-zinc-200">{title}</p>
        <p className="max-w-md text-sm text-zinc-500">{description}</p>
      </div>
    </div>
  );
}

const SPLAT_LOADING_PARTICLES = [
  { x: 8, y: 18, size: 5, dx: 18, dy: -22, delay: 0.1, duration: 4.6 },
  { x: 18, y: 64, size: 7, dx: 26, dy: -18, delay: 0.4, duration: 5.2 },
  { x: 26, y: 34, size: 4, dx: -12, dy: -28, delay: 0.7, duration: 4.8 },
  { x: 34, y: 78, size: 6, dx: 14, dy: -24, delay: 1.1, duration: 5.6 },
  { x: 44, y: 16, size: 8, dx: -18, dy: 18, delay: 0.3, duration: 5.4 },
  { x: 52, y: 56, size: 5, dx: 20, dy: -26, delay: 0.9, duration: 4.9 },
  { x: 61, y: 28, size: 6, dx: -22, dy: -16, delay: 1.4, duration: 5.8 },
  { x: 68, y: 72, size: 4, dx: 16, dy: -20, delay: 0.2, duration: 4.7 },
  { x: 76, y: 42, size: 8, dx: -14, dy: 22, delay: 1.2, duration: 5.1 },
  { x: 84, y: 62, size: 5, dx: 22, dy: -14, delay: 0.6, duration: 5.7 },
  { x: 91, y: 24, size: 6, dx: -16, dy: 18, delay: 1.5, duration: 4.5 },
  { x: 12, y: 44, size: 4, dx: 12, dy: 14, delay: 1.8, duration: 5.3 },
] as const;

const SPLAT_ASSEMBLY_POINT_COUNT = 220;
const SPLAT_ASSEMBLY_COLORS = ["#67e8f9", "#93c5fd", "#f8fafc", "#22d3ee"] as const;

function seededUnit(index: number, salt: number) {
  const value = Math.sin(index * 12.9898 + salt * 78.233) * 43758.5453;
  return value - Math.floor(value);
}

function SplatAssemblyCloud({
  phase,
}: {
  phase: Exclude<SplatLoadingPhase, "hidden">;
}) {
  const pointsRef = useRef<THREE.Points>(null);
  const materialRef = useRef<THREE.PointsMaterial>(null);
  const geometryRef = useRef<THREE.BufferGeometry>(null);
  const phaseRef = useRef(phase);
  const phaseStartedAtRef = useRef(0);

  const seeds = useMemo(
    () =>
      Array.from({ length: SPLAT_ASSEMBLY_POINT_COUNT }, (_, index) => {
        const spread = seededUnit(index, 1);
        const tilt = seededUnit(index, 2);
        const orbit = seededUnit(index, 3);
        const colorIndex = Math.floor(
          seededUnit(index, 4) * SPLAT_ASSEMBLY_COLORS.length
        );

        return {
          target: new THREE.Vector3(
            (spread - 0.5) * 4.8,
            0.45 + tilt * 2.6,
            (orbit - 0.5) * 4.4
          ),
          orbitRadius: 0.4 + seededUnit(index, 5) * 2.2,
          orbitSpeed: 0.2 + seededUnit(index, 6) * 0.8,
          angle: seededUnit(index, 7) * Math.PI * 2,
          verticalAmplitude: 0.08 + seededUnit(index, 8) * 0.32,
          drift: 0.65 + seededUnit(index, 9) * 0.75,
          color: new THREE.Color(
            SPLAT_ASSEMBLY_COLORS[colorIndex] || SPLAT_ASSEMBLY_COLORS[0]
          ),
        };
      }),
    []
  );
  const positions = useMemo(
    () => new Float32Array(SPLAT_ASSEMBLY_POINT_COUNT * 3),
    []
  );
  const colors = useMemo(() => {
    const result = new Float32Array(SPLAT_ASSEMBLY_POINT_COUNT * 3);
    seeds.forEach((seed, index) => {
      result[index * 3] = seed.color.r;
      result[index * 3 + 1] = seed.color.g;
      result[index * 3 + 2] = seed.color.b;
    });
    return result;
  }, [seeds]);

  useEffect(() => {
    if (phaseRef.current !== phase) {
      phaseRef.current = phase;
      phaseStartedAtRef.current = performance.now();
    }
  }, [phase]);

  useEffect(() => {
    if (pointsRef.current) {
      pointsRef.current.raycast = () => null;
    }
  }, []);

  useFrame((state) => {
    const geometry = geometryRef.current;
    const material = materialRef.current;
    if (!geometry || !material) return;

    const elapsed = state.clock.getElapsedTime();
    const fadeElapsed =
      phaseRef.current === "fading"
        ? Math.min((performance.now() - phaseStartedAtRef.current) / 850, 1)
        : 0;
    const baseOpacity =
      phaseRef.current === "loading"
        ? 0.78
        : THREE.MathUtils.lerp(0.78, 0, fadeElapsed);
    material.opacity = baseOpacity;
    material.size = THREE.MathUtils.lerp(0.09, 0.02, fadeElapsed);

    seeds.forEach((seed, index) => {
      const stride = index * 3;
      const orbitAngle = elapsed * seed.orbitSpeed + seed.angle;
      const phaseMix =
        phaseRef.current === "loading"
          ? 0.22 + 0.2 * Math.sin(elapsed * 0.65 + seed.angle)
          : THREE.MathUtils.lerp(0.72, 1.02, fadeElapsed);
      const orbitRadius =
        seed.orbitRadius *
        (phaseRef.current === "loading"
          ? 0.95 + 0.08 * Math.sin(elapsed * 1.3 + seed.angle)
          : Math.max(0, 0.45 * (1 - fadeElapsed)));
      const verticalWave =
        Math.sin(elapsed * seed.drift + seed.angle * 1.4) *
        seed.verticalAmplitude *
        (phaseRef.current === "loading" ? 1 : 1 - fadeElapsed);

      positions[stride] =
        seed.target.x * phaseMix + Math.cos(orbitAngle) * orbitRadius;
      positions[stride + 1] =
        seed.target.y * phaseMix +
        verticalWave +
        Math.sin(orbitAngle * 0.7) * orbitRadius * 0.18;
      positions[stride + 2] =
        seed.target.z * phaseMix + Math.sin(orbitAngle) * orbitRadius;
    });

    geometry.attributes.position.needsUpdate = true;
  });

  return (
    <points frustumCulled={false} ref={pointsRef} renderOrder={2}>
      <bufferGeometry ref={geometryRef}>
        <bufferAttribute
          attach="attributes-position"
          args={[positions, 3]}
        />
        <bufferAttribute
          attach="attributes-color"
          args={[colors, 3]}
        />
      </bufferGeometry>
      <pointsMaterial
        blending={THREE.AdditiveBlending}
        depthWrite={false}
        ref={materialRef}
        size={0.09}
        sizeAttenuation
        transparent
        vertexColors
      />
    </points>
  );
}

function WorldSplatLoadingOverlay({
  previewImageUrl,
  phase,
}: {
  previewImageUrl?: string | null;
  phase: Exclude<SplatLoadingPhase, "hidden">;
}) {
  const isFading = phase === "fading";

  return (
    <div
      className={cn(
        "pointer-events-none absolute inset-0 overflow-hidden transition-all duration-700",
        isFading ? "scale-[1.02] opacity-0 blur-[1px]" : "opacity-100"
      )}
    >
      {previewImageUrl ? (
        <img
          alt="世界预览"
          className="absolute inset-0 h-full w-full object-cover opacity-35 blur-[2px] saturate-[0.85]"
          src={previewImageUrl}
        />
      ) : null}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.16),_rgba(1,1,1,0)_34%),linear-gradient(180deg,rgba(2,6,23,0.72)_0%,rgba(2,6,23,0.9)_100%)]" />
      <div className="absolute inset-0 bg-[linear-gradient(120deg,transparent_0%,rgba(255,255,255,0.05)_44%,transparent_58%)] [background-size:220%_100%] animate-[worldlabs-scan_3.6s_ease-in-out_infinite]" />

      <div className="absolute inset-0">
        {SPLAT_LOADING_PARTICLES.map((particle, index) => (
          <span
            className="absolute rounded-full bg-cyan-300/70 shadow-[0_0_24px_rgba(103,232,249,0.45)]"
            key={`${particle.x}-${particle.y}-${index}`}
            style={
              {
                left: `${particle.x}%`,
                top: `${particle.y}%`,
                width: `${particle.size}px`,
                height: `${particle.size}px`,
                "--worldlabs-dx": `${particle.dx}px`,
                "--worldlabs-dy": `${particle.dy}px`,
                animation: `worldlabs-particle ${particle.duration}s ease-in-out ${particle.delay}s infinite`,
              } as React.CSSProperties
            }
          />
        ))}
      </div>

      <div className="absolute inset-x-0 bottom-0 h-40 bg-[linear-gradient(180deg,rgba(2,6,23,0)_0%,rgba(2,6,23,0.88)_100%)]" />

      <div className="absolute inset-0 flex items-center justify-center p-6">
        <div className="w-full max-w-lg rounded-3xl border border-white/10 bg-black/35 px-6 py-5 text-center shadow-[0_24px_100px_rgba(0,0,0,0.45)] backdrop-blur-xl">
          <div className="mb-3 inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-cyan-400/20 bg-cyan-400/10">
            <Sparkles className="h-6 w-6 text-cyan-200" />
          </div>
          <div className="space-y-2">
            <p className="text-lg font-semibold text-white">
              {isFading ? "正在显露 3D 世界细节" : "正在构建 3D 世界体积"}
            </p>
            <p className="mx-auto max-w-md text-sm leading-6 text-zinc-300">
              {isFading
                ? "Gaussian Splat 已加载完成，正在把真实细节从过渡层中释放出来。"
                : "SPZ 会先以粗糙体积快速占位，再逐步补齐细节。先用粒子过渡能让加载观感更顺。"}
            </p>
          </div>
          <div className="mt-4 flex items-center justify-center gap-2 text-[11px] text-cyan-100/85">
            <Loader2 className="h-3.5 w-3.5 animate-spin" />
            <span>{isFading ? "即将完成" : "初始化 Splat 渲染器"}</span>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes worldlabs-particle {
          0% {
            opacity: 0;
            transform: translate3d(0, 0, 0) scale(0.4);
          }
          20% {
            opacity: 0.9;
          }
          55% {
            opacity: 0.8;
            transform: translate3d(var(--worldlabs-dx), var(--worldlabs-dy), 0) scale(1);
          }
          100% {
            opacity: 0;
            transform: translate3d(
                calc(var(--worldlabs-dx) * 1.45),
                calc(var(--worldlabs-dy) * 1.45),
                0
              )
              scale(1.35);
          }
        }

        @keyframes worldlabs-scan {
          0% {
            background-position: 115% 0;
          }
          100% {
            background-position: -15% 0;
          }
        }
      `}</style>
    </div>
  );
}

function createMovementState(): MovementState {
  return { ...EMPTY_MOVEMENT_STATE };
}

function DirectionPad({
  onCommandChange,
}: {
  onCommandChange: (command: MovementCommand, active: boolean) => void;
}) {
  const pressHandlers = (command: MovementCommand) => ({
    onMouseDown: () => onCommandChange(command, true),
    onMouseUp: () => onCommandChange(command, false),
    onMouseLeave: () => onCommandChange(command, false),
    onTouchStart: () => onCommandChange(command, true),
    onTouchEnd: () => onCommandChange(command, false),
    onTouchCancel: () => onCommandChange(command, false),
  });

  return (
    <div className="pointer-events-auto rounded-2xl border border-white/10 bg-black/55 p-2 shadow-2xl backdrop-blur-sm">
      <div className="mb-2 text-center text-[10px] text-zinc-400">方向移动</div>
      <div className="grid grid-cols-3 gap-2">
        <div />
        <button
          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("forward")}
        >
          <ArrowUp className="h-4 w-4" />
        </button>
        <button
          className="flex h-10 min-w-[3.25rem] items-center justify-center rounded-xl border border-white/10 bg-white/5 px-2 text-xs text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("up")}
        >
          上
        </button>

        <button
          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("left")}
        >
          <ArrowLeft className="h-4 w-4" />
        </button>
        <div className="flex h-10 items-center justify-center rounded-xl border border-dashed border-white/10 bg-white/[0.03] px-2 text-[10px] text-zinc-500">
          前后左右
        </div>
        <button
          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("right")}
        >
          <ArrowRight className="h-4 w-4" />
        </button>

        <div />
        <button
          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("backward")}
        >
          <ArrowDown className="h-4 w-4" />
        </button>
        <button
          className="flex h-10 min-w-[3.25rem] items-center justify-center rounded-xl border border-white/10 bg-white/5 px-2 text-xs text-zinc-100 transition hover:bg-white/10"
          type="button"
          {...pressHandlers("down")}
        >
          下
        </button>
      </div>
    </div>
  );
}

function CameraMovementControls({
  enabled,
  firstPerson,
  virtualMovement,
  orbitControlsRef,
}: {
  enabled: boolean;
  firstPerson: boolean;
  virtualMovement: MovementState;
  orbitControlsRef: React.MutableRefObject<any>;
}) {
  const { camera } = useThree();
  const pressedKeysRef = useRef<MovementState>(createMovementState());
  const directionRef = useRef(new THREE.Vector3());
  const rightRef = useRef(new THREE.Vector3());
  const upRef = useRef(new THREE.Vector3());
  const moveRef = useRef(new THREE.Vector3());

  useEffect(() => {
    if (!enabled) {
      pressedKeysRef.current = createMovementState();
      return;
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      const movement = KEY_TO_MOVEMENT[event.code];
      if (!movement) return;
      if (event.metaKey || event.ctrlKey || event.altKey) return;
      if (isEditableKeyboardTarget(event.target)) {
        pressedKeysRef.current = createMovementState();
        return;
      }
      pressedKeysRef.current[movement] = true;
    };
    const handleKeyUp = (event: KeyboardEvent) => {
      const movement = KEY_TO_MOVEMENT[event.code];
      if (!movement) return;
      if (isEditableKeyboardTarget(event.target)) {
        pressedKeysRef.current = createMovementState();
        return;
      }
      pressedKeysRef.current[movement] = false;
    };
    const handleFocusIn = (event: FocusEvent) => {
      if (isEditableKeyboardTarget(event.target)) {
        pressedKeysRef.current = createMovementState();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
    window.addEventListener("focusin", handleFocusIn);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
      window.removeEventListener("focusin", handleFocusIn);
    };
  }, [enabled]);

  useFrame((_, delta) => {
    if (!enabled) return;

    const pressed = pressedKeysRef.current;
    const hasMovement =
      Object.values(pressed).some(Boolean) || Object.values(virtualMovement).some(Boolean);
    if (!hasMovement) return;

    const moveSpeed = 3.8;
    const distance = moveSpeed * delta;

    camera.getWorldDirection(directionRef.current);
    directionRef.current.setY(0).normalize();
    rightRef.current.crossVectors(directionRef.current, camera.up).normalize();
    upRef.current.copy(camera.up).normalize();

    moveRef.current.set(0, 0, 0);

    if (pressed.forward || virtualMovement.forward) {
      moveRef.current.add(directionRef.current);
    }
    if (pressed.backward || virtualMovement.backward) {
      moveRef.current.addScaledVector(directionRef.current, -1);
    }
    if (pressed.left || virtualMovement.left) {
      moveRef.current.addScaledVector(rightRef.current, -1);
    }
    if (pressed.right || virtualMovement.right) {
      moveRef.current.add(rightRef.current);
    }
    if (pressed.up || virtualMovement.up) {
      moveRef.current.add(upRef.current);
    }
    if (pressed.down || virtualMovement.down) {
      moveRef.current.addScaledVector(upRef.current, -1);
    }

    if (moveRef.current.lengthSq() === 0) return;

    moveRef.current.normalize().multiplyScalar(distance);
    camera.position.add(moveRef.current);

    if (!firstPerson && orbitControlsRef.current?.target) {
      orbitControlsRef.current.target.add(moveRef.current);
      orbitControlsRef.current.update();
    }
  });

  if (!enabled || !firstPerson) return null;
  return <PointerLockControls makeDefault />;
}

function HotspotBillboard({
  hotspot,
  onSelect,
}: {
  hotspot: World3DHotspot;
  onSelect?: (hotspotId: string) => void;
}) {
  return (
    <group position={[hotspot.position.x, hotspot.position.y, hotspot.position.z]}>
      <mesh
        onClick={(event) => {
          event.stopPropagation();
          onSelect?.(hotspot.id);
        }}
      >
        <sphereGeometry args={[0.07, 24, 24]} />
        <meshStandardMaterial color="#facc15" emissive="#ca8a04" emissiveIntensity={0.8} />
      </mesh>
      <Html center distanceFactor={8} position={[0, 0.14, 0]}>
        <div className="rounded-full border border-yellow-400/30 bg-black/70 px-2 py-1 text-[10px] font-medium text-yellow-200 shadow-lg backdrop-blur-sm">
          {hotspot.label}
        </div>
      </Html>
    </group>
  );
}

function WorldSplatScene({
  splatUrl,
  assemblyPhase = "loading",
  firstPerson = false,
  hotspots = [],
  interactionMode = "navigate",
  onPick,
  onHotspotSelect,
  semanticsMetadata,
  onLoadStateChange,
}: {
  splatUrl: string;
  assemblyPhase?: SplatLoadingPhase;
  firstPerson?: boolean;
  hotspots?: World3DHotspot[];
  interactionMode?: "navigate" | "hotspot";
  onPick?: (pick: World3DPickResult) => void;
  onHotspotSelect?: (hotspotId: string) => void;
  semanticsMetadata?: Record<string, unknown> | null;
  onLoadStateChange?: (state: "ready" | "error") => void;
}) {
  const renderer = useThree((state) => state.gl);
  const orbitControlsRef = useRef<any>(null);
  const [virtualMovement, setVirtualMovement] =
    useState<MovementState>(createMovementState);
  const semanticFacts = useMemo(
    () => getSemanticFacts(semanticsMetadata),
    [semanticsMetadata]
  );
  const sparkRenderer = useMemo(
    () =>
      new SparkRenderer({
        renderer,
        blurAmount: 0.2,
        maxStdDev: Math.sqrt(7),
      }),
    [renderer]
  );
  const splatMesh = useMemo(() => new SparkSplatMesh({ url: splatUrl }), [splatUrl]);

  useEffect(() => {
    sparkRenderer.frustumCulled = false;
    sparkRenderer.renderOrder = 10;
    return () => {
      sparkRenderer.removeFromParent();
    };
  }, [sparkRenderer]);

  useEffect(() => {
    splatMesh.frustumCulled = false;
    splatMesh.rotation.x = Math.PI;
    let cancelled = false;
    splatMesh.initialized
      .then(() => {
        if (!cancelled) onLoadStateChange?.("ready");
      })
      .catch(() => {
        if (!cancelled) onLoadStateChange?.("error");
      });
    return () => {
      cancelled = true;
      splatMesh.dispose();
    };
  }, [onLoadStateChange, splatMesh]);

  useFrame(() => {
    sparkRenderer.needsUpdate = true;
  });

  const groundPlaneOffset =
    typeof semanticsMetadata?.ground_plane_offset === "number"
      ? -semanticsMetadata.ground_plane_offset
      : null;

  const handleDirectionChange = (command: MovementCommand, active: boolean) => {
    setVirtualMovement((prev) => {
      if (prev[command] === active) return prev;
      return {
        ...prev,
        [command]: active,
      };
    });
  };

  const handlePointerDown = (event: ThreeEvent<PointerEvent>) => {
    if (interactionMode !== "hotspot") return;
    event.stopPropagation();
    onPick?.({
      point: [event.point.x, event.point.y, event.point.z],
    });
  };

  return (
    <>
      <color args={["#020617"]} attach="background" />
      <fog attach="fog" args={["#020617", 10, 45]} />
      <ambientLight intensity={1.6} />
      <directionalLight intensity={1.25} position={[6, 10, 4]} />
      {groundPlaneOffset !== null ? (
        <gridHelper
          args={[18, 18, "#334155", "#0f172a"]}
          position={[0, groundPlaneOffset, 0]}
        />
      ) : null}
      {assemblyPhase !== "hidden" ? (
        <SplatAssemblyCloud phase={assemblyPhase} />
      ) : null}
      <Suspense fallback={null}>
        <primitive object={sparkRenderer}>
          <primitive object={splatMesh} onPointerDown={handlePointerDown} />
        </primitive>
      </Suspense>
      {hotspots.map((hotspot) => (
        <HotspotBillboard
          hotspot={hotspot}
          key={hotspot.id}
          onSelect={onHotspotSelect}
        />
      ))}
      <CameraMovementControls
        enabled={interactionMode === "navigate"}
        firstPerson={firstPerson}
        orbitControlsRef={orbitControlsRef}
        virtualMovement={virtualMovement}
      />
      {!firstPerson ? (
        <OrbitControls
          autoRotate={false}
          enablePan
          enableRotate
          enableZoom
          makeDefault
          maxDistance={16}
          minDistance={0.5}
          ref={orbitControlsRef}
        />
      ) : (
        <OrbitControls
          enablePan={false}
          enableRotate={false}
          enableZoom={false}
          ref={orbitControlsRef}
        />
      )}
      <Html className="pointer-events-none" fullscreen>
        <div className="flex h-full w-full flex-col justify-between p-4">
          <div className="flex items-start justify-between">
            <div className="flex gap-2">
              <Badge className="border-cyan-500/30 bg-cyan-500/10 text-cyan-200" variant="outline">
                SPZ
              </Badge>
              {semanticFacts.map((fact) => (
                <Badge
                  className="border-white/10 bg-black/50 text-zinc-200"
                  key={fact.label}
                  variant="outline"
                >
                  {fact.label} {fact.value}
                </Badge>
              ))}
            </div>
            {interactionMode === "hotspot" ? (
              <div className="rounded-full border border-yellow-400/30 bg-black/65 px-3 py-1 text-[11px] text-yellow-100">
                点击场景放置热点
              </div>
            ) : null}
          </div>
          <div className="flex items-end justify-between">
            <div className="rounded-2xl border border-white/10 bg-black/55 px-3 py-2 text-[11px] text-zinc-300 backdrop-blur-sm">
              {firstPerson
                ? "方向键 / WASD 前后左右 · Q/E 或 PgUp/PgDn 上下 · 鼠标观察 · Esc 退出"
                : "拖拽旋转 · 滚轮缩放 · 方向键 / 按钮可做六向移动"}
            </div>
            <div className="flex items-end gap-3">
              {interactionMode === "navigate" ? (
                <DirectionPad onCommandChange={handleDirectionChange} />
              ) : null}
              {(firstPerson || interactionMode === "hotspot") && (
                <div className="flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-black/55 text-zinc-100 shadow-xl backdrop-blur-sm">
                  <Crosshair className="h-5 w-5" />
                </div>
              )}
            </div>
          </div>
        </div>
      </Html>
    </>
  );
}

function WorldSplatViewer({
  splatUrl,
  previewImageUrl,
  firstPerson,
  hotspots,
  interactionMode,
  onPick,
  onHotspotSelect,
  semanticsMetadata,
}: {
  splatUrl?: string | null;
  previewImageUrl?: string | null;
  firstPerson?: boolean;
  hotspots?: World3DHotspot[];
  interactionMode?: "navigate" | "hotspot";
  onPick?: (pick: World3DPickResult) => void;
  onHotspotSelect?: (hotspotId: string) => void;
  semanticsMetadata?: Record<string, unknown> | null;
}) {
  const [loadState, setLoadState] = useState<"loading" | "ready" | "error">("loading");
  const [overlayPhase, setOverlayPhase] = useState<SplatLoadingPhase>("loading");

  useEffect(() => {
    setLoadState("loading");
    setOverlayPhase("loading");
  }, [splatUrl]);

  useEffect(() => {
    if (loadState === "ready") {
      setOverlayPhase("fading");
      const timer = window.setTimeout(() => {
        setOverlayPhase("hidden");
      }, 720);
      return () => window.clearTimeout(timer);
    }

    if (loadState === "loading") {
      setOverlayPhase("loading");
    }

    if (loadState === "error") {
      setOverlayPhase("hidden");
    }
  }, [loadState]);

  if (!splatUrl) {
    return (
      <WorldEmptyState
        description="当前结果没有返回可用的 SPZ 世界资产。"
        icon={Sparkles}
        previewImageUrl={previewImageUrl}
        title="准备加载 Splat 世界"
      />
    );
  }

  if (loadState === "error") {
    return (
      <WorldEmptyState
        description="SPZ 资源暂时无法加载，可以切换到 World、图像或 Mesh 视图继续查看。"
        icon={AlertCircle}
        previewImageUrl={previewImageUrl}
        title="Splat 视图加载失败"
      />
    );
  }

  return (
    <div className="relative h-full w-full">
      <Canvas
        camera={{ position: [0, 1.6, 4], fov: 55 }}
        className="h-full w-full bg-[radial-gradient(circle_at_top,_rgba(15,23,42,0.95),_rgba(1,1,1,1)_68%)]"
        frameloop="always"
        gl={{ antialias: false }}
      >
        <WorldSplatScene
          assemblyPhase={overlayPhase}
          firstPerson={firstPerson}
          hotspots={hotspots}
          interactionMode={interactionMode}
          onHotspotSelect={onHotspotSelect}
          onLoadStateChange={setLoadState}
          onPick={onPick}
          semanticsMetadata={semanticsMetadata}
          splatUrl={splatUrl}
        />
      </Canvas>
      {overlayPhase !== "hidden" ? (
        <WorldSplatLoadingOverlay phase={overlayPhase} previewImageUrl={previewImageUrl} />
      ) : null}
    </div>
  );
}

export function World3DViewer({
  mode,
  worldUrl,
  imageUrl,
  meshUrl,
  splatUrl,
  previewImageUrl,
  emptyStateTitle = "准备生成 3D 世界",
  meshSettings,
  meshLayerVisibility,
  onMeshLayersChange,
  onMeshStatsChange,
  firstPerson = false,
  hotspots = [],
  interactionMode = "navigate",
  onPick,
  onHotspotSelect,
  semanticsMetadata,
  className,
}: World3DViewerProps) {
  const resolvedImageUrl = String(imageUrl || previewImageUrl || "").trim() || null;

  if (mode === "mesh") {
    return (
      <div className={cn("h-full w-full", className)}>
        <Model3DViewer
          emptyStateTitle={emptyStateTitle}
          layerVisibility={meshLayerVisibility}
          modelUrl={meshUrl}
          onLayersChange={onMeshLayersChange}
          onStatsChange={onMeshStatsChange}
          previewImageUrl={previewImageUrl}
          settings={meshSettings || DEFAULT_MESH_SETTINGS}
        />
      </div>
    );
  }

  if (mode === "world") {
    return (
      <div className={cn("h-full w-full overflow-hidden bg-zinc-950", className)}>
        {worldUrl ? (
          <iframe
            allow="accelerometer; autoplay; clipboard-read; clipboard-write; fullscreen; gyroscope; xr-spatial-tracking"
            allowFullScreen
            className="h-full w-full border-0"
            referrerPolicy="no-referrer-when-downgrade"
            src={worldUrl}
            title="World Labs 世界预览"
          />
        ) : (
          <WorldEmptyState
            description="当前结果还没有可嵌入的 World 页面链接，可以先切换到 Splat、图像或 Mesh 视图。"
            icon={Globe}
            previewImageUrl={previewImageUrl}
            title={emptyStateTitle}
          />
        )}
      </div>
    );
  }

  if (mode === "image") {
    return (
      <div
        className={cn(
          "flex h-full w-full items-center justify-center overflow-hidden bg-[radial-gradient(circle_at_top,_rgba(39,39,42,0.95),_rgba(2,6,23,1)_68%)] p-6",
          className
        )}
      >
        {resolvedImageUrl ? (
          <img
            alt="世界图像预览"
            className="max-h-full w-full rounded-2xl object-contain shadow-[0_30px_80px_rgba(0,0,0,0.45)]"
            src={resolvedImageUrl}
          />
        ) : (
          <WorldEmptyState
            description="当前结果还没有可用的图像资产，可以先切换到 Splat 或 Mesh 视图。"
            icon={ImageIcon}
            previewImageUrl={previewImageUrl}
            title={emptyStateTitle}
          />
        )}
      </div>
    );
  }

  return (
    <div className={cn("h-full w-full", className)}>
      <WorldSplatViewer
        firstPerson={firstPerson}
        hotspots={hotspots}
        interactionMode={interactionMode}
        onHotspotSelect={onHotspotSelect}
        onPick={onPick}
        previewImageUrl={previewImageUrl}
        semanticsMetadata={semanticsMetadata}
        splatUrl={splatUrl}
      />
    </div>
  );
}