import React, { useState, useRef, useEffect } from 'react';
import { FaCrop, FaCheck, FaTimes } from 'react-icons/fa';

const ImageCropper = ({ 
  imageUrl, 
  onCrop, 
  onCancel, 
  aspectRatio = 2/3, // По умолчанию для постера
  maxWidth = 500,
  maxHeight = 750
}) => {
  const [crop, setCrop] = useState({ x: 0, y: 0, width: 0, height: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
  const containerRef = useRef(null);
  const imageRef = useRef(null);

  // Добавляем обработчик колесика мыши
  const handleWheel = (e) => {
    e.preventDefault();
    const delta = e.deltaY > 0 ? -0.1 : 0.1; // Уменьшаем при прокрутке вниз, увеличиваем при прокрутке вверх
    
    // Вычисляем новые размеры с сохранением соотношения сторон
    const newWidth = Math.max(100, Math.min(imageSize.width, crop.width * (1 + delta)));
    const newHeight = newWidth / aspectRatio;
    
    // Проверяем, не выходит ли новая область за пределы изображения
    if (newWidth <= imageSize.width && newHeight <= imageSize.height) {
      // Центрируем новую область относительно текущей
      const newX = crop.x + (crop.width - newWidth) / 2;
      const newY = crop.y + (crop.height - newHeight) / 2;
      
      setCrop({
        x: Math.max(0, Math.min(newX, imageSize.width - newWidth)),
        y: Math.max(0, Math.min(newY, imageSize.height - newHeight)),
        width: newWidth,
        height: newHeight
      });
    }
  };

  useEffect(() => {
    if (imageRef.current) {
      const img = imageRef.current;
      img.onload = () => {
        // Получаем оригинальные размеры изображения
        const originalWidth = img.naturalWidth;
        const originalHeight = img.naturalHeight;
        
        // Вычисляем размеры для отображения с учетом максимальных размеров окна
        const maxWidth = window.innerWidth * 0.8;
        const maxHeight = window.innerHeight * 0.6;
        
        // Вычисляем масштаб для отображения
        const scale = Math.min(
          maxWidth / originalWidth,
          maxHeight / originalHeight
        );
        
        // Устанавливаем размеры для отображения
        const displayWidth = originalWidth * scale;
        const displayHeight = originalHeight * scale;
        
        setImageSize({ 
          width: displayWidth, 
          height: displayHeight,
          scale: scale,
          originalWidth,
          originalHeight
        });

        // Вычисляем размеры области кадрирования
        let cropWidth, cropHeight;
        
        if (aspectRatio === 16/9) { // Для баннера
          cropWidth = Math.min(displayWidth, displayHeight * (16/9));
          cropHeight = cropWidth / (16/9);
        } else if (aspectRatio === 2/3) { // Для постера
          cropWidth = Math.min(displayWidth, displayHeight * (2/3));
          cropHeight = cropWidth / (2/3);
        } else {
          cropWidth = displayWidth;
          cropHeight = displayHeight;
        }

        // Центрируем область кадрирования
        setCrop({
          x: (displayWidth - cropWidth) / 2,
          y: (displayHeight - cropHeight) / 2,
          width: cropWidth,
          height: cropHeight
        });
      };
    }
  }, [imageUrl, aspectRatio]);

  const handleMouseDown = (e) => {
    const rect = containerRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Проверяем, находится ли клик внутри области кадрирования
    if (
      x >= crop.x && 
      x <= crop.x + crop.width && 
      y >= crop.y && 
      y <= crop.y + crop.height
    ) {
      setIsDragging(true);
      setStartPos({ x: x - crop.x, y: y - crop.y });
    }
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;

    const rect = containerRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Вычисляем новую позицию с учетом границ
    let newX = x - startPos.x;
    let newY = y - startPos.y;

    // Ограничиваем движение границами изображения
    newX = Math.max(0, Math.min(newX, imageSize.width - crop.width));
    newY = Math.max(0, Math.min(newY, imageSize.height - crop.height));

    setCrop(prev => ({
      ...prev,
      x: newX,
      y: newY
    }));
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const handleCrop = () => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Получаем оригинальные размеры изображения
    const { originalWidth, originalHeight, scale } = imageSize;
    
    // Вычисляем размеры для выходного изображения
    let targetWidth, targetHeight;
    
    if (aspectRatio === 16/9) { // Для баннера
      targetWidth = 1920;
      targetHeight = 1080;
    } else if (aspectRatio === 2/3) { // Для постера
      targetWidth = 1000;
      targetHeight = 1500;
    } else {
      targetWidth = originalWidth;
      targetHeight = originalHeight;
    }
    
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    
    // Вычисляем координаты и размеры в оригинальном масштабе
    const sourceX = crop.x / scale;
    const sourceY = crop.y / scale;
    const sourceWidth = crop.width / scale;
    const sourceHeight = crop.height / scale;
    
    // Рисуем кадрированное изображение
    ctx.drawImage(
      imageRef.current,
      sourceX,
      sourceY,
      sourceWidth,
      sourceHeight,
      0,
      0,
      targetWidth,
      targetHeight
    );
    
    // Получаем кадрированное изображение в виде blob
    canvas.toBlob((blob) => {
      onCrop(blob);
    }, 'image/jpeg', 0.95);
  };

  return (
    <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
      <div className="bg-campfire-charcoal rounded-lg p-6 max-w-[90vw] max-h-[90vh] w-full overflow-auto">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-xl font-bold text-campfire-light">Кадрирование изображения</h3>
          <div className="flex gap-2">
            <button
              onClick={handleCrop}
              className="btn-primary flex items-center gap-2"
            >
              <FaCheck /> Применить
            </button>
            <button
              onClick={onCancel}
              className="btn-secondary flex items-center gap-2"
            >
              <FaTimes /> Отмена
            </button>
          </div>
        </div>

        <div 
          ref={containerRef}
          className="relative bg-campfire-dark rounded-lg overflow-hidden mx-auto"
          style={{ 
            width: Math.min(imageSize.width, window.innerWidth * 0.8),
            height: Math.min(imageSize.height, window.innerHeight * 0.6)
          }}
          onMouseDown={handleMouseDown}
          onMouseMove={handleMouseMove}
          onMouseUp={handleMouseUp}
          onMouseLeave={handleMouseUp}
          onWheel={handleWheel}
        >
          <img
            ref={imageRef}
            src={imageUrl}
            alt="Для кадрирования"
            className="max-w-full h-auto"
          />
          
          {/* Область кадрирования */}
          <div
            className="absolute border-2 border-campfire-amber cursor-move"
            style={{
              left: crop.x,
              top: crop.y,
              width: crop.width,
              height: crop.height
            }}
          >
            {/* Сетка */}
            <div className="absolute inset-0 grid grid-cols-3 grid-rows-3">
              {[...Array(4)].map((_, i) => (
                <div
                  key={`v${i}`}
                  className="absolute top-0 bottom-0 w-px bg-campfire-amber/50"
                  style={{ left: `${(i * 100) / 3}%` }}
                />
              ))}
              {[...Array(4)].map((_, i) => (
                <div
                  key={`h${i}`}
                  className="absolute left-0 right-0 h-px bg-campfire-amber/50"
                  style={{ top: `${(i * 100) / 3}%` }}
                />
              ))}
            </div>
          </div>

          {/* Затемнение вне области кадрирования */}
          <div className="absolute inset-0 bg-black/50">
            <div
              className="absolute bg-transparent"
              style={{
                left: crop.x,
                top: crop.y,
                width: crop.width,
                height: crop.height
              }}
            />
          </div>
        </div>

        <div className="mt-4 text-sm text-campfire-ash">
          <p>• Перетащите область кадрирования для выбора нужной части изображения</p>
          <p>• Используйте колесико мыши для изменения размера области кадрирования</p>
          <p>• Используйте сетку для точного позиционирования</p>
        </div>
      </div>
    </div>
  );
};

export default ImageCropper; 