import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { Save, X } from 'lucide-react';
import { Product, ProductVariant, Category, Collection, ProductImage } from '../../services/catalog';
import { productService, categoryService, collectionService } from '../../services/catalog';
import ProductImageUploader, { ProductImageWithFile } from './ProductImageUploader';
import ProductVariantManager from './ProductVariantManager';

interface ProductFormProps {
  product?: Product;
  onSuccess?: () => void;
}

const ProductForm: React.FC<ProductFormProps> = ({ product, onSuccess }) => {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [images, setImages] = useState<ProductImageWithFile[]>([]);
  const [variants, setVariants] = useState<ProductVariant[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [collections, setCollections] = useState<Collection[]>([]);
  const [formData, setFormData] = useState({
    name: '',
    slug: '',
    description: '',
    category_id: '',
    collection_id: '',
    is_active: true
  });
  const [autoGenerateSlug, setAutoGenerateSlug] = useState(true);

  // Загрузка категорий и коллекций при монтировании компонента
  useEffect(() => {
    const fetchData = async () => {
      try {
        const [categoriesData, collectionsData] = await Promise.all([
          categoryService.getCategories(),
          collectionService.getCollections()
        ]);
        setCategories(categoriesData);
        setCollections(collectionsData);
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err);
        setError('Не удалось загрузить данные категорий и коллекций.');
      }
    };

    fetchData();
    
    // Если передан продукт, заполняем форму его данными
    if (product) {
      setFormData({
        name: product.name || '',
        slug: product.slug || '',
        description: product.description || '',
        category_id: product.category_id ? String(product.category_id) : '',
        collection_id: product.collection_id ? String(product.collection_id) : '',
        is_active: typeof product.is_active === 'boolean' ? product.is_active : true
      });
      setAutoGenerateSlug(false);
      
      // Загружаем изображения
      if (product.images && Array.isArray(product.images)) {
        const productImages: ProductImageWithFile[] = product.images.map(img => ({
          id: img.id,
          url: img.url,
          is_primary: img.is_primary,
          product_id: img.product_id
        }));
        setImages(productImages);
      }
      
      // Загружаем варианты
      if (product.variants && Array.isArray(product.variants)) {
        setVariants(product.variants);
      }
    }
  }, [product]);

  // Автоматическая генерация slug при изменении названия товара
  useEffect(() => {
    if (autoGenerateSlug && formData.name) {
      setFormData(prev => ({
        ...prev,
        slug: generateSlug(formData.name)
      }));
    }
  }, [formData.name, autoGenerateSlug]);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value
    });

    // Если пользователь изменяет slug вручную, отключаем автогенерацию
    if (name === 'slug') {
      setAutoGenerateSlug(false);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!formData.name || !formData.category_id || variants.length === 0) {
      setError('Пожалуйста, заполните все обязательные поля и добавьте хотя бы один вариант товара.');
      return;
    }
    
    try {
      setLoading(true);
      setError('');
      
      // Используем введенный slug или генерируем новый, если поле пустое
      const slug = formData.slug || generateSlug(formData.name);
      
      // Подготавливаем данные продукта
      const productData = {
        name: formData.name,
        slug,
        description: formData.description,
        category_id: parseInt(formData.category_id, 10),
        collection_id: formData.collection_id ? parseInt(formData.collection_id, 10) : null,
        is_active: formData.is_active
      };
      
      console.log('Отправляемые данные продукта:', productData);
      
      let productId: number;
      
      if (product) {
        // Обновляем существующий продукт
        console.log(`Обновление продукта с ID: ${product.id}`);
        const updatedProduct = await productService.updateProduct(product.id, productData);
        console.log('Обновленный продукт:', updatedProduct);
        productId = updatedProduct.id;
      } else {
        // Создаем новый продукт
        console.log('Создание нового продукта');
        const newProduct = await productService.createProduct(productData);
        console.log('Созданный продукт:', newProduct);
        productId = newProduct.id;
      }
      
      // Загружаем изображения
      console.log(`Загрузка ${images.length} изображений для продукта ${productId}`);
      
      // Используем Promise.all для параллельной загрузки изображений
      const imagePromises = images.map(async (image) => {
        try {
          if (image.file) {
            // Загружаем новое изображение
            console.log(`Загрузка нового изображения: ${image.file.name}`);
            const uploadedImage = await productService.uploadProductImage(productId, image.file, image.is_primary);
            console.log('Загруженное изображение:', uploadedImage);
            return uploadedImage;
          } else if (image.id && product) {
            // Обновляем существующее изображение
            console.log(`Обновление существующего изображения с ID: ${image.id}`);
            const updatedImage = await productService.updateProductImage(productId, image.id, { is_primary: image.is_primary });
            console.log('Обновленное изображение:', updatedImage);
            return updatedImage;
          }
          return null;
        } catch (imgError) {
          console.error('Ошибка при обработке изображения:', imgError);
          if (imgError.response) {
            console.error('Данные ответа:', imgError.response.data);
            console.error('Статус ответа:', imgError.response.status);
          }
          return null;
        }
      });
      
      const uploadedImages = await Promise.all(imagePromises);
      console.log('Все изображения обработаны:', uploadedImages.filter(Boolean));
      
      // Обрабатываем варианты товара
      if (product) {
        // Для существующего продукта варианты уже обработаны через API в компоненте ProductVariantManager
        console.log('Варианты для существующего продукта уже обработаны');
      } else {
        // Для нового продукта создаем варианты
        console.log(`Создание ${variants.length} вариантов для нового продукта ${productId}`);
        
        const variantPromises = variants.map(async (variant) => {
          try {
            console.log('Отправка данных варианта:', variant);
            // Явно указываем все поля, чтобы избежать лишних данных
            const variantData = {
              name: variant.name,
              sku: variant.sku,
              price: Number(variant.price), // Убедимся, что это число
              discount_price: variant.discount_price ? Number(variant.discount_price) : null,
              stock: Number(variant.stock),
              is_active: Boolean(variant.is_active || true)
            };
            
            const newVariant = await productService.addProductVariant(productId, variantData);
            console.log('Созданный вариант:', newVariant);
            return newVariant;
          } catch (varError) {
            console.error('Ошибка при создании варианта:', varError);
            if (varError.response) {
              console.error('Ответ сервера:', varError.response.data);
              console.error('Статус ответа:', varError.response.status);
            }
            return null;
          }
        });
        
        const createdVariants = await Promise.all(variantPromises);
        console.log('Все варианты обработаны:', createdVariants.filter(Boolean));
      }
      
      // Вызываем колбэк успешного завершения или перенаправляем на страницу списка товаров
      if (onSuccess) {
        onSuccess();
      } else {
        router.push('/admin/products');
      }
    } catch (err) {
      console.error('Ошибка при сохранении товара:', err);
      if (err.response) {
        console.error('Ответ сервера:', err.response.data);
        console.error('Статус ответа:', err.response.status);
      }
      setError('Не удалось сохранить товар. Пожалуйста, проверьте введенные данные и попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  const generateSlug = (name) => {
    return name
      .toLowerCase()
      .replace(/[^\w\s-]/g, '')
      .replace(/[\s_-]+/g, '-')
      .replace(/^-+|-+$/g, '');
  };

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <form onSubmit={handleSubmit}>
        {error && (
          <div className="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <strong className="font-bold">Ошибка!</strong>
            <span className="block sm:inline"> {error}</span>
          </div>
        )}
        
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          <div>
            <label htmlFor="name" className="block text-sm font-medium text-gray-700">Название товара *</label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              required
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
            />
          </div>
          
          <div>
            <label htmlFor="slug" className="block text-sm font-medium text-gray-700">
              URL-адрес (slug)
              <span className="ml-1 text-xs text-gray-500">
                {autoGenerateSlug ? '(генерируется автоматически)' : ''}
              </span>
            </label>
            <div className="mt-1 flex rounded-md shadow-sm">
              <input
                type="text"
                id="slug"
                name="slug"
                value={formData.slug}
                onChange={handleChange}
                placeholder="url-adres-tovara"
                className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
              />
            </div>
            <div className="mt-1">
              <label className="inline-flex items-center text-sm text-gray-500">
                <input
                  type="checkbox"
                  checked={autoGenerateSlug}
                  onChange={() => setAutoGenerateSlug(!autoGenerateSlug)}
                  className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mr-2"
                />
                Генерировать автоматически
              </label>
            </div>
          </div>
          
          <div>
            <label htmlFor="category_id" className="block text-sm font-medium text-gray-700">Категория *</label>
            <select
              id="category_id"
              name="category_id"
              value={formData.category_id}
              onChange={handleChange}
              required
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
            >
              <option value="">Выберите категорию</option>
              {categories.map(category => (
                <option key={category.id} value={category.id}>{category.name}</option>
              ))}
            </select>
          </div>
          
          <div>
            <label htmlFor="collection_id" className="block text-sm font-medium text-gray-700">Коллекция</label>
            <select
              id="collection_id"
              name="collection_id"
              value={formData.collection_id}
              onChange={handleChange}
              className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
            >
              <option value="">Выберите коллекцию</option>
              {collections.map(collection => (
                <option key={collection.id} value={collection.id}>{collection.name}</option>
              ))}
            </select>
          </div>
          
          <div>
            <label htmlFor="is_active" className="flex items-center">
              <input
                type="checkbox"
                id="is_active"
                name="is_active"
                checked={formData.is_active}
                onChange={handleChange}
                className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
              />
              <span className="ml-2 text-sm text-gray-700">Активный товар</span>
            </label>
          </div>
        </div>
        
        <div className="mt-6">
          <label htmlFor="description" className="block text-sm font-medium text-gray-700">Описание</label>
          <textarea
            id="description"
            name="description"
            value={formData.description}
            onChange={handleChange}
            rows={4}
            className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
          />
        </div>
        
        <ProductImageUploader 
          images={images} 
          setImages={setImages} 
          productId={product?.id} 
        />
        
        <ProductVariantManager 
          variants={variants} 
          setVariants={setVariants} 
          productId={product?.id} 
        />
        
        <div className="mt-8 flex justify-end space-x-3">
          <button
            type="button"
            onClick={() => router.push('/admin/products')}
            className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            Отмена
          </button>
          <button
            type="submit"
            disabled={loading}
            className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            {loading ? 'Сохранение...' : product ? 'Обновить товар' : 'Создать товар'}
          </button>
        </div>
      </form>
    </div>
  );
};

export default ProductForm; 