import { useState } from 'react';
import { X, Upload, Check } from 'lucide-react';
import { ProductImage } from '../../services/catalog';
import { productService } from '../../services/catalog';

export interface ProductImageWithFile extends ProductImage {
  file?: File;
  isUploading?: boolean;
  image_url?: string;
}

interface ProductImageUploaderProps {
  images: ProductImageWithFile[];
  setImages: (images: ProductImageWithFile[]) => void;
  productId?: number; // Опционально, если редактируем существующий продукт
}

const ProductImageUploader: React.FC<ProductImageUploaderProps> = ({ 
  images, 
  setImages, 
  productId 
}) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleFileChange = (e) => {
    const files = Array.from(e.target.files);
    
    if (files.length === 0) return;
    
    console.log(`Выбрано ${files.length} файлов для загрузки`);
    
    const newImages = files.map((file: File) => {
      const isPrimary = images.length === 0; // Первое изображение будет основным
      const objectUrl = URL.createObjectURL(file);
      
      console.log(`Создан временный URL для файла ${file.name}: ${objectUrl}`);
      
      return {
        id: Math.random(), // Временный ID
        url: objectUrl,
        is_primary: isPrimary,
        product_id: productId || 0,
        file,
        isUploading: false // Изменено с true на false, так как загрузка будет происходить при сохранении формы
      };
    });
    
    console.log('Новые изображения для добавления:', newImages);
    setImages([...images, ...newImages]);
    
    // Сбрасываем значение input, чтобы можно было загрузить тот же файл повторно
    e.target.value = '';
  };

  const handleRemoveImage = async (id) => {
    try {
      console.log(`Удаление изображения с ID: ${id}`);
      
      const image = images.find(img => img.id === id);
      
      if (!image) {
        console.error(`Изображение с ID ${id} не найдено`);
        return;
      }
      
      if (productId && !image.file) {
        // Если изображение уже загружено на сервер, удаляем его с сервера
        console.log(`Удаление изображения с сервера: ${id}`);
        await productService.deleteProductImage(productId, id);
      } else {
        console.log(`Удаление локального изображения: ${id}`);
        // Если это локальное изображение с временным URL, освобождаем ресурсы
        if (image.url && image.url.startsWith('blob:')) {
          URL.revokeObjectURL(image.url);
        }
      }
      
      const updatedImages = images.filter(image => image.id !== id);
      
      // Если удалили основное изображение, делаем первое из оставшихся основным
      if (image.is_primary && updatedImages.length > 0 && !updatedImages.some(img => img.is_primary)) {
        const firstImage = updatedImages[0];
        
        if (productId && !firstImage.file) {
          console.log(`Установка нового основного изображения: ${firstImage.id}`);
          await productService.updateProductImage(productId, firstImage.id, { is_primary: true });
        }
        
        updatedImages[0] = { ...firstImage, is_primary: true };
      }
      
      console.log('Обновленный список изображений:', updatedImages);
      setImages(updatedImages);
    } catch (err) {
      console.error('Ошибка при удалении изображения:', err);
      if (err.response) {
        console.error('Данные ответа:', err.response.data);
        console.error('Статус ответа:', err.response.status);
      }
      setError('Не удалось удалить изображение. Пожалуйста, попробуйте снова.');
    }
  };

  const handleSetPrimary = async (id) => {
    try {
      console.log(`Установка изображения ${id} как основного`);
      
      // Обновляем на сервере только если продукт уже существует и изображение уже загружено
      if (productId) {
        const image = images.find(img => img.id === id);
        if (image && !image.file) {
          await productService.updateProductImage(productId, id, { is_primary: true });
        }
      }
      
      // Обновляем локальное состояние
      const updatedImages = images.map(image => ({
        ...image,
        is_primary: image.id === id
      }));
      
      console.log('Обновленный список изображений:', updatedImages);
      setImages(updatedImages);
    } catch (err) {
      console.error('Ошибка при установке основного изображения:', err);
      if (err.response) {
        console.error('Данные ответа:', err.response.data);
        console.error('Статус ответа:', err.response.status);
      }
      setError('Не удалось установить основное изображение. Пожалуйста, попробуйте снова.');
    }
  };

  return (
    <div className="mt-6">
      <h2 className="text-lg font-medium text-gray-900 mb-4">Изображения товара</h2>
      
      {error && (
        <div className="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
          <span className="block sm:inline">{error}</span>
        </div>
      )}
      
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {images.map((image) => {
          console.log(`Отображение изображения:`, {
            id: image.id,
            url: image.url,
            image_url: image.image_url,
            is_primary: image.is_primary,
            isFile: !!image.file
          });
          
          return (
            <div key={image.id} className="relative group">
              <div className={`aspect-square rounded-md overflow-hidden border-2 ${image.is_primary ? 'border-indigo-500' : 'border-gray-200'}`}>
                <img
                  src={image.url || image.image_url}
                  alt="Product"
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    console.error(`Ошибка загрузки изображения:`, {
                      src: e.currentTarget.src,
                      imageData: {
                        id: image.id,
                        url: image.url,
                        image_url: image.image_url
                      }
                    });
                    e.currentTarget.src = '/placeholder-image.jpg'; // Запасное изображение
                  }}
                />
                {image.isUploading && (
                  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
                  </div>
                )}
              </div>
              
              <div className="absolute top-2 right-2 flex space-x-1">
                {!image.is_primary && (
                  <button
                    type="button"
                    onClick={() => handleSetPrimary(image.id)}
                    className="bg-white p-1 rounded-full shadow hover:bg-gray-100 focus:outline-none"
                    title="Сделать основным"
                  >
                    <Check className="h-4 w-4 text-green-600" />
                  </button>
                )}
                
                <button
                  type="button"
                  onClick={() => handleRemoveImage(image.id)}
                  className="bg-white p-1 rounded-full shadow hover:bg-gray-100 focus:outline-none"
                  title="Удалить"
                >
                  <X className="h-4 w-4 text-red-600" />
                </button>
              </div>
              
              {image.is_primary && (
                <div className="absolute bottom-2 left-2 bg-indigo-500 text-white text-xs px-2 py-1 rounded">
                  Основное
                </div>
              )}
            </div>
          );
        })}
        
        <div className="aspect-square rounded-md border-2 border-dashed border-gray-300 flex flex-col items-center justify-center p-4 hover:border-indigo-500 transition-colors relative">
          <Upload className="h-8 w-8 text-gray-400 mb-2" />
          <p className="text-sm text-gray-500 text-center mb-2">Перетащите файлы или нажмите для загрузки</p>
          <label className="w-full h-full absolute inset-0 cursor-pointer">
            <input
              type="file"
              multiple
              accept="image/*"
              onChange={handleFileChange}
              className="hidden"
            />
          </label>
        </div>
      </div>
    </div>
  );
};

export default ProductImageUploader; 