"use client";

/* eslint-disable @next/next/no-img-element */
import {
  ContactShadows,
  Environment,
  Grid,
  OrbitControls,
  useGLTF,
} from "@react-three/drei";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { AlertCircle, Box, ExternalLink, Loader2 } from "lucide-react";
import React, { Suspense, useEffect, useMemo, useRef } from "react";
import * as THREE from "three";
import type { Mesh, Object3D } from "three";
import { KTX2Loader } from "three-stdlib";
import { Button } from "@/components/ui/button";
import { buildThreeAssetUrl } from "@/lib/canvas/three-asset-url";

export type Model3DLayer = {
  id: string;
  name: string;
  triangles: number;
  vertices: number;
};

export type Model3DStats = {
  triangles: number;
  vertices: number;
  meshCount: number;
};

export type Model3DCameraPreset = "front" | "iso" | "right" | "top";

export type Model3DViewerSettings = {
  cameraPreset: Model3DCameraPreset;
  envPreset:
    | "city"
    | "sunset"
    | "studio"
    | "dawn"
    | "night"
    | "warehouse"
    | "forest"
    | "apartment"
    | "park"
    | "lobby";
  lightIntensity: number;
  autoRotate: boolean;
  showGrid: boolean;
  wireframe: boolean;
};

type Model3DViewerProps = {
  modelUrl?: string | null;
  previewImageUrl?: string | null;
  emptyStateTitle?: string;
  settings: Model3DViewerSettings;
  modelRotation?: [number, number, number];
  showMovementControls?: boolean;
  layerVisibility?: Record<string, boolean>;
  onLayersChange?: (layers: Model3DLayer[]) => void;
  onStatsChange?: (stats: Model3DStats) => void;
  resetViewToken?: number;
  onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
};

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

type MovementState = Record<MovementCommand, boolean>;

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",
  PageUp: "up",
  KeyE: "down",
  PageDown: "down",
};

const CAMERA_PRESET_POSITIONS: Record<
  Model3DCameraPreset,
  [number, number, number]
> = {
  front: [0, 1.1, 3.2],
  iso: [2, 1.5, 2],
  right: [3.2, 1.1, 0],
  top: [0, 3.4, 0.001],
};

const KTX2_TRANSCODER_PATH = "/three/basis/";

function CameraPresetController({
  controlsRef,
  preset,
  resetToken,
}: {
  controlsRef: React.MutableRefObject<any>;
  preset: Model3DCameraPreset;
  resetToken?: number;
}) {
  const { camera } = useThree();

  useEffect(() => {
    const [x, y, z] =
      CAMERA_PRESET_POSITIONS[preset] || CAMERA_PRESET_POSITIONS.iso;

    camera.position.set(x, y, z);
    if (preset === "top") {
      camera.up.set(0, 0, -1);
    } else {
      camera.up.set(0, 1, 0);
    }
    camera.lookAt(0, 0, 0);

    const controls = controlsRef.current;
    if (controls) {
      controls.target.set(0, 0, 0);
      controls.update();
    }
  }, [camera, controlsRef, preset, resetToken]);

  return null;
}

// eslint-disable-next-line
class ViewerErrorBoundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: React.ReactNode; fallback: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidUpdate(prevProps: { children: React.ReactNode }) {
    if (prevProps.children !== this.props.children && this.state.hasError) {
      this.setState({ hasError: false });
    }
  }

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

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

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

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 collectSceneMeta(scene: Object3D): {
  layers: Model3DLayer[];
  stats: Model3DStats;
  meshRefs: Array<{ layerId: string; mesh: Mesh }>;
} {
  const layers: Model3DLayer[] = [];
  const meshRefs: Array<{ layerId: string; mesh: Mesh }> = [];
  let triangles = 0;
  let vertices = 0;
  let meshCount = 0;
  let meshIndex = 0;

  scene.traverse((node) => {
    if (!isMesh(node)) return;
    const geometry = node.geometry;
    if (!geometry) return;

    const id = `${node.name || "Mesh"}__${meshIndex}`;
    meshIndex += 1;
    const indexCount = geometry.index?.count || 0;
    const positionCount = geometry.attributes.position?.count || 0;
    const meshTriangles =
      indexCount > 0
        ? Math.floor(indexCount / 3)
        : Math.floor(positionCount / 3);
    const meshVertices = positionCount;

    triangles += meshTriangles;
    vertices += meshVertices;
    meshCount += 1;

    layers.push({
      id,
      name: node.name?.trim() || `mesh_${meshCount}`,
      triangles: meshTriangles,
      vertices: meshVertices,
    });
    meshRefs.push({ layerId: id, mesh: node });
  });

  return {
    layers,
    stats: {
      triangles,
      vertices,
      meshCount,
    },
    meshRefs,
  };
}

