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';

// Компонент для загрузки изображений
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(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(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(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({
    color: '',
    size: '',
    sku: '',
    price: '',
    stock: ''
  });

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

    try {
      // Создаем вариант на сервере
      const variant = await productService.addProductVariant(productId, {
        sku: newVariant.sku,
        size: newVariant.size,
        color: newVariant.color,
        price: parseFloat(newVariant.price),
        stock: parseInt(newVariant.stock, 10)
      });

      // Добавляем вариант в локальное состояние
      setVariants([...variants, variant]);
      
      // Сбрасываем форму
      setNewVariant({
        color: '',
        size: '',
        sku: '',
        price: '',
        stock: ''
      });
    } catch (error) {
      console.error('Ошибка при добавлении варианта:', error);
      alert('Не удалось добавить вариант товара');
    }
  };

  const handleRemoveVariant = async (id) => {
    try {
      // Удаляем вариант на сервере
      await productService.deleteProductVariant(id);
      
      // Обновляем локальное состояние
      setVariants(variants.filter(variant => variant.id !== id));
    } catch (error) {
      console.error('Ошибка при удалении варианта:', error);
      alert('Не удалось удалить вариант товара');
    }
  };

  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>
      <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.color}</td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{variant.size}</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.stock}</td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button
                    type="button"
                    onClick={() => handleRemoveVariant(variant.id)}
                    className="text-red-600 hover:text-red-900"
                  >
                    <Trash className="h-4 w-4" />
                  </button>
                </td>
              </tr>
            ))}
            <tr>
              <td className="px-6 py-4 whitespace-nowrap">
                <input
                  type="text"
                  name="color"
                  value={newVariant.color}
                  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="size"
                  value={newVariant.size}
                  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="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">
                <button
                  type="button"
                  onClick={handleAddVariant}
                  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"
                >
                  <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 [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [product, setProduct] = useState<Product | null>(null);
  const [images, setImages] = useState<ProductImage[]>([]);
  const [variants, setVariants] = useState<ProductVariant[]>([]);
  const [categories, setCategories] = useState<Category[]>([]);
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    category_id: '',
    sku: '',
    price: '',
    stock: '',
    is_active: true
  });

  // Загрузка данных продукта и категорий при монтировании компонента
  useEffect(() => {
    const fetchData = async () => {
      if (!id) return;
      
      try {
        setLoading(true);
        
        // Загружаем категории
        const categoriesData = await categoryService.getCategories();
        setCategories(categoriesData);
        
        // Загружаем данные продукта
        const productData = await productService.getProductById(Number(id));
        console.log('Полученные данные продукта:', productData);
        
        if (!productData || !productData.id) {
          console.error('Продукт не найден или данные некорректны:', productData);
          setError('Продукт не найден или данные некорректны');
          setLoading(false);
          return;
        }
        
        setProduct(productData);
        
        // Заполняем форму данными продукта
        setFormData({
          name: productData.name || '',
          description: productData.description || '',
          category_id: productData.category_id ? String(productData.category_id) : '',
          sku: productData.sku || '',
          price: productData.price !== undefined ? String(productData.price) : '',
          stock: productData.stock !== undefined ? String(productData.stock) : '',
          is_active: typeof productData.is_active === 'boolean' ? productData.is_active : true
        });
        
        // Загружаем изображения и варианты
        if (productData.images && Array.isArray(productData.images)) {
          setImages(productData.images);
        } else {
          console.log('Изображения отсутствуют или не являются массивом');
          setImages([]);
        }
        
        if (productData.variants && Array.isArray(productData.variants)) {
          setVariants(productData.variants);
        } else {
          console.log('Варианты отсутствуют или не являются массивом');
          setVariants([]);
        }
        
        setError('');
      } catch (err) {
        console.error('Ошибка при загрузке данных:', err);
        setError('Не удалось загрузить данные продукта. Пожалуйста, попробуйте позже.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [id]);

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSaving(true);
    setError('');

    try {
      if (!product) {
        console.error('Продукт не найден');
        setError('Продукт не найден');
        setSaving(false);
        return;
      }
      
      // Проверяем и логируем данные перед отправкой
      console.log('Данные формы перед отправкой:', formData);
      
      // Генерируем slug, если он отсутствует
      const slug = product.slug && product.slug.trim() !== '' 
        ? product.slug 
        : generateSlug(formData.name);
      
      // Обновляем данные продукта
      const productData = {
        name: formData.name,
        description: formData.description,
        category_id: parseInt(formData.category_id, 10),
        sku: formData.sku,
        price: parseFloat(formData.price),
        stock: parseInt(formData.stock, 10),
        is_active: formData.is_active,
        slug: slug
      };
      
      console.log('Данные для отправки на сервер:', productData);

      // Отправляем данные на сервер
      const updatedProduct = await productService.updateProduct(product.id, productData);
      console.log('Ответ сервера:', updatedProduct);
      
      // После успешного обновления перенаправляем на страницу товаров
      router.push('/admin/products');
    } catch (error) {
      console.error('Ошибка при обновлении товара:', error);
      setError('Произошла ошибка при обновлении товара. Пожалуйста, проверьте введенные данные и попробуйте снова.');
    } finally {
      setSaving(false);
    }
  };

  // Функция для генерации slug из названия
  const generateSlug = (name: string): string => {
    return name
      .toLowerCase()
      .replace(/[^\w\sа-яё-]/g, '') // Удаляем специальные символы, но оставляем кириллицу и дефисы
      .replace(/\s+/g, '-') // Заменяем пробелы на дефисы
      .replace(/[а-яё]/g, char => { // Транслитерация кириллицы
        const translitMap = {
          'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 
          'ж': 'zh', 'з': 'z', 'и': 'i', 'й': 'y', 'к': 'k', 'л': 'l', 'м': 'm', 
          'н': 'n', 'о': 'o', 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 
          'ф': 'f', 'х': 'h', 'ц': 'ts', 'ч': 'ch', 'ш': 'sh', 'щ': 'sch', 'ъ': '', 
          'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', 'я': 'ya'
        };
        return translitMap[char] || char;
      })
      .replace(/--+/g, '-') // Заменяем множественные дефисы на один
      .replace(/^-|-$/g, ''); // Удаляем дефисы в начале и конце
  };

  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 (!product && !loading) {
    return (
      <AdminLayout title="Товар не найден">
        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-red-700">Товар не найден</p>
            </div>
          </div>
        </div>
        <button
          onClick={() => router.push('/admin/products')}
          className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
        >
          Вернуться к списку товаров
        </button>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout title={`Редактирование: ${product?.name}`}>
      <form onSubmit={handleSubmit}>
        <div className="mb-6 flex justify-between items-center">
          <div className="flex items-center">
            <button
              type="button"
              onClick={() => router.push('/admin/products')}
              className="mr-4 text-gray-500 hover:text-gray-700"
            >
              <ArrowLeft className="h-5 w-5" />
            </button>
            <h2 className="text-xl font-semibold text-gray-800">Редактирование товара</h2>
          </div>
          <div className="flex space-x-2">
            <button
              type="button"
              onClick={() => router.push('/admin/products')}
              className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <X className="h-5 w-5 mr-2" />
              Отмена
            </button>
            <button
              type="submit"
              disabled={saving}
              className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            >
              <Save className="h-5 w-5 mr-2" />
              {saving ? 'Сохранение...' : 'Сохранить'}
            </button>
          </div>
        </div>

        {error && (
          <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
            <div className="flex">
              <div className="flex-shrink-0">
                <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                </svg>
              </div>
              <div className="ml-3">
                <p className="text-sm text-red-700">{error}</p>
              </div>
            </div>
          </div>
        )}

        <div className="bg-white rounded-lg shadow overflow-hidden">
          <div className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Название товара</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  required
                  value={formData.name}
                  onChange={handleChange}
                  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>
                <label htmlFor="category_id" className="block text-sm font-medium text-gray-700 mb-1">Категория</label>
                <select
                  id="category_id"
                  name="category_id"
                  required
                  value={formData.category_id}
                  onChange={handleChange}
                  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"
                >
                  <option value="">Выберите категорию</option>
                  {categories.map(category => (
                    <option key={category.id} value={category.id}>
                      {category.name}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label htmlFor="sku" className="block text-sm font-medium text-gray-700 mb-1">Артикул</label>
                <input
                  type="text"
                  id="sku"
                  name="sku"
                  required
                  value={formData.sku}
                  onChange={handleChange}
                  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>
                <label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">Цена</label>
                <input
                  type="number"
                  id="price"
                  name="price"
                  required
                  min="0"
                  step="0.01"
                  value={formData.price}
                  onChange={handleChange}
                  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>
                <label htmlFor="stock" className="block text-sm font-medium text-gray-700 mb-1">Количество на складе</label>
                <input
                  type="number"
                  id="stock"
                  name="stock"
                  required
                  min="0"
                  value={formData.stock}
                  onChange={handleChange}
                  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>
                <div className="flex items-center h-full">
                  <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"
                  />
                  <label htmlFor="is_active" className="ml-2 block text-sm text-gray-700">
                    Активен (отображается на сайте)
                  </label>
                </div>
              </div>
              <div className="md:col-span-2">
                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">Описание</label>
                <textarea
                  id="description"
                  name="description"
                  rows={4}
                  required
                  value={formData.description}
                  onChange={handleChange}
                  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>

            {product && (
              <>
                <ImageUploader images={images} setImages={setImages} productId={product.id} />
                <VariantManager variants={variants} setVariants={setVariants} productId={product.id} />
              </>
            )}
          </div>
        </div>
      </form>
    </AdminLayout>
  );
} 