import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { Save, X, Plus, Trash, ArrowLeft } from 'lucide-react';
import AdminLayout from '../../../components/admin/AdminLayout';
import { productService, categoryService, Category, Product, ProductVariant, ProductImage } from '../../../services/catalog';
import ProductForm from '../../../components/admin/ProductForm';

// Расширяем интерфейс ProductImage для поддержки загрузки файлов
interface ProductImageWithFile extends ProductImage {
  file?: File;
  image_url?: string;
}

// Расширяем интерфейс для формы
interface ProductFormData {
  name: string;
  description: string;
  category_id: string;
  collection_id: string;
  is_active: boolean;
}

// Компонент для загрузки изображений
const ImageUploader = ({ images, setImages, productId }) => {
  const [uploading, setUploading] = useState(false);

  const handleImageUpload = async (e) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;

    setUploading(true);

    try {
      for (const file of files) {
        if (!(file instanceof File)) {
          console.error('Объект не является файлом:', file);
          continue;
        }

        // Создаем временный объект для предпросмотра
        const tempImage = {
          id: Date.now() + Math.random().toString(36).substring(2, 9),
          url: URL.createObjectURL(file),
          is_primary: images.length === 0, // Первое изображение будет основным
          product_id: productId,
          isUploading: true
        };

        setImages(prev => [...prev, tempImage]);

        // Загружаем изображение на сервер
        const uploadedImage = await productService.uploadProductImage(
          productId,
          file,
          tempImage.is_primary
        );

        // Обновляем список изображений, заменяя временное на загруженное
        setImages(prev => prev.map(img => 
          img.id === tempImage.id ? { ...uploadedImage, url: uploadedImage.url } : img
        ));
      }
    } catch (error) {
      console.error('Ошибка при загрузке изображений:', error);
      alert('Не удалось загрузить одно или несколько изображений');
    } finally {
      setUploading(false);
    }
  };

  const handleRemoveImage = async (id) => {
    try {
      // Проверяем, является ли изображение временным или уже загруженным
      const image = images.find(img => img.id === id);
      
      if (!image.isUploading) {
        // Если изображение уже загружено, удаляем его с сервера
        await productService.deleteProductImage(productId, id);
      }
      
      const updatedImages = images.filter(image => image.id !== id);
      
      // Если удалили основное изображение, делаем первое в списке основным
      if (updatedImages.length > 0 && !updatedImages.some(img => img.is_primary)) {
        const firstImage = updatedImages[0];
        await productService.updateProductImage(productId, firstImage.id, { is_primary: true });
        updatedImages[0] = { ...firstImage, is_primary: true };
      }
      
      setImages(updatedImages);
    } catch (error) {
      console.error('Ошибка при удалении изображения:', error);
      alert('Не удалось удалить изображение');
    }
  };

  const handleSetPrimary = async (id) => {
    try {
      // Обновляем на сервере
      await productService.updateProductImage(productId, id, { is_primary: true });
      
      // Обновляем локальное состояние
      const updatedImages = images.map(image => ({
        ...image,
        is_primary: image.id === id
      }));
      
      setImages(updatedImages);
    } catch (error) {
      console.error('Ошибка при установке основного изображения:', error);
      alert('Не удалось установить основное изображение');
    }
  };

  return (
    <div className="mt-4">
      <label className="block text-sm font-medium text-gray-700 mb-2">Изображения товара</label>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {images.map(image => (
          <div key={image.id} className="relative border rounded-lg overflow-hidden group">
            <img src={image.url} alt="Product" className="w-full h-32 object-cover" />
            {image.isUploading && (
              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white"></div>
              </div>
            )}
            <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
              <button 
                onClick={() => handleSetPrimary(image.id)}
                disabled={image.is_primary || image.isUploading}
                className={`p-1 rounded-full ${image.is_primary ? 'bg-green-500' : 'bg-white'} text-black mr-2 ${image.isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
                title={image.is_primary ? "Основное изображение" : "Сделать основным"}
              >
                ★
              </button>
              <button 
                onClick={() => handleRemoveImage(image.id)}
                disabled={image.isUploading}
                className={`p-1 rounded-full bg-red-500 text-white ${image.isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
                title="Удалить"
              >
                <Trash className="h-4 w-4" />
              </button>
            </div>
            {image.is_primary && (
              <div className="absolute top-0 left-0 bg-green-500 text-white text-xs px-2 py-1">
                Основное
              </div>
            )}
          </div>
        ))}
        <label className="border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center h-32 cursor-pointer hover:border-indigo-500 transition-colors">
          {uploading ? (
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600"></div>
          ) : (
            <>
              <Plus className="h-8 w-8 text-gray-400" />
              <span className="mt-2 text-sm text-gray-500">Добавить изображение</span>
              <input type="file" className="hidden" accept="image/*" multiple onChange={handleImageUpload} />
            </>
          )}
        </label>
      </div>
      <p className="text-sm text-gray-500 mt-2">Загрузите до 8 изображений товара. Первое изображение будет использоваться как основное.</p>
    </div>
  );
};

// Компонент для вариантов товара
const VariantManager = ({ variants, setVariants, productId }) => {
  const [newVariant, setNewVariant] = useState({
    name: '',
    sku: '',
    price: '',
    discount_price: '',
    stock: ''
  });
  const [editingVariant, setEditingVariant] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleAddVariant = async () => {
    if (!newVariant.name || !newVariant.sku || !newVariant.price || !newVariant.stock) {
      alert('Пожалуйста, заполните все обязательные поля варианта');
      return;
    }

    try {
      setLoading(true);
      setError('');

      const variantData = {
        name: newVariant.name,
        sku: newVariant.sku,
        price: parseFloat(newVariant.price),
        discount_price: newVariant.discount_price ? parseFloat(newVariant.discount_price) : null,
        stock: parseInt(newVariant.stock, 10),
        is_active: true
      };

      if (productId) {
        // Если есть ID продукта, добавляем вариант через API
        const newVariantData = await productService.addProductVariant(productId, variantData);
        setVariants([...variants, newVariantData]);
      } else {
        // Иначе добавляем временный вариант (для новых продуктов)
        const variant = {
          id: Date.now(),
          ...variantData,
          product_id: 0 // Будет заполнено при сохранении
        };
        setVariants([...variants, variant]);
      }
      
      setNewVariant({
        name: '',
        sku: '',
        price: '',
        discount_price: '',
        stock: ''
      });
    } catch (err) {
      console.error('Ошибка при добавлении варианта:', err);
      setError('Не удалось добавить вариант. Пожалуйста, попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  const handleEditVariant = (variant) => {
    setEditingVariant(variant);
    setNewVariant({
      name: variant.name,
      sku: variant.sku,
      price: variant.price.toString(),
      discount_price: variant.discount_price ? variant.discount_price.toString() : '',
      stock: variant.stock.toString()
    });
  };

  const handleUpdateVariant = async () => {
    if (!editingVariant) return;
    
    if (!newVariant.name || !newVariant.sku || !newVariant.price || !newVariant.stock) {
      alert('Пожалуйста, заполните все обязательные поля варианта');
      return;
    }

    try {
      setLoading(true);
      setError('');

      const variantData = {
        name: newVariant.name,
        sku: newVariant.sku,
        price: parseFloat(newVariant.price),
        discount_price: newVariant.discount_price ? parseFloat(newVariant.discount_price) : null,
        stock: parseInt(newVariant.stock, 10),
        is_active: editingVariant.is_active
      };

      if (productId && editingVariant.id) {
        // Если есть ID продукта и ID варианта, обновляем через API
        const updatedVariant = await productService.updateProductVariant(editingVariant.id, variantData);
        setVariants(variants.map(v => v.id === editingVariant.id ? updatedVariant : v));
      } else {
        // Иначе обновляем локально
        setVariants(variants.map(v => v.id === editingVariant.id ? { ...v, ...variantData } : v));
      }
      
      setNewVariant({
        name: '',
        sku: '',
        price: '',
        discount_price: '',
        stock: ''
      });
      setEditingVariant(null);
    } catch (err) {
      console.error('Ошибка при обновлении варианта:', err);
      setError('Не удалось обновить вариант. Пожалуйста, попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  const handleCancelEdit = () => {
    setEditingVariant(null);
    setNewVariant({
      name: '',
      sku: '',
      price: '',
      discount_price: '',
      stock: ''
    });
  };

  const handleRemoveVariant = async (id) => {
    if (!confirm('Вы уверены, что хотите удалить этот вариант?')) {
      return;
    }

    try {
      setLoading(true);
      setError('');
      
      if (productId) {
        // Если есть ID продукта, удаляем через API
        await productService.deleteProductVariant(productId, id);
      }
      
      setVariants(variants.filter(variant => variant.id !== id));
    } catch (err) {
      console.error('Ошибка при удалении варианта:', err);
      setError('Не удалось удалить вариант. Пожалуйста, попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  const handleNewVariantChange = (e) => {
    const { name, value } = e.target;
    setNewVariant({
      ...newVariant,
      [name]: value
    });
  };

  return (
    <div className="mt-6">
      <label className="block text-sm font-medium text-gray-700 mb-2">Варианты товара</label>
      {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="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Артикул</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Цена</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Скидка</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Наличие</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {variants.map(variant => (
              <tr key={variant.id}>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.name}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.sku}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.price}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.discount_price || '-'}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.stock}</td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <div className="flex space-x-2">
                    <button
                      type="button"
                      onClick={() => handleEditVariant(variant)}
                      className="text-indigo-600 hover:text-indigo-900"
                      disabled={loading}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      onClick={() => handleRemoveVariant(variant.id)}
                      className="text-red-600 hover:text-red-900"
                      disabled={loading}
                    >
                      <Trash className="h-4 w-4" />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
            <tr>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="text"
                  name="name"
                  value={newVariant.name}
                  onChange={handleNewVariantChange}
                  placeholder="Название варианта"
                  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"
                />
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="text"
                  name="sku"
                  value={newVariant.sku}
                  onChange={handleNewVariantChange}
                  placeholder="Артикул"
                  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"
                />
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="number"
                  name="price"
                  value={newVariant.price}
                  onChange={handleNewVariantChange}
                  placeholder="Цена"
                  min="0"
                  step="0.01"
                  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"
                />
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="number"
                  name="discount_price"
                  value={newVariant.discount_price}
                  onChange={handleNewVariantChange}
                  placeholder="Скидка (необяз.)"
                  min="0"
                  step="0.01"
                  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"
                />
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="number"
                  name="stock"
                  value={newVariant.stock}
                  onChange={handleNewVariantChange}
                  placeholder="Наличие"
                  min="0"
                  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"
                />
              </td>
              <td className="px-6 py-4 whitespace-nowrap">
                {editingVariant ? (
                  <div className="flex space-x-2">
                    <button
                      type="button"
                      onClick={handleUpdateVariant}
                      disabled={loading}
                      className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      {loading ? 'Сохранение...' : 'Сохранить'}
                    </button>
                    <button
                      type="button"
                      onClick={handleCancelEdit}
                      disabled={loading}
                      className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm leading-4 font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                      Отмена
                    </button>
                  </div>
                ) : (
                  <button
                    type="button"
                    onClick={handleAddVariant}
                    disabled={loading}
                    className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                  >
                    {loading ? (
                      <span className="inline-flex items-center">
                        <svg className="animate-spin -ml-1 mr-1 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Добавление...
                      </span>
                    ) : (
                      <>
                        <Plus className="h-4 w-4 mr-1" />
                        Добавить
                      </>
                    )}
                  </button>
                )}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default function EditProductPage() {
  const router = useRouter();
  const { id } = router.query;
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    if (id) {
      fetchProduct(Number(id));
    }
  }, [id]);

  const fetchProduct = async (productId: number) => {
    try {
      setLoading(true);
      const data = await productService.getProductById(productId);
      setProduct(data);
    } catch (err) {
      console.error('Ошибка при загрузке товара:', err);
      setError('Не удалось загрузить данные товара.');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <AdminLayout title="Редактирование товара">
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
        </div>
      </AdminLayout>
    );
  }

  if (error) {
    return (
      <AdminLayout title="Редактирование товара">
        <div className="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>
          <button 
            onClick={() => router.push('/admin/products')}
            className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"
          >
            Вернуться к списку товаров
          </button>
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout title={product ? `Редактирование: ${product.name}` : "Редактирование товара"}>
      {product && <ProductForm product={product} />}
    </AdminLayout>
  );
} 