import React, { useEffect, useRef, useState, useCallback } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three-stdlib';
import { PieceInfo, LoadedIFCResult } from '@/lib/ifc/ifcLoaderService';
import { ViewCube } from './ViewCube';
import { Viewer3DToolbar } from './Viewer3DToolbar';
import { PieceHoverTooltip } from './PieceHoverTooltip';

interface ProductionPieceStatus {
  marca: string;
  fase: string;
  totalQtd: number;
  pointedQtd: number;
  currentProcessName?: string;
  processColor?: string;
}

interface ModelViewer3DProps {
  modelData: LoadedIFCResult | null;
  productionData?: Map<string, ProductionPieceStatus>;
  selectedPieceMark?: string | null;
  onSelectPiece?: (piece: PieceInfo | null) => void;
}

export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
  modelData,
  productionData,
  selectedPieceMark,
  onSelectPiece,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
  const sceneRef = useRef<THREE.Scene | null>(null);
  const perspCameraRef = useRef<THREE.PerspectiveCamera | null>(null);
  const orthoCameraRef = useRef<THREE.OrthographicCamera | null>(null);
  const activeCameraRef = useRef<THREE.Camera | null>(null);
  const controlsRef = useRef<OrbitControls | null>(null);
  const gridHelperRef = useRef<THREE.GridHelper | null>(null);
  const modelGroupRef = useRef<THREE.Group | null>(null);
  const raycasterRef = useRef<THREE.Raycaster>(new THREE.Raycaster());
  const mousePosRef = useRef<THREE.Vector2>(new THREE.Vector2());

  // Tool states
  const [opacity, setOpacity] = useState<number>(100);
  const [showGrid, setShowGrid] = useState<boolean>(true);
  const [isOrthographic, setIsOrthographic] = useState<boolean>(false);
  const [isWireframe, setIsWireframe] = useState<boolean>(false);
  const [navMode, setNavMode] = useState<'orbit' | 'walk'>('orbit');
  const [colorMode, setColorMode] = useState<'description' | 'production'>('description');
  const [hasSectionPlanes, setHasSectionPlanes] = useState<boolean>(false);
  const [isMeasuring, setIsMeasuring] = useState<boolean>(false);

  // Hover Tooltip States (1.5 seconds)
  const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
  const [hoveredPiece, setHoveredPiece] = useState<PieceInfo | null>(null);
  const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);

  // Highlight Material (Light Green #4ade80)
  const highlightMaterialRef = useRef<THREE.MeshStandardMaterial>(
    new THREE.MeshStandardMaterial({
      color: 0x4ade80,
      emissive: 0x22c55e,
      emissiveIntensity: 0.35,
      metalness: 0.3,
      roughness: 0.4,
      side: THREE.DoubleSide,
    })
  );

  // Initialize Scene
  useEffect(() => {
    if (!containerRef.current) return;

    const width = containerRef.current.clientWidth || 800;
    const height = containerRef.current.clientHeight || 600;

    // 1. Scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x0a0f1d);
    sceneRef.current = scene;

    // 2. Cameras
    const perspCamera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000);
    perspCamera.position.set(50, 40, 60);
    perspCameraRef.current = perspCamera;

    const frustumSize = 80;
    const aspect = width / height;
    const orthoCamera = new THREE.OrthographicCamera(
      (frustumSize * aspect) / -2,
      (frustumSize * aspect) / 2,
      frustumSize / 2,
      frustumSize / -2,
      0.1,
      2000
    );
    orthoCamera.position.copy(perspCamera.position);
    orthoCameraRef.current = orthoCamera;

    activeCameraRef.current = perspCamera;

    // 3. Renderer
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    rendererRef.current = renderer;

    containerRef.current.innerHTML = '';
    containerRef.current.appendChild(renderer.domElement);

    // 4. OrbitControls
    const controls = new OrbitControls(perspCamera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.maxDistance = 1500;
    controls.minDistance = 1;
    controlsRef.current = controls;

    // 5. Lights
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
    scene.add(ambientLight);

    const dirLight1 = new THREE.DirectionalLight(0xffffff, 1.2);
    dirLight1.position.set(100, 200, 100);
    dirLight1.castShadow = true;
    scene.add(dirLight1);

    const dirLight2 = new THREE.DirectionalLight(0x94a3b8, 0.6);
    dirLight2.position.set(-100, -50, -100);
    scene.add(dirLight2);

    const hemiLight = new THREE.HemisphereLight(0xffffff, 0x1e293b, 0.5);
    scene.add(hemiLight);

    // 6. Floor Grid
    const grid = new THREE.GridHelper(200, 100, 0x06b6d4, 0x1e293b);
    grid.position.y = 0;
    scene.add(grid);
    gridHelperRef.current = grid;

    // 7. Render Loop
    let animationFrameId: number;
    const animate = () => {
      animationFrameId = requestAnimationFrame(animate);
      controls.update();
      if (rendererRef.current && sceneRef.current && activeCameraRef.current) {
        rendererRef.current.render(sceneRef.current, activeCameraRef.current);
      }
    };
    animate();

    // 8. Resize Handler
    const handleResize = () => {
      if (!containerRef.current || !rendererRef.current) return;
      const w = containerRef.current.clientWidth;
      const h = containerRef.current.clientHeight;

      perspCamera.aspect = w / h;
      perspCamera.updateProjectionMatrix();

      const newAspect = w / h;
      orthoCamera.left = (frustumSize * newAspect) / -2;
      orthoCamera.right = (frustumSize * newAspect) / 2;
      orthoCamera.top = frustumSize / 2;
      orthoCamera.bottom = frustumSize / -2;
      orthoCamera.updateProjectionMatrix();

      rendererRef.current.setSize(w, h);
    };
    window.addEventListener('resize', handleResize);

    return () => {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', handleResize);
      renderer.dispose();
    };
  }, []);

  // Update Model in Scene
  useEffect(() => {
    if (!sceneRef.current || !modelData) return;

    // Remove old model if present
    if (modelGroupRef.current) {
      sceneRef.current.remove(modelGroupRef.current);
      modelGroupRef.current = null;
    }

    const group = modelData.sceneGroup;
    modelGroupRef.current = group;
    sceneRef.current.add(group);

    // Fit View (Center Model)
    fitModelToView(group);
  }, [modelData]);

  // Function: Fit Model to View
  const fitModelToView = useCallback((group?: THREE.Group | null) => {
    const targetGroup = group || modelGroupRef.current;
    if (!targetGroup || !activeCameraRef.current || !controlsRef.current) return;

    const box = new THREE.Box3().setFromObject(targetGroup);
    if (box.isEmpty()) return;

    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);

    const fov = 45 * (Math.PI / 180);
    let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2)) * 1.5;
    cameraZ = Math.max(cameraZ, 20);

    const camera = activeCameraRef.current;
    camera.position.set(center.x + cameraZ * 0.7, center.y + cameraZ * 0.5, center.z + cameraZ * 0.7);
    camera.lookAt(center);

    controlsRef.current.target.copy(center);
    controlsRef.current.update();

    if (gridHelperRef.current) {
      gridHelperRef.current.position.y = box.min.y;
    }
  }, []);

  // Color Mode & Proportional Apontamentos Application
  useEffect(() => {
    if (!modelData || !modelGroupRef.current) return;

    const group = modelGroupRef.current;

    group.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        const mesh = child as THREE.Mesh;
        const pmark = mesh.userData.pieceMark || '';

        if (colorMode === 'production' && productionData) {
          // Look up production pointing status
          const prod = productionData.get(pmark);
          if (prod && prod.pointedQtd > 0) {
            // Apply stage color (e.g., Light Green #4ade80 for pointed)
            const stageHex = prod.processColor || '#4ade80';
            mesh.material = new THREE.MeshStandardMaterial({
              color: new THREE.Color(stageHex),
              metalness: 0.35,
              roughness: 0.45,
              side: THREE.DoubleSide,
            });
          } else {
            // Unpointed / Pending (Default Gray)
            mesh.material = new THREE.MeshStandardMaterial({
              color: 0x64748b,
              metalness: 0.3,
              roughness: 0.6,
              transparent: opacity < 100,
              opacity: opacity / 100,
              side: THREE.DoubleSide,
            });
          }
        } else {
          // Color Mode "Descrição" (Palette by Profile/Section)
          const colorKey = mesh.userData.colorKey;
          const cachedMat = modelData.materialsByColor.get(colorKey);
          if (cachedMat) {
            mesh.material = cachedMat;
          }
        }

        // Apply Opacity & Wireframe
        if (Array.isArray(mesh.material)) {
          mesh.material.forEach((m) => {
            m.transparent = opacity < 100;
            m.opacity = opacity / 100;
            if ('wireframe' in m) (m as any).wireframe = isWireframe;
          });
        } else if (mesh.material) {
          mesh.material.transparent = opacity < 100;
          mesh.material.opacity = opacity / 100;
          if ('wireframe' in mesh.material) (mesh.material as any).wireframe = isWireframe;
        }
      }
    });
  }, [modelData, colorMode, productionData, opacity, isWireframe]);

  // Camera Toggle (Ortogonal / Perspectiva)
  const handleToggleCamera = useCallback(() => {
    if (!perspCameraRef.current || !orthoCameraRef.current || !controlsRef.current) return;

    const nextOrtho = !isOrthographic;
    setIsOrthographic(nextOrtho);

    const prevCamera = activeCameraRef.current!;
    const nextCamera = nextOrtho ? orthoCameraRef.current : perspCameraRef.current;

    nextCamera.position.copy(prevCamera.position);
    nextCamera.quaternion.copy(prevCamera.quaternion);

    activeCameraRef.current = nextCamera;
    controlsRef.current.object = nextCamera;
    controlsRef.current.update();
  }, [isOrthographic]);

  // ViewCube Direction Switcher
  const handleViewCubeSelect = useCallback(
    (view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right' | 'iso') => {
      if (!controlsRef.current || !activeCameraRef.current) return;
      const target = controlsRef.current.target;
      const camera = activeCameraRef.current;
      const distance = camera.position.distanceTo(target);

      const newPos = target.clone();
      switch (view) {
        case 'top':
          newPos.y += distance;
          break;
        case 'bottom':
          newPos.y -= distance;
          break;
        case 'front':
          newPos.z += distance;
          break;
        case 'back':
          newPos.z -= distance;
          break;
        case 'left':
          newPos.x -= distance;
          break;
        case 'right':
          newPos.x += distance;
          break;
        case 'iso':
          newPos.x += distance * 0.7;
          newPos.y += distance * 0.5;
          newPos.z += distance * 0.7;
          break;
      }

      camera.position.copy(newPos);
      camera.lookAt(target);
      controlsRef.current.update();
    },
    []
  );

  // Fullscreen Toggle
  const handleToggleFullscreen = useCallback(() => {
    if (!containerRef.current) return;
    if (!document.fullscreenElement) {
      containerRef.current.requestFullscreen().catch(() => {});
    } else {
      document.exitFullscreen().catch(() => {});
    }
  }, []);

  // 1.5-Second Hover Detection
  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!containerRef.current || !activeCameraRef.current || !modelGroupRef.current) return;

    const rect = containerRef.current.getBoundingClientRect();
    const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
    mousePosRef.current.set(mouseX, mouseY);

    // Clear previous timer on movement
    if (hoverTimerRef.current) {
      clearTimeout(hoverTimerRef.current);
      hoverTimerRef.current = null;
    }
    setHoveredPiece(null);
    setHoverPosition(null);

    // Set 1.5s delay timer for stable hover
    const clientX = e.clientX;
    const clientY = e.clientY;

    hoverTimerRef.current = setTimeout(() => {
      raycasterRef.current.setFromCamera(mousePosRef.current, activeCameraRef.current!);
      const intersects = raycasterRef.current.intersectObjects(modelGroupRef.current!.children, true);

      if (intersects.length > 0) {
        const hitMesh = intersects[0].object as THREE.Mesh;
        const expressID = hitMesh.userData.expressID;
        const pmark = hitMesh.userData.pieceMark;

        if (modelData && expressID) {
          const piece = modelData.pieceByExpressID.get(expressID) || {
            expressID,
            guid: '',
            name: hitMesh.userData.section || 'Peça',
            type: 'PIECE',
            pieceMark: pmark,
            section: hitMesh.userData.section,
          };
          setHoveredPiece(piece);
          setHoverPosition({ x: clientX, y: clientY });
        }
      }
    }, 1500); // 1.5 seconds exact requirement
  };

  const handlePointerLeave = () => {
    if (hoverTimerRef.current) {
      clearTimeout(hoverTimerRef.current);
      hoverTimerRef.current = null;
    }
    setHoveredPiece(null);
    setHoverPosition(null);
  };

  return (
    <div
      ref={containerRef}
      onPointerMove={handlePointerMove}
      onPointerLeave={handlePointerLeave}
      className="relative w-full h-full min-h-[600px] bg-slate-950 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl select-none"
    >
      {/* Top Right: Interactive ViewCube */}
      <div className="absolute top-4 right-4 z-20">
        <ViewCube onSelectView={handleViewCubeSelect} />
      </div>

      {/* Hover Tooltip (1.5s delay trigger) */}
      <PieceHoverTooltip
        piece={hoveredPiece}
        position={hoverPosition}
        productionInfo={
          hoveredPiece?.pieceMark && productionData
            ? {
                pointedQty: productionData.get(hoveredPiece.pieceMark)?.pointedQtd,
                totalQty: productionData.get(hoveredPiece.pieceMark)?.totalQtd,
                currentStage: productionData.get(hoveredPiece.pieceMark)?.currentProcessName,
                stageColor: productionData.get(hoveredPiece.pieceMark)?.processColor,
              }
            : undefined
        }
      />

      {/* Bottom Floating Toolbar */}
      <div className="absolute bottom-4 left-4 right-4 z-20 max-w-5xl mx-auto">
        <Viewer3DToolbar
          opacity={opacity}
          onOpacityChange={setOpacity}
          showGrid={showGrid}
          onToggleGrid={() => {
            setShowGrid(!showGrid);
            if (gridHelperRef.current) gridHelperRef.current.visible = !showGrid;
          }}
          isOrthographic={isOrthographic}
          onToggleCamera={handleToggleCamera}
          isWireframe={isWireframe}
          onToggleWireframe={() => setIsWireframe(!isWireframe)}
          navMode={navMode}
          onNavModeChange={setNavMode}
          colorMode={colorMode}
          onColorModeChange={setColorMode}
          onFitView={() => fitModelToView()}
          onToggleFullscreen={handleToggleFullscreen}
          onToggleSectionPlanes={() => setHasSectionPlanes(!hasSectionPlanes)}
          onToggleMeasure={() => setIsMeasuring(!isMeasuring)}
          hasSectionPlanes={hasSectionPlanes}
          isMeasuring={isMeasuring}
        />
      </div>
    </div>
  );
};