"use client";

/* eslint-disable @next/next/no-img-element */
import {
  ContactShadows,
  Environment,
  Grid,
  OrbitControls,
  useGLTF,
} from "@react-three/drei";
import { Canvas, 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;
  layerVisibility?: Record<string, boolean>;
  onLayersChange?: (layers: Model3DLayer[]) => void;
  onStatsChange?: (stats: Model3DStats) => void;
  resetViewToken?: number;
  onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
};

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 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,
  layerVisibility,
  onLayersChange,
  onStatsChange,
}: {
  url: string;
  settings: Model3DViewerSettings;
  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 <primitive object={scene} scale={1} />;
}

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 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,
  layerVisibility,
  onLayersChange,
  onStatsChange,
  resetViewToken,
  onCaptureReady,
}: Model3DViewerProps) {
  const controlsRef = useRef<any>(null);
  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>
      }
    >
      <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}
        />
        <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}
              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>
    </ViewerErrorBoundary>
  );
}