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

export default function MapEditor() {
  const mountRef = useRef(null);
  const [modelList, setModelList] = useState([]);
  const [mode, setMode] = useState('translate');
  const [cities, setCities] = useState([]);
  const [cityId, setCityId] = useState(null);
  const [copiedObject, setCopiedObject] = useState(null);
  const [objectCoordinates, setObjectCoordinates] = useState({ x: 0, y: 0, z: 0 });
  const [objectRotation, setObjectRotation] = useState({ x: 0, y: 0, z: 0 });
  const [objectScale, setObjectScale] = useState({ x: 1, y: 1, z: 1 });
  const [objectId, setObjectId] = useState(null);
  const [objectName, setObjectName] = useState('');
  const [objectOrganizationId, setObjectOrganizationId] = useState(2);
  const [objectCollidable, setObjectCollidable] = useState(false);
  const [objectInteriorId, setObjectInteriorId] = useState(101);
  const [showAdvancedProperties, setShowAdvancedProperties] = useState(false);
  const [rulerMode, setRulerMode] = useState(false);
  const [rulerPoints, setRulerPoints] = useState([]);
  const keysPressed = useRef({});

  const sceneRef = useRef();
  const cameraRef = useRef();
  const rendererRef = useRef();
  const controlsRef = useRef();
  const transformRef = useRef();
  const objectsRef = useRef([]);
  const removedIdsRef = useRef([]);
  const selectedRef = useRef(null);
  const loader = useRef(new GLTFLoader()).current;
  const materialRef = useRef();

  useEffect(() => {
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xaaaaaa);
    sceneRef.current = scene;

    const camera = new THREE.PerspectiveCamera(
      60,
      mountRef.current.clientWidth / mountRef.current.clientHeight,
      0.1,
      1000
    );
    camera.position.set(5, 5, 5);
    camera.lookAt(0, 0, 0);
    cameraRef.current = camera;

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
    mountRef.current.appendChild(renderer.domElement);
    rendererRef.current = renderer;

    const controls = new OrbitControls(camera, renderer.domElement);
    controlsRef.current = controls;

    const loadingManager = new THREE.LoadingManager();
    const textureLoader = new THREE.TextureLoader(loadingManager);
    const baseTexture = textureLoader.load('textures/base.png');
    materialRef.current = new THREE.MeshStandardMaterial({ map: baseTexture });

    const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
    hemi.position.set(0, 20, 0);
    scene.add(hemi);

    const grid = new THREE.GridHelper(100, 100);
    scene.add(grid);

    const transform = new TransformControls(camera, renderer.domElement);
    transform.addEventListener('dragging-changed', e => {
      controls.enabled = !e.value;
    });
    scene.add(transform);
    transformRef.current = transform;

    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    const onPointerDown = event => {
      // Если начинаем тянуть гизм TransformControls, не переопределяем выбор
      if (transform.dragging) return;
      const rect = renderer.domElement.getBoundingClientRect();
      mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
      mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      const intersects = raycaster.intersectObjects(objectsRef.current, true);
      if (intersects.length > 0) {
        let obj = intersects[0].object;
        // find top-level object stored in objectsRef
        while (obj.parent && !objectsRef.current.includes(obj)) {
          obj = obj.parent;
        }
        transform.attach(obj);
        selectedRef.current = obj;
        updateObjectCoordinates(obj);
      } else {
        selectedRef.current = null;
        transform.detach();
      }
    };
    renderer.domElement.addEventListener('pointerdown', onPointerDown);
    
    // Обработчик для линейки
    const onRulerClick = (event) => {
      if (rulerMode) {
        handleRulerClick(event);
      }
    };
    renderer.domElement.addEventListener('click', onRulerClick);

    // Обработчики клавиатуры
    const cameraSpeed = 0.5;
    const objectMoveSpeed = 0.5;

    const handleKeyDown = (event) => {
      keysPressed.current[event.code] = true;
      
      // Управление камерой
      if (event.code === 'KeyW' || event.code === 'KeyЦ') {
        const direction = new THREE.Vector3();
        camera.getWorldDirection(direction);
        camera.position.add(direction.multiplyScalar(cameraSpeed));
      }
      if (event.code === 'KeyS' || event.code === 'KeyЫ') {
        const direction = new THREE.Vector3();
        camera.getWorldDirection(direction);
        camera.position.sub(direction.multiplyScalar(cameraSpeed));
      }
      if (event.code === 'KeyA' || event.code === 'KeyФ') {
        const right = new THREE.Vector3();
        camera.getWorldDirection(right);
        right.cross(camera.up).normalize();
        camera.position.sub(right.multiplyScalar(cameraSpeed));
      }
      if (event.code === 'KeyD' || event.code === 'KeyВ') {
        const right = new THREE.Vector3();
        camera.getWorldDirection(right);
        right.cross(camera.up).normalize();
        camera.position.add(right.multiplyScalar(cameraSpeed));
      }
      
      // Управление выбранным объектом
      const obj = selectedRef.current;
      if (obj) {
        if (event.code === 'ArrowUp') {
          obj.position.z += objectMoveSpeed;
          updateObjectCoordinates(obj);
        }
        if (event.code === 'ArrowDown') {
          obj.position.z -= objectMoveSpeed;
          updateObjectCoordinates(obj);
        }
        if (event.code === 'ArrowLeft') {
          obj.position.x -= objectMoveSpeed;
          updateObjectCoordinates(obj);
        }
        if (event.code === 'ArrowRight') {
          obj.position.x += objectMoveSpeed;
          updateObjectCoordinates(obj);
        }
      }
      
    };

    const handleKeyUp = (event) => {
      keysPressed.current[event.code] = false;
    };

    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);

    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    const onResize = () => {
      if (!mountRef.current) return;
      camera.aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
    };
    window.addEventListener('resize', onResize);

    return () => {
      renderer.domElement.removeEventListener('pointerdown', onPointerDown);
      renderer.domElement.removeEventListener('click', onRulerClick);
      window.removeEventListener('resize', onResize);
      document.removeEventListener('keydown', handleKeyDown);
      document.removeEventListener('keyup', handleKeyUp);
      mountRef.current.removeChild(renderer.domElement);
    };
  }, []);

  useEffect(() => {
    transformRef.current?.setMode(mode);
  }, [mode]);

  // Отдельный useEffect для обработки клавиш
  useEffect(() => {
    const handleKeyDown = (event) => {
      // Копирование и вставка
      if (event.ctrlKey && event.code === 'KeyC') {
        event.preventDefault();
        const obj = selectedRef.current;
        if (obj) {
          setCopiedObject({
            model_url: obj.userData.model_url,
            name: obj.userData.name,
            position: obj.position.clone(),
            rotation: obj.rotation.clone(),
            scale: obj.scale.clone()
          });
          console.log('Объект скопирован:', obj.userData.name);
        }
      }
      if (event.ctrlKey && event.code === 'KeyV') {
        event.preventDefault();
        if (copiedObject) {
          console.log('Вставка объекта:', copiedObject.name);
          loader.load(copiedObject.model_url, gltf => {
            const m = gltf.scene;
            m.userData = { 
              model_url: copiedObject.model_url, 
              name: copiedObject.name + '_copy' 
            };
            m.position.copy(copiedObject.position);
            m.rotation.copy(copiedObject.rotation);
            m.scale.copy(copiedObject.scale);
            m.traverse(child => {
              if (child.isMesh && materialRef.current) {
                child.material = materialRef.current.clone();
                child.material.needsUpdate = true;
              }
            });
            sceneRef.current.add(m);
            objectsRef.current.push(m);
            transformRef.current.attach(m);
            selectedRef.current = m;
            updateObjectCoordinates(m);
            console.log('✅ Объект скопирован (сохранение при нажатии "Сохранить")');
          });
        }
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [copiedObject, loader]);

  useEffect(() => {
    const token = localStorage.getItem('token');
    fetch('/api/models', { headers: { Authorization: `Bearer ${token}` } })
      .then(r => r.json())
      .then(setModelList)
      .catch(err => console.error('Ошибка загрузки моделей', err));
    fetch('/api/cities', { headers: { Authorization: `Bearer ${token}` } })
      .then(r => r.json())
      .then(data => {
        setCities(data);
        const profile = JSON.parse(sessionStorage.getItem('user_profile') || '{}');
        const defaultCity = profile.last_city_id || data[0]?.id;
        setCityId(defaultCity);
      })
      .catch(err => console.error('Ошибка загрузки городов', err));
  }, []);

  useEffect(() => {
    if (!cityId) return;
    
    const token = localStorage.getItem('token');
    // очистка текущих объектов
    objectsRef.current.forEach(o => sceneRef.current.remove(o));
    objectsRef.current = [];
    removedIdsRef.current = [];
    
    console.log('📡 Запрашиваем объекты с сервера...');
    fetch(`/api/cities/${cityId}/objects`, {
      headers: { Authorization: `Bearer ${token}` }
    })
      .then(r => {
        console.log('📡 Ответ сервера на загрузку объектов:', r.status, r.statusText);
        return r.json();
      })
      .then(data => {
        console.log('📊 Загружено объектов из БД:', data.length);
        console.log('📋 Данные объектов:', data);
        
        data.forEach(obj => {
          console.log('🔄 Загружаем объект:', obj.name, 'ID:', obj.id);
          loader.load(obj.model_url, gltf => {
            const m = gltf.scene;
            m.position.set(obj.pos_x, obj.pos_y, obj.pos_z);
            m.rotation.set(obj.rot_x, obj.rot_y, obj.rot_z);
            m.scale.set(obj.scale_x, obj.scale_y, obj.scale_z);
            m.userData = { 
              id: obj.id, 
              model_url: obj.model_url, 
              name: obj.name,
              organization_id: obj.organization_id,
              rent: obj.rent,
              tax: obj.tax,
              collidable: obj.collidable,
              interior_id: obj.interior_id,
              textures: obj.textures
            };
            m.traverse(child => {
              if (child.isMesh && materialRef.current) {
                child.material = materialRef.current.clone();
                child.material.needsUpdate = true;
              }
            });
            sceneRef.current.add(m);
            objectsRef.current.push(m);
          });
        });
      })
      .catch(err => {
        console.error('❌ Ошибка загрузки объектов:', err);
        alert(`Ошибка загрузки объектов: ${err.message}`);
      });
  }, [cityId, loader]);

  const addModel = name => {
    if (!name) return;
    const url = `/models/copied/${name}`;
    loader.load(url, gltf => {
      const m = gltf.scene;
      m.userData = { model_url: url, name };
      m.traverse(child => {
        if (child.isMesh && materialRef.current) {
          child.material = materialRef.current.clone();
          child.material.needsUpdate = true;
        }
      });
      
      // Размещаем объект перед камерой
      const camera = cameraRef.current;
      const direction = new THREE.Vector3();
      camera.getWorldDirection(direction);
      const distance = 5; // расстояние от камеры
      m.position.copy(camera.position).add(direction.multiplyScalar(distance));
      
      sceneRef.current.add(m);
      objectsRef.current.push(m);
      transformRef.current.attach(m);
      selectedRef.current = m;
      updateObjectCoordinates(m);
      
      console.log('✅ Объект добавлен в сцену (сохранение при нажатии "Сохранить")');
    });
  };

  const copySelectedObject = () => {
    const obj = selectedRef.current;
    if (!obj) return;
    setCopiedObject({
      model_url: obj.userData.model_url,
      name: obj.userData.name,
      position: obj.position.clone(),
      rotation: obj.rotation.clone(),
      scale: obj.scale.clone()
    });
  };

  const pasteObject = () => {
    if (!copiedObject) return;
    loader.load(copiedObject.model_url, gltf => {
      const m = gltf.scene;
      m.userData = { 
        model_url: copiedObject.model_url, 
        name: copiedObject.name + '_copy' 
      };
      m.position.copy(copiedObject.position);
      m.rotation.copy(copiedObject.rotation);
      m.scale.copy(copiedObject.scale);
      m.traverse(child => {
        if (child.isMesh && materialRef.current) {
          child.material = materialRef.current.clone();
          child.material.needsUpdate = true;
        }
      });
      sceneRef.current.add(m);
      objectsRef.current.push(m);
      transformRef.current.attach(m);
      selectedRef.current = m;
      updateObjectCoordinates(m);
    });
  };

  const updateObjectCoordinates = (obj) => {
    if (!obj) return;
    
    // Безопасное получение координат
    const posX = typeof obj.position.x === 'number' ? obj.position.x : 0;
    const posY = typeof obj.position.y === 'number' ? obj.position.y : 0;
    const posZ = typeof obj.position.z === 'number' ? obj.position.z : 0;
    
    setObjectCoordinates({
      x: parseFloat(posX.toFixed(3)),
      y: parseFloat(posY.toFixed(3)),
      z: parseFloat(posZ.toFixed(3))
    });
    
    // Безопасное получение поворота
    const rotX = typeof obj.rotation.x === 'number' ? obj.rotation.x : 0;
    const rotY = typeof obj.rotation.y === 'number' ? obj.rotation.y : 0;
    const rotZ = typeof obj.rotation.z === 'number' ? obj.rotation.z : 0;
    
    setObjectRotation({
      x: parseFloat((rotX * 180 / Math.PI).toFixed(3)),
      y: parseFloat((rotY * 180 / Math.PI).toFixed(3)),
      z: parseFloat((rotZ * 180 / Math.PI).toFixed(3))
    });
    
    // Безопасное получение масштаба
    const scaleX = typeof obj.scale.x === 'number' ? obj.scale.x : 1;
    const scaleY = typeof obj.scale.y === 'number' ? obj.scale.y : 1;
    const scaleZ = typeof obj.scale.z === 'number' ? obj.scale.z : 1;
    
    setObjectScale({
      x: parseFloat(scaleX.toFixed(3)),
      y: parseFloat(scaleY.toFixed(3)),
      z: parseFloat(scaleZ.toFixed(3))
    });
    
    // Обновляем дополнительные свойства
    setObjectId(obj.userData.id || null);
    setObjectName(obj.userData.name || '');
    setObjectOrganizationId(obj.userData.organization_id || 2);
    setObjectCollidable(obj.userData.collidable || false);
    setObjectInteriorId(obj.userData.interior_id || 101);
  };

  const applyCoordinates = () => {
    const obj = selectedRef.current;
    if (!obj) return;
    obj.position.set(objectCoordinates.x, objectCoordinates.y, objectCoordinates.z);
    obj.rotation.set(
      objectRotation.x * Math.PI / 180,
      objectRotation.y * Math.PI / 180,
      objectRotation.z * Math.PI / 180
    );
    obj.scale.set(objectScale.x, objectScale.y, objectScale.z);
    
    // Обновляем дополнительные свойства в userData
    obj.userData.name = objectName;
    obj.userData.organization_id = objectOrganizationId;
    obj.userData.collidable = objectCollidable;
    obj.userData.interior_id = objectInteriorId;
    
    console.log('🔧 Обновлены свойства объекта:', {
      name: objectName,
      organization_id: objectOrganizationId,
      collidable: objectCollidable,
      interior_id: objectInteriorId
    });
    
    transformRef.current.updateMatrixWorld();
    
    console.log('✅ Координаты объекта обновлены (сохранение при нажатии "Сохранить")');
  };

  const saveObjectToDatabase = async (obj) => {
    console.log('🔄 Начинаем сохранение объекта в БД...');
    console.log('📊 Данные объекта:', {
      id: obj.userData.id,
      name: obj.userData.name,
      model_url: obj.userData.model_url,
      position: { x: obj.position.x, y: obj.position.y, z: obj.position.z },
      cityId: cityId
    });

    if (!cityId) {
      console.error('❌ cityId не установлен, пропускаем сохранение');
      return;
    }
    
    const token = localStorage.getItem('token');
    if (!token) {
      console.error('❌ Токен не найден');
      return;
    }

    // Если у объекта есть ID, то обновляем, иначе создаем новый
    const isUpdate = obj.userData.id && obj.userData.id !== null;
    console.log(`📝 ${isUpdate ? 'Обновляем' : 'Создаем'} объект:`, obj.userData.name);

    const objectData = {
      id: obj.userData.id, // null для новых объектов
      city_id: cityId,
      name: obj.userData.name || '',
      model_url: obj.userData.model_url,
      pos_x: obj.position.x,
      pos_y: obj.position.y,
      pos_z: obj.position.z,
      rot_x: obj.rotation.x,
      rot_y: obj.rotation.y,
      rot_z: obj.rotation.z,
      scale_x: obj.scale.x,
      scale_y: obj.scale.y,
      scale_z: obj.scale.z,
      organization_id: obj.userData.organization_id || 2,
      rent: obj.userData.rent || 0,
      tax: obj.userData.tax || 0,
      collidable: obj.userData.collidable || false,
      interior_id: obj.userData.interior_id || 101,
      textures: obj.userData.textures || '/packs/citypack.json'
    };

    console.log('📤 Отправляем данные на сервер:', objectData);
    
    console.log('🔍 Проверяем коллизию:', {
      'obj.userData.collidable': obj.userData.collidable,
      'objectData.collidable': objectData.collidable,
      'objectCollidable state': objectCollidable
    });

    try {
      const response = await fetch('/api/save-object', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(objectData)
      });
      
      console.log('📡 Ответ сервера:', response.status, response.statusText);
      
      if (response.ok) {
        const result = await response.json();
        console.log('✅ Объект успешно сохранен в БД:', result);
        if (result.id && !obj.userData.id) {
          obj.userData.id = result.id;
          setObjectId(result.id);
          console.log('🆔 Назначен ID объекту:', result.id);
        }
      } else {
        const errorText = await response.text();
        console.error('❌ Ошибка сохранения объекта:', response.status, errorText);
        alert(`Ошибка сохранения: ${response.status} - ${errorText}`);
      }
    } catch (error) {
      console.error('❌ Ошибка сети при сохранении:', error);
      alert(`Ошибка сети: ${error.message}`);
    }
  };

  const deleteObjectFromDatabase = async (objId) => {
    if (!objId) return;
    
    const token = localStorage.getItem('token');
    try {
      await fetch(`/api/delete-object/${objId}`, {
        method: 'DELETE',
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
    } catch (error) {
      console.error('Ошибка удаления объекта:', error);
    }
  };

  const deleteSelected = async () => {
    const obj = selectedRef.current;
    if (!obj) return;
    transformRef.current.detach();
    
    // Удаляем из базы данных
    if (obj.userData.id) {
      await deleteObjectFromDatabase(obj.userData.id);
    }
    
    if (obj.parent) {
      obj.parent.remove(obj);
    } else {
      sceneRef.current.remove(obj);
    }
    objectsRef.current = objectsRef.current.filter(o => o !== obj);
    selectedRef.current = null;
  };

  const saveMap = async () => {
    console.log('🔄 Сохраняем все объекты в БД...');
    
    if (!cityId) {
      alert('Город не выбран');
      return;
    }
    
    const token = localStorage.getItem('token');
    if (!token) {
      alert('Токен не найден');
      return;
    }
    
    try {
      // Сохраняем все объекты в БД
      const savePromises = objectsRef.current.map(obj => saveObjectToDatabase(obj));
      await Promise.all(savePromises);
      
      console.log('✅ Все объекты сохранены в БД');
      alert('Карта сохранена в базу данных');
    } catch (error) {
      console.error('❌ Ошибка сохранения карты:', error);
      alert('Ошибка сохранения карты');
    }
  };

  const toggleRulerMode = () => {
    setRulerMode(!rulerMode);
    setRulerPoints([]);
  };

  const handleRulerClick = (event) => {
    if (!rulerMode) return;
    
    const rect = rendererRef.current.domElement.getBoundingClientRect();
    const mouse = new THREE.Vector2();
    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
    
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, cameraRef.current);
    
    // Создаем плоскость на уровне Y=0 для измерения
    const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
    const intersection = new THREE.Vector3();
    raycaster.ray.intersectPlane(plane, intersection);
    
    setRulerPoints(prev => [...prev, intersection]);
  };

  const calculateDistance = () => {
    if (rulerPoints.length < 2) return 0;
    const point1 = rulerPoints[0];
    const point2 = rulerPoints[1];
    return Math.sqrt(
      Math.pow(point2.x - point1.x, 2) + 
      Math.pow(point2.z - point1.z, 2)
    ).toFixed(2);
  };

  return (
    <div style={{ width: '100%', height: '100vh', position: 'relative' }} ref={mountRef}>
      {/* Левая панель управления */}
      <div style={{ position: 'absolute', top: 10, left: 10, background: 'rgba(255,255,255,0.9)', padding: 8, borderRadius: 4 }}>
        <div style={{ marginBottom: 4 }}>
          <select value={cityId || ''} onChange={e => setCityId(Number(e.target.value))}>
            {cities.map(c => (
              <option key={c.id} value={c.id}>{c.name} ({c.country_name})</option>
            ))}
          </select>
        </div>
        <select id="modelSelect">
          <option value="">-- модель --</option>
          {modelList.map(m => (
            <option key={m} value={m}>{m}</option>
          ))}
        </select>
        <button onClick={() => {
          const select = document.getElementById('modelSelect');
          addModel(select.value);
        }}>Добавить</button>
        <button onClick={() => {
          if (mode === 'translate') setMode('rotate');
          else if (mode === 'rotate') setMode('scale');
          else setMode('translate');
        }}>
          {mode === 'translate' ? 'Перемещение' : mode === 'rotate' ? 'Вращение' : 'Масштаб'}
        </button>
        <button onClick={copySelectedObject}>Копировать</button>
        <button onClick={pasteObject} disabled={!copiedObject}>Вставить</button>
        <button onClick={deleteSelected}>Удалить</button>
        
        <button onClick={saveMap}>Сохранить</button>
        <button 
          onClick={() => window.open('/model-gallery', '_blank')}
          style={{ background: '#28a745', color: 'white' }}
        >
          Галерея моделей
        </button>
       

      </div>

      {/* Правая панель координат */}
      <div style={{ position: 'absolute', top: 10, right: 10, background: 'rgba(255,255,255,0.9)', padding: 8, borderRadius: 4, minWidth: 200 }}>
        <h4 style={{ margin: '0 0 8px 0', fontSize: 14 }}>Координаты объекта</h4>
        
        <div style={{ marginBottom: 4 }}>
          <label style={{ fontSize: 12, display: 'block' }}>Позиция:</label>
          <div style={{ display: 'flex', gap: 4 }}>
            <input 
              type="number" 
              step="0.1" 
              value={objectCoordinates.x} 
              onChange={e => setObjectCoordinates({...objectCoordinates, x: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="X"
            />
            <input 
              type="number" 
              step="0.1" 
              value={objectCoordinates.y} 
              onChange={e => setObjectCoordinates({...objectCoordinates, y: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Y"
            />
            <input 
              type="number" 
              step="0.1" 
              value={objectCoordinates.z} 
              onChange={e => setObjectCoordinates({...objectCoordinates, z: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Z"
            />
          </div>
        </div>

        <div style={{ marginBottom: 4 }}>
          <label style={{ fontSize: 12, display: 'block' }}>Поворот (градусы):</label>
          <div style={{ display: 'flex', gap: 4 }}>
            <input 
              type="number" 
              step="1" 
              value={objectRotation.x} 
              onChange={e => setObjectRotation({...objectRotation, x: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="X"
            />
            <input 
              type="number" 
              step="1" 
              value={objectRotation.y} 
              onChange={e => setObjectRotation({...objectRotation, y: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Y"
            />
            <input 
              type="number" 
              step="1" 
              value={objectRotation.z} 
              onChange={e => setObjectRotation({...objectRotation, z: parseFloat(e.target.value) || 0})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Z"
            />
          </div>
        </div>

        <div style={{ marginBottom: 8 }}>
          <label style={{ fontSize: 12, display: 'block' }}>Масштаб:</label>
          <div style={{ display: 'flex', gap: 4 }}>
            <input 
              type="number" 
              step="0.1" 
              value={objectScale.x} 
              onChange={e => setObjectScale({...objectScale, x: parseFloat(e.target.value) || 1})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="X"
            />
            <input 
              type="number" 
              step="0.1" 
              value={objectScale.y} 
              onChange={e => setObjectScale({...objectScale, y: parseFloat(e.target.value) || 1})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Y"
            />
            <input 
              type="number" 
              step="0.1" 
              value={objectScale.z} 
              onChange={e => setObjectScale({...objectScale, z: parseFloat(e.target.value) || 1})}
              style={{ width: 50, fontSize: 11 }}
              placeholder="Z"
            />
          </div>
        </div>

        <button onClick={applyCoordinates} style={{ fontSize: 11, padding: '4px 8px' }}>
          Применить
        </button>
        
        {/* Расширенные свойства */}
        <div style={{ marginTop: 12, borderTop: '1px solid #ccc', paddingTop: 8 }}>
          <button 
            onClick={() => setShowAdvancedProperties(!showAdvancedProperties)}
            style={{ fontSize: 11, padding: '4px 8px', marginBottom: 8 }}
          >
            {showAdvancedProperties ? 'Скрыть' : 'Показать'} дополнительные свойства
          </button>
          
          {showAdvancedProperties && (
            <div>
              <div style={{ marginBottom: 4 }}>
                <label style={{ fontSize: 12, display: 'block' }}>ID объекта:</label>
                <input 
                  type="text" 
                  value={objectId || ''} 
                  disabled
                  style={{ width: 100, fontSize: 11 }}
                />
              </div>
              
              <div style={{ marginBottom: 4 }}>
                <label style={{ fontSize: 12, display: 'block' }}>Название:</label>
                <input 
                  type="text" 
                  value={objectName} 
                  onChange={e => setObjectName(e.target.value)}
                  style={{ width: 100, fontSize: 11 }}
                />
              </div>
              
              <div style={{ marginBottom: 4 }}>
                <label style={{ fontSize: 12, display: 'block' }}>ID организации:</label>
                <input 
                  type="number" 
                  value={objectOrganizationId} 
                  onChange={e => setObjectOrganizationId(parseInt(e.target.value) || 2)}
                  style={{ width: 100, fontSize: 11 }}
                />
              </div>
              
              <div style={{ marginBottom: 4 }}>
                <label style={{ fontSize: 12, display: 'block' }}>ID интерьера:</label>
                <input 
                  type="number" 
                  value={objectInteriorId} 
                  onChange={e => setObjectInteriorId(parseInt(e.target.value) || 101)}
                  style={{ width: 100, fontSize: 11 }}
                />
              </div>
              
              <div style={{ marginBottom: 8 }}>
                <label style={{ fontSize: 12, display: 'flex', alignItems: 'center' }}>
                  <input 
                    type="checkbox" 
                    checked={objectCollidable} 
                    onChange={e => setObjectCollidable(e.target.checked)}
                    style={{ marginRight: 4 }}
                  />
                  Коллизия
                </label>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Панель линейки */}
      {rulerMode && (
        <div style={{ position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)', background: 'rgba(255,255,255,0.9)', padding: 8, borderRadius: 4, fontSize: 12 }}>
          <div>Режим линейки активен</div>
          <div>Кликните на две точки для измерения расстояния</div>
          {rulerPoints.length > 0 && (
            <div>
              <div>Точек: {rulerPoints.length}/2</div>
              {rulerPoints.length === 2 && (
                <div>Расстояние: {calculateDistance()} единиц</div>
              )}
            </div>
          )}
        </div>
      )}

      {/* Панель с подсказками */}
      <div style={{ position: 'absolute', bottom: 10, left: 10, background: 'rgba(0,0,0,0.7)', color: 'white', padding: 8, borderRadius: 4, fontSize: 12 }}>
        <div>WASD/ЦФЫВ - перемещение камеры</div>
        <div>Стрелки - перемещение объекта</div>
        <div>Ctrl+C - копировать, Ctrl+V - вставить</div>
        {rulerMode && <div>Клик - добавить точку линейки</div>}
      </div>
    </div>
  );
}