"use client";

/* eslint-disable @next/next/no-img-element */
import { OrbitControls, useGLTF } from "@react-three/drei";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { AlertCircle } from "lucide-react";
import React, { Suspense, useEffect, useMemo, useRef } from "react";
import * as THREE from "three";
import type { Mesh, Object3D } from "three";
import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
import { LocalStudioEnvironment } from "@/components/canvas/model3d/LocalStudioEnvironment";
import { ModelLoadingFallback } from "@/components/canvas/model3d/ModelLoadingFallback";
import type {
  OpenClawModelInteractionManifest,
  OpenClawModelInteractionPart,
} from "@/lib/openclaw-chat/model-interaction";
import {
  getOpenClawExplodedOffsetMm,
  getOpenClawPartForSceneNode,
  getOpenClawSourceNodeOffset,
  mapOpenClawCadOffsetToGlb,
} from "@/lib/openclaw-chat/model-interaction";

export type OpenClawModelTransformRequest = {
  actionId: string | null;
  amount: number;
  animate: boolean;
  durationMs: number;
  nonce: number;
};

export type OpenClawModelCameraState = {
  position: [number, number, number];
  target: [number, number, number];
};

type InteractiveEntry = {
  node: Object3D;
  part: OpenClawModelInteractionPart;
  initialPosition: THREE.Vector3;
};

type AnimationState = {
  startedAt: number;
  durationMs: number;
  starts: Map<string, THREE.Vector3>;
  targets: Map<string, THREE.Vector3>;
  easing: string;
};

type DragState = {
  entry: InteractiveEntry;
  plane: THREE.Plane;
  startIntersection: THREE.Vector3;
  startWorldPosition: THREE.Vector3;
  startLocalPosition: THREE.Vector3;
  pointerId: number;
};

class InteractiveViewerErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode; resetKey: string },
  { hasError: boolean }