function ModelScene({
  url,
  settings,
  modelRotation,
  layerVisibility,
  onLayersChange,
  onStatsChange,
}: {
  url: string;
  settings: Model3DViewerSettings;
  modelRotation?: [number, number, number];
  layerVisibility?: Record<string, boolean>;
  onLayersChange?: (layers: Model3DLayer[]) => void;
  onStatsChange?: (stats: Model3DStats) => void;
}) {
  const { gl } = useThree();
  const ktx2Loader = useMemo(() => {
    const nextLoader = new KTX2Loader();
    nextLoader.setTranscoderPath(KTX2_TRANSCODER_PATH);
    nextLoader.detectSupport(gl);
    return nextLoader;
  }, [gl]);

  useEffect(() => {
    return () => {
      ktx2Loader.dispose();
    };
  }, [ktx2Loader]);

  const model = useGLTF(
    url,
    true,
    true,
    (loader) => {
      loader.setKTX2Loader(ktx2Loader);
    },
  );
  const scene = useMemo(() => model.scene.clone(), [model.scene]);
  const meta = useMemo(() => collectSceneMeta(scene), [scene]);

  useEffect(() => {
    onLayersChange?.(meta.layers);
    onStatsChange?.(meta.stats);
  }, [meta.layers, meta.stats, onLayersChange, onStatsChange]);

  useEffect(() => {
    for (const { layerId, mesh } of meta.meshRefs) {
      const nextVisible = layerVisibility?.[layerId];
      mesh.visible = nextVisible !== false;
    }
  }, [layerVisibility, meta.meshRefs]);

  useEffect(() => {
    for (const { mesh } of meta.meshRefs) {
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      const materials = Array.isArray(mesh.material)
        ? mesh.material
        : [mesh.material];
      for (const material of materials) {
        if (!material) continue;
        const textureLikeKeys = ["map", "emissiveMap"] as const;
        for (const key of textureLikeKeys) {
          const texture = (material as any)?.[key];
          if (texture && "colorSpace" in texture) {
            texture.colorSpace = THREE.SRGBColorSpace;
            texture.needsUpdate = true;
          }
        }
        if ("wireframe" in material) {
          (material as any).wireframe = settings.wireframe;
        }
        material.needsUpdate = true;
      }
    }
  }, [meta.meshRefs, settings.wireframe]);

  return (
    <group rotation={modelRotation || [0, 0, 0]}>
      <primitive object={scene} scale={1} />
    </group>
  );
}

function ViewerCaptureBridge({
  onCaptureReady,
}: {
  onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
}) {
  const { camera, gl, scene } = useThree();

  useEffect(() => {
    if (!onCaptureReady) return;

    onCaptureReady(async () => {
      const canvas = gl.domElement;
      gl.render(scene, camera);

      const blob = await new Promise<Blob | null>((resolve) => {
        if (typeof canvas.toBlob === "function") {
          canvas.toBlob(resolve, "image/png");
          return;
        }

        try {
          const dataUrl = canvas.toDataURL("image/png");
          fetch(dataUrl)
            .then((response) => response.blob())
            .then((result) => resolve(result))
            .catch(() => resolve(null));
        } catch {
          resolve(null);
        }
      });

      return blob;
    });

    return () => onCaptureReady(null);
  }, [camera, gl, onCaptureReady, scene]);

  return null;
}

function ModelMovementControls({
  enabled,
  movementStateRef,
  orbitControlsRef,
}: {
  enabled: boolean;
  movementStateRef: React.MutableRefObject<MovementState>;
  orbitControlsRef: React.MutableRefObject<any>;
}) {
  const { camera } = useThree();
  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) {
      movementStateRef.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)) {
        movementStateRef.current = createMovementState();
        return;
      }
      event.preventDefault();
      movementStateRef.current[movement] = true;
    };
    const handleKeyUp = (event: KeyboardEvent) => {
      const movement = KEY_TO_MOVEMENT[event.code];
      if (!movement) return;
      event.preventDefault();
      movementStateRef.current[movement] = false;
    };
    const handleBlur = () => {
      movementStateRef.current = createMovementState();
    };

    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
    window.addEventListener("blur", handleBlur);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
      window.removeEventListener("blur", handleBlur);
    };
  }, [enabled, movementStateRef]);

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

    const pressed = movementStateRef.current;
    if (!Object.values(pressed).some(Boolean)) return;

    camera.getWorldDirection(directionRef.current);
    directionRef.current.setY(0);
    if (directionRef.current.lengthSq() < 0.0001) {
      directionRef.current.set(0, 0, -1);
    }
    directionRef.current.normalize();
    rightRef.current.crossVectors(directionRef.current, camera.up).normalize();
    upRef.current.copy(camera.up).normalize();
    moveRef.current.set(0, 0, 0);

    if (pressed.forward) moveRef.current.add(directionRef.current);
    if (pressed.backward) moveRef.current.addScaledVector(directionRef.current, -1);
    if (pressed.left) moveRef.current.addScaledVector(rightRef.current, -1);
    if (pressed.right) moveRef.current.add(rightRef.current);
    if (pressed.up) moveRef.current.add(upRef.current);
    if (pressed.down) moveRef.current.addScaledVector(upRef.current, -1);
    if (moveRef.current.lengthSq() === 0) return;

    const distance = 2.6 * delta;
    moveRef.current.normalize().multiplyScalar(distance);
    camera.position.add(moveRef.current);
    if (orbitControlsRef.current?.target) {
      orbitControlsRef.current.target.add(moveRef.current);
      orbitControlsRef.current.update?.();
    }
  });

  return null;
}

