"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 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>
  );
}

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,
  firstPerson = false,
  hotspots = [],
  interactionMode = "navigate",
  onPick,
  onHotspotSelect,
  semanticsMetadata,
  onLoadStateChange,
}: {
  splatUrl: string;
  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}
      <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");
  useEffect(() => {
    setLoadState("loading");
  }, [splatUrl]);

  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
          firstPerson={firstPerson}
          hotspots={hotspots}
          interactionMode={interactionMode}
          onHotspotSelect={onHotspotSelect}
          onLoadStateChange={setLoadState}
          onPick={onPick}
          semanticsMetadata={semanticsMetadata}
          splatUrl={splatUrl}
        />
      </Canvas>
      {loadState === "loading" ? (
        <div className="absolute inset-0">
          <WorldEmptyState
            description="正在初始化 Gaussian Splat 资源，这一步会比普通 Mesh 略慢。"
            icon={Sparkles}
            previewImageUrl={previewImageUrl}
            title="正在加载 Splat 世界"
          />
        </div>
      ) : 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>
  );
}