'use client'

import React, { useEffect, useRef, useState } from 'react'
 
import {
  Engine,
  Scene,
  Vector3,
  HemisphericLight,
  ArcRotateCamera,
  Color3,
  Color4,
  AbstractMesh,
  Nullable,
  HighlightLayer,
  Mesh,
  InstancedMesh,
  Animation,
  CubicEase,
  EasingFunction,
  Matrix,
  Viewport,
  ImportMeshAsync,
} from '@babylonjs/core'
import '@babylonjs/loaders'

import LoadingSpinner from '../ui/LoadingSpinner'


export interface ModelViewerProps {
  modelPath: string
  onModelLoaded?: (modelData: {
    meshes: AbstractMesh[]
    boundingBox: {
      min: { x: number; y: number; z: number }
      max: { x: number; y: number; z: number }
    }
  }) => void
  onError?: (error: string) => void 
  focusSensorId?: string | null
  renderOverlay?: (params: { anchor: { left: number; top: number } | null; info?: { name?: string; sensorId?: string } | null }) => React.ReactNode
}

const ModelViewer: React.FC<ModelViewerProps> = ({
  modelPath,
  onModelLoaded,
  onError,
  focusSensorId,
  renderOverlay,
}) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const engineRef = useRef<Nullable<Engine>>(null)
  const sceneRef = useRef<Nullable<Scene>>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [loadingProgress, setLoadingProgress] = useState(0)
  const [showModel, setShowModel] = useState(false)
  const isInitializedRef = useRef(false)
  const isDisposedRef = useRef(false)
  const importedMeshesRef = useRef<AbstractMesh[]>([])
  const highlightLayerRef = useRef<HighlightLayer | null>(null)
  const chosenMeshRef = useRef<AbstractMesh | null>(null)
  const [overlayPos, setOverlayPos] = useState<{ left: number; top: number } | null>(null)
  const [overlayData, setOverlayData] = useState<{ name?: string; sensorId?: string } | null>(null)
  const [modelReady, setModelReady] = useState(false)
  

  useEffect(() => {
    isDisposedRef.current = false
    isInitializedRef.current = false
    return () => {
      isDisposedRef.current = true
    }
  }, [])

  useEffect(() => {
    if (!canvasRef.current || isInitializedRef.current) return

    const canvas = canvasRef.current
    const engine = new Engine(canvas, true)
    engineRef.current = engine

    engine.runRenderLoop(() => {
      if (!isDisposedRef.current && sceneRef.current) {
        sceneRef.current.render()
      }
    })

    const scene = new Scene(engine)
    sceneRef.current = scene

    scene.clearColor = new Color4(0.1, 0.1, 0.15, 1)

    const camera = new ArcRotateCamera('camera', 0, Math.PI / 3, 20, Vector3.Zero(), scene)
    camera.attachControl(canvas, true)
    camera.lowerRadiusLimit = 2
    camera.upperRadiusLimit = 200
    camera.wheelDeltaPercentage = 0.01
    camera.panningSensibility = 50
    camera.angularSensibilityX = 1000
    camera.angularSensibilityY = 1000

    const ambientLight = new HemisphericLight('ambientLight', new Vector3(0, 1, 0), scene)
    ambientLight.intensity = 0.4
    ambientLight.diffuse = new Color3(0.7, 0.7, 0.8)
    ambientLight.specular = new Color3(0.2, 0.2, 0.3)
    ambientLight.groundColor = new Color3(0.3, 0.3, 0.4)

    const keyLight = new HemisphericLight('keyLight', new Vector3(1, 1, 0), scene)
    keyLight.intensity = 0.6
    keyLight.diffuse = new Color3(1, 1, 0.9)
    keyLight.specular = new Color3(1, 1, 0.9)

    const fillLight = new HemisphericLight('fillLight', new Vector3(-1, 0.5, -1), scene)
    fillLight.intensity = 0.3
    fillLight.diffuse = new Color3(0.8, 0.8, 1)
 
    const hl = new HighlightLayer('highlight-layer', scene)
    highlightLayerRef.current = hl

    const handleResize = () => {
      if (!isDisposedRef.current) {
        engine.resize()
      }
    }
    window.addEventListener('resize', handleResize)

    isInitializedRef.current = true

    return () => {
      isDisposedRef.current = true
      isInitializedRef.current = false
      window.removeEventListener('resize', handleResize)
 
      highlightLayerRef.current?.dispose()
      highlightLayerRef.current = null
      if (engineRef.current) {
        engineRef.current.dispose()
        engineRef.current = null
      }
      sceneRef.current = null
    }
  }, [])

  useEffect(() => {
    if (!isInitializedRef.current || isDisposedRef.current) {
      return
    }
 
    if (!modelPath || modelPath.trim() === '') {
      console.warn('[ModelViewer] No model path provided')
      // Не вызываем onError для пустого пути - это нормальное состояние при инициализации
      setIsLoading(false)
      return
    }

    const loadModel = async () => {
      if (!sceneRef.current || isDisposedRef.current) {
        return
      }
 
      const currentModelPath = modelPath;
      console.log('[ModelViewer] Starting model load:', currentModelPath);
       
      setIsLoading(true)
      setLoadingProgress(0)
      setShowModel(false)
      setModelReady(false)
       
      const oldMeshes = sceneRef.current.meshes.slice();
      const activeCameraId = sceneRef.current.activeCamera?.uniqueId;
      console.log('[ModelViewer] Cleaning up old meshes. Total:', oldMeshes.length);
      oldMeshes.forEach(m => {
        if (m.uniqueId !== activeCameraId) {
          m.dispose();
        }
      });

      console.log('[ModelViewer] Loading GLTF model:', currentModelPath)
      
      // UI элемент загрузчика (есть эффект замедленности)
      const progressInterval = setInterval(() => {
        setLoadingProgress(prev => {
          if (prev >= 90) {
            clearInterval(progressInterval)
            return 90
          }
          return prev + Math.random() * 15
        })
      }, 100)
      
      try {
        console.log('[ModelViewer] Calling ImportMeshAsync with path:', currentModelPath);
        
        // Проверим доступность файла через fetch
        try {
          const testResponse = await fetch(currentModelPath, { method: 'HEAD' });
          console.log('[ModelViewer] File availability check:', {
            url: currentModelPath,
            status: testResponse.status,
            statusText: testResponse.statusText,
            ok: testResponse.ok
          });
        } catch (fetchError) {
          console.error('[ModelViewer] File fetch error:', fetchError);
        }
        
        const result = await ImportMeshAsync(currentModelPath, sceneRef.current)
        console.log('[ModelViewer] ImportMeshAsync completed successfully');
        console.log('[ModelViewer] Import result:', {
          meshesCount: result.meshes.length,
          particleSystemsCount: result.particleSystems.length,
          skeletonsCount: result.skeletons.length,
          animationGroupsCount: result.animationGroups.length
        });
  
        if (isDisposedRef.current || modelPath !== currentModelPath) {
          console.log('[ModelViewer] Model loading aborted - model changed during load')
          clearInterval(progressInterval)
          setIsLoading(false)
          return;
        }

        importedMeshesRef.current = result.meshes

        clearInterval(progressInterval)
        setLoadingProgress(100)
        
        console.log('[ModelViewer] GLTF Model loaded successfully!', result)
        
        if (result.meshes.length > 0) {
          
          const boundingBox = result.meshes[0].getHierarchyBoundingVectors()
          const size = boundingBox.max.subtract(boundingBox.min)
          const maxDimension = Math.max(size.x, size.y, size.z)
          
          const camera = sceneRef.current!.activeCamera as ArcRotateCamera
          camera.radius = maxDimension * 2
          camera.target = result.meshes[0].position

          importedMeshesRef.current = result.meshes
          setModelReady(true)

          onModelLoaded?.({
            meshes: result.meshes,
            boundingBox: {
              min: boundingBox.min,
              max: boundingBox.max
            }
          })

          // Плавное появление модели
          setTimeout(() => {
            if (!isDisposedRef.current && modelPath === currentModelPath) {
              setShowModel(true)
              setIsLoading(false)
            } else {
              console.log('Model display aborted - model changed during animation')
            }
          }, 500)
        } else {
          console.warn('No meshes found in model')
          onError?.('В модели не найдена геометрия')
          setIsLoading(false)
        }
      } catch (error) {
        clearInterval(progressInterval)
        // Only report error if this loading is still relevant
        if (!isDisposedRef.current && modelPath === currentModelPath) {
          console.error('Error loading GLTF model:', error)
          const errorMessage = error instanceof Error ? error.message : String(error)
          onError?.(`Ошибка загрузки модели: ${errorMessage}`)
        } else {
          console.log('Error occurred but loading was aborted - model changed')
        }
        setIsLoading(false)
      }
    }

    // Загрузка модлеи начинается после появления спиннера
    requestIdleCallback(() => loadModel(), { timeout: 50 })
  }, [modelPath, onError, onModelLoaded])

  useEffect(() => { 
    if (!sceneRef.current || isDisposedRef.current || !modelReady) return

    const sensorId = (focusSensorId ?? '').trim()
    if (!sensorId) {
      console.log('[ModelViewer] Focus cleared (no Sensor_ID provided)')
 
      highlightLayerRef.current?.removeAllMeshes()
      chosenMeshRef.current = null
      setOverlayPos(null)
      setOverlayData(null)
      return
    }
 
    const allMeshes = importedMeshesRef.current || []
     
    if (allMeshes.length === 0) {
      console.warn('[ModelViewer] No meshes available for sensor matching')
      highlightLayerRef.current?.removeAllMeshes()
      chosenMeshRef.current = null
      setOverlayPos(null)
      setOverlayData(null)
      return
    }
    
    const sensorMeshes = allMeshes.filter((m: any) => {
      try {
        return ((m.id ?? '').includes('IfcSensor') || (m.name ?? '').includes('IfcSensor'))
      } catch (error) {
        console.warn('[ModelViewer] Error filtering sensor mesh:', error)
        return false
      }
    })
 
    const chosen = sensorMeshes.find((m: any) => {
      try {
        const meta: any = (m as any)?.metadata
        const extras: any = meta?.gltf?.extras ?? meta?.extras ?? (m as any)?.extras
         
        const sid = extras?.Sensor_ID ?? extras?.sensor_id ?? extras?.SERIAL_NUMBER ?? extras?.serial_number
        if (sid != null) {
          return String(sid).trim() === sensorId
        }
         
        const monitoringSensorInstance = extras?.bonsaiPset_ARBM_PSet_MonitoringSensor_Instance
        if (monitoringSensorInstance && typeof monitoringSensorInstance === 'string') {
          try {
            const parsedInstance = JSON.parse(monitoringSensorInstance)
            const instanceSensorId = parsedInstance?.Sensor_ID
            if (instanceSensorId != null) {
              return String(instanceSensorId).trim() === sensorId
            }
          } catch (parseError) {
            console.warn('[ModelViewer] Error parsing MonitoringSensor_Instance JSON:', parseError)
          }
        }
        
        return false
      } catch (error) {
        console.warn('[ModelViewer] Error matching sensor mesh:', error)
        return false
      }
    })

    console.log('[ModelViewer] Sensor focus', {
      requested: sensorId,
      totalImportedMeshes: allMeshes.length,
      totalSensorMeshes: sensorMeshes.length,
      chosen: chosen ? { id: chosen.id, name: chosen.name, uniqueId: chosen.uniqueId, parent: chosen.parent?.name } : null,
      source: 'result.meshes',
    })

    const scene = sceneRef.current!

    if (chosen) {
      try {
        const camera = scene.activeCamera as ArcRotateCamera
        const bbox = (typeof chosen.getHierarchyBoundingVectors === 'function')
          ? chosen.getHierarchyBoundingVectors()
          : { min: chosen.getBoundingInfo().boundingBox.minimumWorld, max: chosen.getBoundingInfo().boundingBox.maximumWorld }
        const center = bbox.min.add(bbox.max).scale(0.5)
        const size = bbox.max.subtract(bbox.min)
        const maxDimension = Math.max(size.x, size.y, size.z)
        const targetRadius = Math.max(camera.lowerRadiusLimit ?? 2, maxDimension * 1.5)

        scene.stopAnimation(camera)

        const ease = new CubicEase()
        ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)
        const frameRate = 60
        const durationMs = 600
        const totalFrames = Math.round((durationMs / 1000) * frameRate)

        Animation.CreateAndStartAnimation('camTarget', camera, 'target', frameRate, totalFrames, camera.target.clone(), center.clone(), Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
        Animation.CreateAndStartAnimation('camRadius', camera, 'radius', frameRate, totalFrames, camera.radius, targetRadius, Animation.ANIMATIONLOOPMODE_CONSTANT, ease)

        const hl = highlightLayerRef.current
        if (hl) {
          hl.removeAllMeshes()
          if (chosen instanceof Mesh) {
            hl.addMesh(chosen, new Color3(1, 1, 0))
          } else if (chosen instanceof InstancedMesh) {
            hl.addMesh(chosen.sourceMesh, new Color3(1, 1, 0))
          } else {
            const children = typeof (chosen as any)?.getChildMeshes === 'function' ? (chosen as any).getChildMeshes() : []
            for (const cm of children) {
              if (cm instanceof Mesh) {
                hl.addMesh(cm, new Color3(1, 1, 0))
              }
            }
          }
        }
        chosenMeshRef.current = chosen
        setOverlayData({ name: chosen.name, sensorId })
      } catch (error) {
        console.error('[ModelViewer] Error focusing on sensor mesh:', error)
        highlightLayerRef.current?.removeAllMeshes()
        chosenMeshRef.current = null
        setOverlayPos(null)
        setOverlayData(null)
      }
    } else {
      highlightLayerRef.current?.removeAllMeshes()
      chosenMeshRef.current = null
      setOverlayPos(null)
      setOverlayData(null)
    }
  }, [focusSensorId, modelReady])

  useEffect(() => {
    const scene = sceneRef.current
    if (!scene || isDisposedRef.current) return
    const observer = scene.onAfterRenderObservable.add(() => {
      const chosen = chosenMeshRef.current
      if (!chosen) return
      
      try {
        const engine = scene.getEngine()
        const cam = scene.activeCamera
        if (!cam) return
        
        const center = chosen.getBoundingInfo().boundingBox.centerWorld
        const world = Matrix.IdentityReadOnly
        const transform = scene.getTransformMatrix()
        const viewport = new Viewport(0, 0, engine.getRenderWidth(), engine.getRenderHeight())
        const projected = Vector3.Project(center, world, transform, viewport)
        setOverlayPos({ left: projected.x, top: projected.y })
      } catch (error) {
        console.warn('[ModelViewer] Error updating overlay position:', error)
        setOverlayPos(null)
      }
    })
    return () => {
      scene.onAfterRenderObservable.remove(observer)
    }
  }, [])

  return (
    <div className="w-full h-screen relative bg-gray-900 overflow-hidden">
      {!modelPath ? (
        <div className="h-full flex items-center justify-center">
          <div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md shadow-xl">
            <div className="text-amber-400 text-lg font-semibold mb-2">
              3D модель не выбрана
            </div>
            <div className="text-gray-300 mb-4">
              Выберите модель в панели «Зоны мониторинга», чтобы начать просмотр
            </div>
            <div className="text-sm text-gray-400">
              Если список пуст, добавьте файлы в каталог assets/big-models или проверьте API
            </div>
          </div>
        </div>
      ) : (
        <>
          <canvas
            ref={canvasRef}
            className={`w-full h-full outline-none block transition-opacity duration-500 ${
              showModel ? 'opacity-100' : 'opacity-0'
            }`}
          />
          {isLoading && (
            <div className="absolute inset-0 bg-gray-900 flex items-center justify-center z-50">
              <LoadingSpinner 
                progress={loadingProgress}
                size={120}
                strokeWidth={8}
              />
            </div>
          )}
          {!modelReady && !isLoading && (
            <div className="absolute inset-0 bg-gray-900 flex items-center justify-center z-40">
              <div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md">
                <div className="text-gray-400 text-lg font-semibold mb-4">
                  3D модель не загружена
                </div>
                <div className="text-sm text-gray-400">
                  Модель не готова к отображению
                </div>
              </div>
            </div>
          )}
        </>
      )}
      {renderOverlay 
        ? renderOverlay({ anchor: overlayPos, info: overlayData })
        : (overlayData && overlayPos && (
          <div className="absolute z-40 pointer-events-none" style={{ left: overlayPos.left, top: overlayPos.top }}>
            <div className="rounded bg-black/70 text-white text-xs px-3 py-2 shadow-lg">
              <div className="font-semibold truncate max-w-[200px]">{overlayData.name || 'Sensor'}</div>
              {overlayData.sensorId && <div className="opacity-80">ID: {overlayData.sensorId}</div>}
            </div>
          </div>
        ))
      }
    </div>
  )
}

export default ModelViewer