function ModelMovementPad({
  movementStateRef,
}: {
  movementStateRef: React.MutableRefObject<MovementState>;
}) {
  const setPressed = React.useCallback(
    (command: MovementCommand, pressed: boolean) => {
      movementStateRef.current[command] = pressed;
    },
    [movementStateRef]
  );
  const clearMovement = React.useCallback(() => {
    movementStateRef.current = createMovementState();
  }, [movementStateRef]);
  const buttonClass =
    "flex h-8 w-8 select-none items-center justify-center rounded-[8px] border border-white/15 bg-black/60 text-[12px] font-bold text-white shadow-[0_8px_22px_rgba(0,0,0,0.28)] backdrop-blur-md transition hover:bg-black/75 active:scale-95";
  const buttonProps = (command: MovementCommand) => ({
    "aria-label": command,
    className: buttonClass,
    onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {
      event.preventDefault();
      event.stopPropagation();
      event.currentTarget.setPointerCapture?.(event.pointerId);
      setPressed(command, true);
    },
    onPointerUp: (event: React.PointerEvent<HTMLButtonElement>) => {
      event.preventDefault();
      event.stopPropagation();
      setPressed(command, false);
    },
    onPointerCancel: (event: React.PointerEvent<HTMLButtonElement>) => {
      event.preventDefault();
      event.stopPropagation();
      clearMovement();
    },
    onPointerLeave: (event: React.PointerEvent<HTMLButtonElement>) => {
      event.stopPropagation();
      setPressed(command, false);
    },
    type: "button" as const,
  });

  return (
    <div
      className="nodrag nopan nowheel pointer-events-auto absolute bottom-3 left-3 z-20 flex items-end gap-2"
      data-canvas-no-drag="true"
      onContextMenu={(event) => event.preventDefault()}
      onPointerDown={(event) => event.stopPropagation()}
      onPointerUp={(event) => event.stopPropagation()}
      onWheel={(event) => event.stopPropagation()}
    >
      <div className="grid grid-cols-3 gap-1 rounded-[12px] border border-white/10 bg-black/26 p-1.5 backdrop-blur-md">
        <span />
        <button {...buttonProps("forward")}>W</button>
        <span />
        <button {...buttonProps("left")}>A</button>
        <button {...buttonProps("backward")}>S</button>
        <button {...buttonProps("right")}>D</button>
      </div>
      <div className="grid gap-1 rounded-[12px] border border-white/10 bg-black/26 p-1.5 backdrop-blur-md">
        <button {...buttonProps("up")}>Q</button>
        <button {...buttonProps("down")}>E</button>
      </div>
    </div>
  );
}

function isGlbOrGltf(url?: string | null) {
  const value = String(url || "").toLowerCase();
  return /\.(gltf|glb)(\?|#|$)/.test(value);
}

function EmptyState({
  previewImageUrl,
  title,
}: {
  previewImageUrl?: string | null;
  title: string;
}) {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-zinc-950/50 p-4">
      {previewImageUrl ? (
        <div className="relative aspect-square w-64 overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 shadow-2xl">
          <img
            alt="3D 预览"
            className="h-full w-full object-cover opacity-50 transition-opacity hover:opacity-100"
            src={previewImageUrl}
          />
          <div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[1px]">
            <Loader2 className="h-8 w-8 animate-spin text-white/50" />
          </div>
        </div>
      ) : (
        <div className="flex flex-col items-center gap-4 text-zinc-500">
          <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-zinc-900/50 shadow-inner">
            <Box className="h-10 w-10 opacity-20" />
          </div>
          <p className="font-medium text-sm">{title}</p>
        </div>
      )}
    </div>
  );
}