> {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidUpdate(previousProps: { resetKey: string }) {
    if (
      this.state.hasError &&
      previousProps.resetKey !== this.props.resetKey
    ) {
      this.setState({ hasError: false });
    }
  }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

function isMesh(node: Object3D): node is Mesh {
  return (node as Mesh).isMesh === true;
}

function cloneScene(scene: Object3D) {
  const clone = scene.clone(true);
  clone.traverse((node) => {
    if (!isMesh(node)) return;
    node.castShadow = true;
    node.receiveShadow = true;
    const materials = Array.isArray(node.material)
      ? node.material
      : [node.material];
    const clones = materials.map((material) => material.clone());
    node.material = Array.isArray(node.material)
      ? clones
      : clones[0] || node.material;
  });
  return clone;
}

function getFitTransform(scene: Object3D) {
  const bounds = new THREE.Box3().setFromObject(scene);
  if (bounds.isEmpty()) {
    return {
      position: [0, 0, 0] as [number, number, number],
      scale: 1,
    };
  }
  const size = bounds.getSize(new THREE.Vector3());
  const center = bounds.getCenter(new THREE.Vector3());
  const largestDimension = Math.max(size.x, size.y, size.z);
  if (!Number.isFinite(largestDimension) || largestDimension <= 0) {
    return {
      position: [0, 0, 0] as [number, number, number],
      scale: 1,
    };
  }
  const scale = 2 / largestDimension;
  return {
    position: [
      -center.x * scale,
      -center.y * scale,
      -center.z * scale,
    ] as [number, number, number],
    scale,
  };
}

function getEasedProgress(progress: number, easing: string) {
  if (easing.toLowerCase() === "linear") return progress;
  return progress < 0.5
    ? 4 * progress * progress * progress
    : 1 - Math.pow(-2 * progress + 2, 3) / 2;
}

function getPartTargetPosition(
  entry: InteractiveEntry,
  manifest: OpenClawModelInteractionManifest,
  amount: number
) {
  const offsetMm = getOpenClawExplodedOffsetMm(entry.part);
  if (!offsetMm) return entry.initialPosition.clone();
  const offset = mapOpenClawCadOffsetToGlb(offsetMm, manifest.scaleMmToGlb);
  return entry.initialPosition
    .clone()
    .add(new THREE.Vector3(offset.x, offset.y, offset.z).multiplyScalar(amount));
}

function ModelInteractionScene({
  allowDragging,
  fitExplodedSource,
  initialCameraState,
  interactionParts,
  manifest,
  modelUrl,
  onMatchChange,
  onCameraStateChange,
  onSelectedPartChange,
  resetAllToken,
  resetSelectedToken,
  selectedNodeName,
  sourceVariant,
  transformRequest,
}: {
  allowDragging: boolean;
  fitExplodedSource: boolean;
  initialCameraState?: OpenClawModelCameraState | null;
  interactionParts: OpenClawModelInteractionPart[];
  manifest: OpenClawModelInteractionManifest;
  modelUrl: string;
  onMatchChange: (matched: number, total: number) => void;
  onCameraStateChange?: (state: OpenClawModelCameraState) => void;
  onSelectedPartChange: (part: OpenClawModelInteractionPart | null) => void;
  resetAllToken: number;
  resetSelectedToken: number;
  selectedNodeName: string | null;
  sourceVariant: "assembled" | "exploded";
  transformRequest: OpenClawModelTransformRequest;
}) {
  const { camera, gl, scene: rootScene } = useThree();
  const controlsRef = useRef<OrbitControlsImpl | null>(null);
  const gltf = useGLTF(modelUrl, true);
  const scene = useMemo(() => {
    const cloned = cloneScene(gltf.scene);
    if (sourceVariant !== "exploded") return cloned;
    const partsByNodeName = new Map(
      interactionParts.map((part) => [part.nodeName, part])
    );
    cloned.traverse((node) => {
      const part = getOpenClawPartForSceneNode(node, partsByNodeName);
      if (!part) return;
      const offset = getOpenClawSourceNodeOffset(
        part,
        sourceVariant,
        manifest.scaleMmToGlb
      );
      node.position.add(new THREE.Vector3(offset.x, offset.y, offset.z));
    });
    cloned.updateMatrixWorld(true);
    return cloned;
  }, [gltf.scene, interactionParts, manifest.scaleMmToGlb, sourceVariant]);
  const fitTransform = useMemo(
    () => getFitTransform(fitExplodedSource ? gltf.scene : scene),
    [fitExplodedSource, gltf.scene, scene]
  );
  const entriesRef = useRef<Map<string, InteractiveEntry>>(new Map());
  const objectEntriesRef = useRef<Map<Object3D, InteractiveEntry>>(new Map());
  const animationRef = useRef<AnimationState | null>(null);
  const dragRef = useRef<DragState | null>(null);
  const currentAmountRef = useRef(0);
  const selectionHelperRef = useRef<THREE.BoxHelper | null>(null);

  useEffect(() => {
    const partsByNodeName = new Map(
      interactionParts.map((part) => [part.nodeName, part])
    );
    const entries = new Map<string, InteractiveEntry>();
    const objectEntries = new Map<Object3D, InteractiveEntry>();
    scene.traverse((node) => {
      const part = getOpenClawPartForSceneNode(node, partsByNodeName);
      if (!part || entries.has(part.nodeName)) return;
      const entry = {
        node,
        part,
        initialPosition: node.position.clone(),
      };
      entries.set(part.nodeName, entry);
      objectEntries.set(node, entry);
    });
    entriesRef.current = entries;
    objectEntriesRef.current = objectEntries;
    onMatchChange(entries.size, interactionParts.length);

    return () => {
      entriesRef.current.clear();
      objectEntriesRef.current.clear();
      onMatchChange(0, interactionParts.length);
    };
  }, [interactionParts, onMatchChange, scene]);

  useEffect(() => {
    if (!initialCameraState || !controlsRef.current) return;
    camera.position.set(...initialCameraState.position);
    controlsRef.current.target.set(...initialCameraState.target);
    camera.updateProjectionMatrix();
    controlsRef.current.update();
  }, [camera, initialCameraState]);

  useEffect(() => {
    const previous = selectionHelperRef.current;
    if (previous) {
      rootScene.remove(previous);
      previous.geometry.dispose();
      (previous.material as THREE.Material).dispose();
      selectionHelperRef.current = null;
    }
    if (!selectedNodeName) return;
    const entry = entriesRef.current.get(selectedNodeName);
    if (!entry) return;
    const helper = new THREE.BoxHelper(entry.node, 0x3ecf8e);
    helper.raycast = () => undefined;
    rootScene.add(helper);
    selectionHelperRef.current = helper;
    return () => {
      rootScene.remove(helper);
      helper.geometry.dispose();
      (helper.material as THREE.Material).dispose();
      if (selectionHelperRef.current === helper) {
        selectionHelperRef.current = null;
      }
    };
  }, [rootScene, selectedNodeName]);

  useEffect(() => {
    const amount = THREE.MathUtils.clamp(transformRequest.amount, 0, 1);
    currentAmountRef.current = amount;
    const starts = new Map<string, THREE.Vector3>();
    const targets = new Map<string, THREE.Vector3>();
    for (const [nodeName, entry] of entriesRef.current) {
      starts.set(nodeName, entry.node.position.clone());
      targets.set(nodeName, getPartTargetPosition(entry, manifest, amount));
    }
    if (!transformRequest.animate) {
      animationRef.current = null;
      for (const [nodeName, target] of targets) {
        entriesRef.current.get(nodeName)?.node.position.copy(target);
      }
      return;
    }
    const targetState = amount >= 0.5 ? "exploded" : "assembled";
    const action =
      manifest.actions.find((item) => item.id === transformRequest.actionId) ||
      manifest.actions.find((item) => item.toState === targetState);
    animationRef.current = {
      startedAt: performance.now(),
      durationMs: action?.durationMs ?? transformRequest.durationMs,
      starts,
      targets,
      easing: action?.easing || "easeInOutCubic",
    };
  }, [manifest, transformRequest]);

  useEffect(() => {
    if (resetAllToken <= 0) return;
    animationRef.current = null;
    for (const entry of entriesRef.current.values()) {
      entry.node.position.copy(
        getPartTargetPosition(entry, manifest, currentAmountRef.current)
      );
    }
  }, [manifest, resetAllToken]);

  useEffect(() => {
    if (resetSelectedToken <= 0 || !selectedNodeName) return;
    const entry = entriesRef.current.get(selectedNodeName);
    if (!entry) return;
    entry.node.position.copy(
      getPartTargetPosition(entry, manifest, currentAmountRef.current)
    );
  }, [manifest, resetSelectedToken, selectedNodeName]);

  useEffect(() => {
    const element = gl.domElement;
    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    const planeIntersection = new THREE.Vector3();
    const worldPosition = new THREE.Vector3();

    const updateRay = (event: PointerEvent) => {
      const bounds = element.getBoundingClientRect();
      if (bounds.width <= 0 || bounds.height <= 0) return false;
      pointer.set(
        ((event.clientX - bounds.left) / bounds.width) * 2 - 1,
        -((event.clientY - bounds.top) / bounds.height) * 2 + 1
      );
      raycaster.setFromCamera(pointer, camera);
      return true;
    };
    const findEntry = (object: Object3D) => {
      let current: Object3D | null = object;
      while (current) {
        const entry = objectEntriesRef.current.get(current);
        if (entry) return entry;
        current = current.parent;
      }
      return null;
    };
    const handlePointerDown = (event: PointerEvent) => {
      if (event.button !== 0 || animationRef.current || !updateRay(event)) return;
      const intersections = raycaster.intersectObjects(
        [...entriesRef.current.values()].map((entry) => entry.node),
        true
      );
      const entry = intersections
        .map((intersection) => findEntry(intersection.object))
        .find((candidate): candidate is InteractiveEntry => Boolean(candidate));
      if (!entry) {
        onSelectedPartChange(null);
        return;
      }
      onSelectedPartChange(entry.part);
      if (!allowDragging || !entry.part.draggable) return;

      const normal = camera.getWorldDirection(new THREE.Vector3()).normalize();
      const startWorldPosition = entry.node.getWorldPosition(new THREE.Vector3());
      const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(
        normal,
        startWorldPosition
      );
      if (!raycaster.ray.intersectPlane(plane, planeIntersection)) return;
      dragRef.current = {
        entry,
        plane,
        startIntersection: planeIntersection.clone(),
        startWorldPosition,
        startLocalPosition: entry.node.position.clone(),
        pointerId: event.pointerId,
      };
      if (controlsRef.current) controlsRef.current.enabled = false;
      element.setPointerCapture?.(event.pointerId);
      event.preventDefault();
      event.stopImmediatePropagation();
    };
    const handlePointerMove = (event: PointerEvent) => {
      const drag = dragRef.current;
      if (!drag || drag.pointerId !== event.pointerId || !updateRay(event)) return;
      if (!raycaster.ray.intersectPlane(drag.plane, planeIntersection)) return;
      const targetWorld = worldPosition
        .copy(drag.startWorldPosition)
        .add(planeIntersection.clone().sub(drag.startIntersection));
      const targetLocal = drag.entry.node.parent
        ? drag.entry.node.parent.worldToLocal(targetWorld.clone())
        : targetWorld;
      const axes = manifest.drag.axes;
      if (!axes.includes("x")) targetLocal.x = drag.startLocalPosition.x;
      if (!axes.includes("z")) targetLocal.y = drag.startLocalPosition.y;
      if (!axes.includes("y")) targetLocal.z = drag.startLocalPosition.z;

      const maxDistance = manifest.drag.maxDistanceMm * manifest.scaleMmToGlb;
      const fromInitial = targetLocal.clone().sub(drag.entry.initialPosition);
      if (maxDistance > 0 && fromInitial.length() > maxDistance) {
        fromInitial.setLength(maxDistance);
        targetLocal.copy(drag.entry.initialPosition).add(fromInitial);
      }
      drag.entry.node.position.copy(targetLocal);
      event.preventDefault();
      event.stopImmediatePropagation();
    };
    const finishDrag = (event: PointerEvent) => {
      const drag = dragRef.current;
      if (!drag || drag.pointerId !== event.pointerId) return;
      const snapDistance =
        manifest.drag.snapDistanceMm * manifest.scaleMmToGlb;
      if (snapDistance > 0) {
        const delta = drag.entry.node.position
          .clone()
          .sub(drag.entry.initialPosition);
        delta.set(
          Math.round(delta.x / snapDistance) * snapDistance,
          Math.round(delta.y / snapDistance) * snapDistance,
          Math.round(delta.z / snapDistance) * snapDistance
        );
        drag.entry.node.position.copy(drag.entry.initialPosition).add(delta);
      }
      element.releasePointerCapture?.(event.pointerId);
      dragRef.current = null;
      if (controlsRef.current) controlsRef.current.enabled = true;
      event.preventDefault();
      event.stopImmediatePropagation();
    };

    element.addEventListener("pointerdown", handlePointerDown, true);
    window.addEventListener("pointermove", handlePointerMove, true);
    window.addEventListener("pointerup", finishDrag, true);
    window.addEventListener("pointercancel", finishDrag, true);
    return () => {
      element.removeEventListener("pointerdown", handlePointerDown, true);
      window.removeEventListener("pointermove", handlePointerMove, true);
      window.removeEventListener("pointerup", finishDrag, true);
      window.removeEventListener("pointercancel", finishDrag, true);
      dragRef.current = null;
    };
  }, [allowDragging, camera, gl, manifest, onSelectedPartChange]);

  useEffect(() => {
    return () => {
      scene.traverse((node) => {
        if (!isMesh(node)) return;
        const materials = Array.isArray(node.material)
          ? node.material
          : [node.material];
        for (const material of materials) material.dispose();
      });
    };
  }, [scene]);

  useFrame(() => {
    selectionHelperRef.current?.update();
    const animation = animationRef.current;
    if (!animation) return;
    const rawProgress =
      animation.durationMs <= 0
        ? 1
        : Math.min(1, (performance.now() - animation.startedAt) / animation.durationMs);
    const progress = getEasedProgress(rawProgress, animation.easing);
    for (const [nodeName, target] of animation.targets) {
      const entry = entriesRef.current.get(nodeName);
      const start = animation.starts.get(nodeName);
      if (entry && start) entry.node.position.lerpVectors(start, target, progress);
    }
    if (rawProgress >= 1) animationRef.current = null;
  });

  return (
    <>
      <ambientLight intensity={0.75} />
      <directionalLight castShadow intensity={1.6} position={[4, 7, 5]} />
      <directionalLight intensity={0.45} position={[-4, 2, -3]} />
      <primitive
        object={scene}
        position={fitTransform.position}
        scale={fitTransform.scale}
      />
      <OrbitControls
        dampingFactor={0.08}
        enableDamping
        enablePan
        enableRotate
        enableZoom
        makeDefault
        maxPolarAngle={Math.PI / 1.65}
        minDistance={1.2}
        minPolarAngle={0}
        onChange={() => {
          const controls = controlsRef.current;
          if (!controls || !onCameraStateChange) return;
          onCameraStateChange({
            position: camera.position.toArray() as [number, number, number],
            target: controls.target.toArray() as [number, number, number],
          });
        }}
        ref={controlsRef}
      />
    </>
  );
}

export function OpenClawInteractiveModelViewer({
  allowDragging,
  background,
  fitExplodedSource = false,
  initialCameraState,
  interactionParts,
  manifest,
  modelUrl,
  onMatchChange,
  onCameraStateChange,
  onSelectedPartChange,
  previewImageUrl,
  resetAllToken,
  resetSelectedToken,
  resetViewToken,
  selectedNodeName,
  sourceVariant,
  transformRequest,
}: {
  allowDragging: boolean;
  background: string;
  fitExplodedSource?: boolean;
  initialCameraState?: OpenClawModelCameraState | null;
  interactionParts?: OpenClawModelInteractionPart[];
  manifest: OpenClawModelInteractionManifest;
  modelUrl: string;
  onMatchChange: (matched: number, total: number) => void;
  onCameraStateChange?: (state: OpenClawModelCameraState) => void;
  onSelectedPartChange: (part: OpenClawModelInteractionPart | null) => void;
  previewImageUrl?: string | null;
  resetAllToken: number;
  resetSelectedToken: number;
  resetViewToken: number;
  selectedNodeName: string | null;
  sourceVariant: "assembled" | "exploded";
  transformRequest: OpenClawModelTransformRequest;
}) {
  return (
    <InteractiveViewerErrorBoundary
      resetKey={`${modelUrl}:${resetViewToken}`}
      fallback={
        <div className="relative flex h-full w-full items-center justify-center overflow-hidden bg-zinc-950 text-zinc-200">
          {previewImageUrl ? (
            <img
              alt="3D 模型静态预览"
              className="absolute inset-0 h-full w-full object-contain opacity-80"
              src={previewImageUrl}
            />
          ) : null}
          <div className="relative flex max-w-xs flex-col items-center gap-2 rounded-md bg-black/70 px-4 py-3 text-center backdrop-blur-sm">
            <AlertCircle className="h-6 w-6 text-amber-300" />
            <p className="text-xs">{previewImageUrl ? "3D 交互预览加载失败，可查看静态预览或下载模型" : "3D 交互预览加载失败，请退出预览后重试或下载模型"}</p>
          </div>
        </div>
      }
    >
      <Canvas
        camera={{ fov: 42, position: [2.4, 1.8, 2.4] }}
        dpr={[1, 1.75]}
        gl={{ antialias: true, powerPreference: "high-performance" }}
        key={`${modelUrl}:${resetViewToken}`}
        shadows
        style={{ background }}
      >
        <LocalStudioEnvironment />
        <Suspense fallback={<ModelLoadingFallback />}>
          <ModelInteractionScene
            allowDragging={allowDragging}
            fitExplodedSource={fitExplodedSource}
            initialCameraState={initialCameraState}
            interactionParts={interactionParts || manifest.parts}
            manifest={manifest}
            modelUrl={modelUrl}
            onMatchChange={onMatchChange}
            onCameraStateChange={onCameraStateChange}
            onSelectedPartChange={onSelectedPartChange}
            resetAllToken={resetAllToken}
            resetSelectedToken={resetSelectedToken}
            selectedNodeName={selectedNodeName}
            sourceVariant={sourceVariant}
            transformRequest={transformRequest}
          />
        </Suspense>
      </Canvas>
    </InteractiveViewerErrorBoundary>
  );
}