import { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

type PreviewState =
  | { kind: 'idle' }
  | { kind: 'loading'; ratio: number | null }
  | { kind: 'ready'; metaVersion: string }
  | { kind: 'error'; message: string };

/** 从 GLTFLoader 的 userData 中安全取出 VRM 实例（three 的 userData 是 any）。 */
function extractVrm(userData: Record<string, unknown>): VRM | null {
  const candidate = userData['vrm'];
  return candidate instanceof VRM ? candidate : null;
}

/** 兜底释放：VRMUtils.deepDispose 之外的几何/材质/贴图。 */
function disposeObject(root: THREE.Object3D): void {
  root.traverse((object) => {
    const mesh = object as THREE.Mesh;
    if (mesh.geometry) mesh.geometry.dispose();
    const material = mesh.material;
    if (!material) return;
    const list: THREE.Material[] = Array.isArray(material) ? material : [material];
    for (const item of list) {
      for (const value of Object.values(item)) {
        if (value instanceof THREE.Texture) value.dispose();
      }
      item.dispose();
    }
  });
}

interface VrmPreviewProps {
  fileUrl: string | null;
  name: string;
  /** 非 VRM 且无法用 GLTFLoader 解析时给出提示（如 fbx）。 */
  unsupportedReason?: string | null;
  height?: number;
}

/**
 * VRM 3D 预览：GLTFLoader + VRMLoaderPlugin。
 * - 处理 VRM 0.x / 1.0（vrm.meta.metaVersion）
 * - 处理「未选择 / 加载中 / 加载失败」状态
 * - 鼠标拖拽旋转 + 滚轮缩放（自实现，未引入 OrbitControls）
 * - requestAnimationFrame 循环中调用 vrm.update(delta)
 * - 卸载时释放 renderer / geometry / material / texture
 */
export function VrmPreview({ fileUrl, name, unsupportedReason = null, height = 420 }: VrmPreviewProps) {
  const mountRef = useRef<HTMLDivElement | null>(null);
  const [state, setState] = useState<PreviewState>({ kind: 'idle' });
  const [reloadKey, setReloadKey] = useState(0);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return;

    if (!fileUrl) {
      setState({ kind: 'idle' });
      return;
    }
    if (unsupportedReason) {
      setState({ kind: 'error', message: unsupportedReason });
      return;
    }

    setState({ kind: 'loading', ratio: null });

    const width = Math.max(1, mount.clientWidth);
    const height2 = Math.max(1, mount.clientHeight || height);

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x14181f);

    const camera = new THREE.PerspectiveCamera(30, width / height2, 0.1, 1000);

    let renderer: THREE.WebGLRenderer;
    try {
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
    } catch (cause) {
      // 无 WebGL 支持时不要让整个页面崩溃
      const detail = cause instanceof Error ? cause.message : String(cause);
      setState({ kind: 'error', message: `当前浏览器无法创建 WebGL 上下文：${detail}` });
      return;
    }

    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(width, height2, false);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    mount.appendChild(renderer.domElement);

    scene.add(new THREE.AmbientLight(0xffffff, 1.6));
    const keyLight = new THREE.DirectionalLight(0xffffff, 2.2);
    keyLight.position.set(1, 2, 1.5);
    scene.add(keyLight);
    const rimLight = new THREE.DirectionalLight(0x88bbff, 1.0);
    rimLight.position.set(-1.2, 1.2, -1.5);
    scene.add(rimLight);

    const grid = new THREE.GridHelper(4, 8, 0x2a3340, 0x1e2530);
    scene.add(grid);

    // 轨道参数（自实现的 drag rotate / wheel zoom）
    const orbit = { theta: 0, phi: Math.PI / 2.2, radius: 3, targetY: 1 };
    const updateCamera = (): void => {
      const sinPhi = Math.sin(orbit.phi);
      camera.position.set(
        orbit.radius * sinPhi * Math.sin(orbit.theta),
        orbit.targetY + orbit.radius * Math.cos(orbit.phi),
        orbit.radius * sinPhi * Math.cos(orbit.theta),
      );
      camera.lookAt(0, orbit.targetY, 0);
    };
    updateCamera();

    let dragging = false;
    let lastX = 0;
    let lastY = 0;

    const onPointerDown = (event: PointerEvent): void => {
      dragging = true;
      lastX = event.clientX;
      lastY = event.clientY;
      renderer.domElement.setPointerCapture(event.pointerId);
    };
    const onPointerMove = (event: PointerEvent): void => {
      if (!dragging) return;
      const dx = event.clientX - lastX;
      const dy = event.clientY - lastY;
      lastX = event.clientX;
      lastY = event.clientY;
      orbit.theta -= dx * 0.01;
      orbit.phi = Math.min(Math.PI - 0.15, Math.max(0.15, orbit.phi - dy * 0.01));
      updateCamera();
    };
    const onPointerUp = (event: PointerEvent): void => {
      dragging = false;
      if (renderer.domElement.hasPointerCapture(event.pointerId)) {
        renderer.domElement.releasePointerCapture(event.pointerId);
      }
    };
    const onWheel = (event: WheelEvent): void => {
      event.preventDefault();
      orbit.radius = Math.min(20, Math.max(0.4, orbit.radius * (1 + event.deltaY * 0.001)));
      updateCamera();
    };

    const canvas = renderer.domElement;
    canvas.addEventListener('pointerdown', onPointerDown);
    canvas.addEventListener('pointermove', onPointerMove);
    canvas.addEventListener('pointerup', onPointerUp);
    canvas.addEventListener('pointercancel', onPointerUp);
    canvas.addEventListener('wheel', onWheel, { passive: false });

    const resizeObserver = new ResizeObserver(() => {
      const w = Math.max(1, mount.clientWidth);
      const h = Math.max(1, mount.clientHeight || height);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h, false);
    });
    resizeObserver.observe(mount);

    const clock = new THREE.Clock();
    let rafId = 0;
    let vrm: VRM | null = null;
    let disposed = false;
    let loadedModel: THREE.Object3D | null = null;

    const tick = (): void => {
      rafId = requestAnimationFrame(tick);
      const delta = clock.getDelta();
      if (vrm) vrm.update(delta);
      renderer.render(scene, camera);
    };
    rafId = requestAnimationFrame(tick);

    const loader = new GLTFLoader();
    loader.register((parser) => new VRMLoaderPlugin(parser));

    loader.load(
      fileUrl,
      (gltf) => {
        if (disposed) {
          disposeObject(gltf.scene);
          return;
        }
        const bag: Record<string, unknown> = gltf.userData;
        const loadedVrm = extractVrm(bag);
        const root: THREE.Object3D = loadedVrm ? loadedVrm.scene : gltf.scene;
        loadedModel = root;
        vrm = loadedVrm;

        if (loadedVrm) {
          // VRM 0.x 面向 +Z，需要转 180°；1.0 不需要。
          VRMUtils.rotateVRM0(loadedVrm);
        }
        scene.add(root);

        // 按包围盒自动取景：兼容米制与厘米制模型
        const box = new THREE.Box3().setFromObject(root);
        if (!box.isEmpty()) {
          const size = box.getSize(new THREE.Vector3());
          const center = box.getCenter(new THREE.Vector3());
          const maxDim = Math.max(size.x, size.y, size.z) || 1;
          orbit.targetY = center.y;
          orbit.radius = maxDim * 1.9;
          grid.position.y = box.min.y;
          updateCamera();
        }

        const meta = loadedVrm ? loadedVrm.meta.metaVersion : null;
        setState({ kind: 'ready', metaVersion: meta === '1' ? '1.0' : meta === '0' ? '0.x' : '非 VRM（glTF）' });
      },
      (event) => {
        if (disposed) return;
        const ratio = event.total > 0 ? event.loaded / event.total : null;
        setState({ kind: 'loading', ratio });
      },
      (error: unknown) => {
        if (disposed) return;
        const message = error instanceof Error ? error.message : String(error);
        setState({ kind: 'error', message: `模型加载失败：${message}` });
      },
    );

    return () => {
      disposed = true;
      cancelAnimationFrame(rafId);
      resizeObserver.disconnect();
      canvas.removeEventListener('pointerdown', onPointerDown);
      canvas.removeEventListener('pointermove', onPointerMove);
      canvas.removeEventListener('pointerup', onPointerUp);
      canvas.removeEventListener('pointercancel', onPointerUp);
      canvas.removeEventListener('wheel', onWheel);

      if (loadedModel) {
        scene.remove(loadedModel);
        if (vrm) {
          try {
            VRMUtils.deepDispose(vrm.scene);
          } catch {
            disposeObject(loadedModel);
          }
        } else {
          disposeObject(loadedModel);
        }
      }
      scene.clear();
      renderer.dispose();
      if (canvas.parentNode === mount) mount.removeChild(canvas);
    };
  }, [fileUrl, unsupportedReason, reloadKey, height]);

  const hasModel = fileUrl !== null && fileUrl !== '';

  return (
    <div className="vrm-panel">
      <div className="vrm-panel-head">
        <div>
          <strong>3D 预览</strong>
          <span className="muted">{name || '未选择模型'}</span>
        </div>
        {hasModel ? (
          <button type="button" className="btn btn-ghost btn-sm" onClick={() => setReloadKey((v) => v + 1)}>
            重新加载
          </button>
        ) : null}
      </div>

      <div className="vrm-stage" style={{ height }}>
        <div className="vrm-canvas" ref={mountRef} />
        {state.kind === 'idle' ? (
          <div className="vrm-overlay">
            <p>尚未选择模型</p>
            <p className="muted">在左侧列表点击「预览」以加载 VRM。</p>
          </div>
        ) : null}
        {state.kind === 'loading' ? (
          <div className="vrm-overlay">
            <span className="spinner" aria-hidden="true" />
            <p>加载模型中… {state.ratio !== null ? `${Math.round(state.ratio * 100)}%` : ''}</p>
          </div>
        ) : null}
        {state.kind === 'error' ? (
          <div className="vrm-overlay vrm-overlay-error">
            <p>⚠ {state.message}</p>
            <button type="button" className="btn btn-ghost btn-sm" onClick={() => setReloadKey((v) => v + 1)}>
              重试
            </button>
          </div>
        ) : null}
      </div>

      <div className="vrm-panel-foot">
        <span className="muted">
          拖拽旋转 · 滚轮缩放
          {state.kind === 'ready' ? ` · VRM 版本：${state.metaVersion}` : ''}
        </span>
        {fileUrl ? (
          <a className="ext-link" href={fileUrl} target="_blank" rel="noreferrer noopener">
            模型文件
          </a>
        ) : null}
      </div>
    </div>
  );
}