export function Model3DViewer({
  modelUrl,
  previewImageUrl,
  emptyStateTitle = "准备生成 3D 资产",
  settings,
  modelRotation,
  showMovementControls = false,
  layerVisibility,
  onLayersChange,
  onStatsChange,
  resetViewToken,
  onCaptureReady,
}: Model3DViewerProps) {
  const controlsRef = useRef<any>(null);
  const movementStateRef = useRef<MovementState>(createMovementState());
  const resolvedModelUrl = useMemo(() => {
    return buildThreeAssetUrl(modelUrl);
  }, [modelUrl]);

  if (!modelUrl) {
    return (
      <EmptyState previewImageUrl={previewImageUrl} title={emptyStateTitle} />
    );
  }

  if (!isGlbOrGltf(modelUrl)) {
    return (
      <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
        <AlertCircle className="h-8 w-8 text-yellow-500/50" />
        <p className="text-sm">当前文件格式不支持内嵌预览，请在新窗口打开</p>
        <Button
          asChild
          className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
          variant="outline"
        >
          <a href={modelUrl} rel="noreferrer" target="_blank">
            <ExternalLink className="h-4 w-4" />
            打开3D文件
          </a>
        </Button>
      </div>
    );
  }

  return (
    <ViewerErrorBoundary
      fallback={
        <div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
          <AlertCircle className="h-8 w-8 text-red-500/50" />
          <p className="text-sm">3D 预览加载失败，请尝试在新窗口打开</p>
          <Button
            asChild
            className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
            variant="outline"
          >
            <a href={modelUrl} rel="noreferrer" target="_blank">
              <ExternalLink className="h-4 w-4" />
              打开3D文件
            </a>
          </Button>
        </div>
      }
    >
      <div className="relative h-full w-full overflow-hidden">
        <Canvas
          camera={{
            position:
              CAMERA_PRESET_POSITIONS[settings.cameraPreset] ||
              CAMERA_PRESET_POSITIONS.iso,
            fov: 45,
          }}
          className="bg-gradient-to-b from-zinc-900 to-zinc-950"
          gl={{ preserveDrawingBuffer: true }}
          onCreated={({ gl }) => {
            gl.outputColorSpace = THREE.SRGBColorSpace;
            gl.toneMapping = THREE.ACESFilmicToneMapping;
            gl.toneMappingExposure = 1;
          }}
        >
          <ViewerCaptureBridge onCaptureReady={onCaptureReady} />
          <CameraPresetController
            controlsRef={controlsRef}
            preset={settings.cameraPreset}
            resetToken={resetViewToken}
          />
          <ModelMovementControls
            enabled={showMovementControls}
            movementStateRef={movementStateRef}
            orbitControlsRef={controlsRef}
          />
          <ambientLight intensity={0.5 * settings.lightIntensity} />
          <directionalLight
            intensity={1.2 * settings.lightIntensity}
            position={[5, 8, 5]}
            shadow-bias={-0.0001}
          />

          {settings.showGrid ? (
            <Grid
              args={[20, 20]}
              cellColor="#3f3f46"
              cellSize={0.5}
              fadeDistance={30}
              fadeStrength={1}
              position={[0, -0.01, 0]}
              sectionColor="#52525b"
              sectionSize={2}
            />
          ) : null}

          <Suspense
            fallback={
              <mesh>
                <boxGeometry args={[0.5, 0.5, 0.5]} />
                <meshStandardMaterial color="#27272a" wireframe />
              </mesh>
            }
          >
            <group position={[0, 0, 0]}>
              <ModelScene
                layerVisibility={layerVisibility}
                modelRotation={modelRotation}
                onLayersChange={onLayersChange}
                onStatsChange={onStatsChange}
                settings={settings}
                url={resolvedModelUrl}
              />
              <ContactShadows
                blur={2}
                color="#000000"
                far={4}
                opacity={0.4}
                resolution={256}
                scale={10}
              />
            </group>
            <Environment preset={settings.envPreset} />
          </Suspense>
          <OrbitControls
            autoRotate={settings.autoRotate}
            dampingFactor={0.08}
            enableDamping
            enablePan={false}
            enableRotate
            enableZoom
            makeDefault
            maxPolarAngle={Math.PI / 1.75}
            mouseButtons={{
              LEFT: THREE.MOUSE.ROTATE,
              MIDDLE: THREE.MOUSE.DOLLY,
              RIGHT: THREE.MOUSE.ROTATE,
            }}
            minPolarAngle={0}
            ref={controlsRef}
          />
        </Canvas>
        {showMovementControls ? <ModelMovementPad movementStateRef={movementStateRef} /> : null}
      </div>
    </ViewerErrorBoundary>
  );
}