import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const ModelThumbnail = ({ modelUrl, modelName, onImageGenerated }) => {
  const canvasRef = useRef(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [imageDataUrl, setImageDataUrl] = useState(null);

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

    const generateThumbnail = async () => {
      try {
        setIsLoading(true);
        setError(null);

        // Создаем сцену
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);

        // Создаем камеру
        const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);
        camera.position.set(5, 5, 5);
        camera.lookAt(0, 0, 0);

        // Создаем рендерер
        const renderer = new THREE.WebGLRenderer({ 
          antialias: true,
          alpha: true,
          preserveDrawingBuffer: true
        });
        renderer.setSize(300, 300);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        // Освещение
        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 10, 5);
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        // Загружаем модель
        const loader = new GLTFLoader();
        console.log('🔄 Генерируем превью для:', modelUrl);

        const gltf = await new Promise((resolve, reject) => {
          loader.load(
            modelUrl,
            resolve,
            (progress) => {
              console.log('Загрузка:', (progress.loaded / progress.total * 100) + '%');
            },
            reject
          );
        });

        console.log('✅ Модель загружена для превью:', gltf);
        const model = gltf.scene;

        // Центрируем модель
        const box = new THREE.Box3().setFromObject(model);
        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 scale = 2 / maxDim;

        model.scale.setScalar(scale);
        model.position.sub(center.multiplyScalar(scale));

        // Настраиваем материалы
        model.traverse((child) => {
          if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;

            if (child.material) {
              if (Array.isArray(child.material)) {
                child.material.forEach(mat => {
                  if (mat.map) mat.map.anisotropy = 4;
                  mat.needsUpdate = true;
                });
              } else {
                if (child.material.map) child.material.map.anisotropy = 4;
                child.material.needsUpdate = true;
              }
            }
          }
        });

        scene.add(model);

        // Рендерим сцену
        renderer.render(scene, camera);

        // Получаем изображение
        const canvas = renderer.domElement;
        const dataUrl = canvas.toDataURL('image/png');
        setImageDataUrl(dataUrl);

        // Сохраняем изображение в localStorage для кэширования
        const cacheKey = `model_thumb_${modelName}`;
        localStorage.setItem(cacheKey, dataUrl);

        if (onImageGenerated) {
          onImageGenerated(dataUrl, modelName);
        }

        setIsLoading(false);

        // Очистка
        renderer.dispose();
        scene.clear();

      } catch (error) {
        console.error('❌ Ошибка генерации превью:', error);
        setError(`Ошибка: ${error.message || 'Неизвестная ошибка'}`);
        setIsLoading(false);
      }
    };

    // Проверяем кэш
    const cacheKey = `model_thumb_${modelName}`;
    const cachedImage = localStorage.getItem(cacheKey);
    
    if (cachedImage) {
      setImageDataUrl(cachedImage);
      setIsLoading(false);
      if (onImageGenerated) {
        onImageGenerated(cachedImage, modelName);
      }
    } else {
      generateThumbnail();
    }
  }, [modelUrl, modelName, onImageGenerated]);

  if (isLoading) {
    return (
      <div style={{
        width: '100%',
        height: '300px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#f8f9fa',
        border: '1px solid #ddd',
        borderRadius: '8px'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '14px', marginBottom: '10px' }}>Генерация превью...</div>
          <div style={{ 
            width: '40px', 
            height: '40px', 
            border: '3px solid #f3f3f3',
            borderTop: '3px solid #007bff',
            borderRadius: '50%',
            animation: 'spin 1s linear infinite',
            margin: '0 auto'
          }} />
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{
        width: '100%',
        height: '300px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#fff5f5',
        border: '1px solid #fed7d7',
        borderRadius: '8px',
        color: '#c53030'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '14px' }}>❌ {error}</div>
          <div style={{ fontSize: '12px', marginTop: '5px' }}>Файл: {modelName}</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      width: '100%',
      height: '300px',
      background: '#f8f9fa',
      border: '1px solid #ddd',
      borderRadius: '8px',
      overflow: 'hidden',
      position: 'relative'
    }}>
      {imageDataUrl && (
        <img
          src={imageDataUrl}
          alt={modelName}
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'contain',
            background: '#f0f0f0'
          }}
        />
      )}
    </div>
  );
};

export default ModelThumbnail;
