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

// Компонент для загрузки изображений
const ImageUploader = ({ images, setImages }) => {
  const handleImageUpload = (e) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;

    // Создаем временные объекты изображений для предпросмотра
    const newImages = files.map(file => {
      if (!(file instanceof File)) {
        console.error('Объект не является файлом:', file);
        return null;
      }
      
      return {
        id: Date.now() + Math.random().toString(36).substring(2, 9),
        url: URL.createObjectURL(file),
        file,
        isPrimary: images.length === 0 // Первое изображение будет основным
      };
    }).filter(Boolean); // Удаляем null значения

    setImages([...images, ...newImages]);
  };

  const handleRemoveImage = (id) => {
    const updatedImages = images.filter(image => image.id !== id);
    
    // Если удалили основное изображение, делаем первое в списке основным
    if (updatedImages.length > 0 && !updatedImages.some(img => img.isPrimary)) {
      updatedImages[0].isPrimary = true;
    }
    
    setImages(updatedImages);
  };

  const handleSetPrimary = (id) => {
    const updatedImages = images.map(image => ({
      ...image,
      isPrimary: image.id === id
    }));
    setImages(updatedImages);
  };

  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" />
            <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)}
                className={`p-1 rounded-full ${image.isPrimary ? 'bg-green-500' : 'bg-white'} text-black mr-2`}
                title={image.isPrimary ? "Основное изображение" : "Сделать основным"}
              >
                ★
              </button>
              <button 
                onClick={() => handleRemoveImage(image.id)}
                className="p-1 rounded-full bg-red-500 text-white"
                title="Удалить"
              >
                <Trash className="h-4 w-4" />
              </button>
            </div>
            {image.isPrimary && (
              <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">
          <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 }) => {
  const [newVariant, setNewVariant] = useState({
    color: '',
    size: '',
    sku: '',
    price: '',
    stock: ''
  });

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

    const variant = {
      id: Date.now(),
      color: newVariant.color,
      size: newVariant.size,
      sku: newVariant.sku,
      price: parseFloat(newVariant.price),
      stock: parseInt(newVariant.stock, 10)
    };

    setVariants([...variants, variant]);
    setNewVariant({
      color: '',
      size: '',
      sku: '',
      price: '',
      stock: ''
    });
  };

  const handleRemoveVariant = (id) => {
    setVariants(variants.filter(variant => variant.id !== id));
  };

  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 CreateProductPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [images, setImages] = useState([]);
  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 fetchCategories = async () => {
      try {
        const data = await categoryService.getCategories();
        setCategories(data);
      } catch (err) {
        console.error('Ошибка при загрузке категорий:', err);
        setError('Не удалось загрузить категории. Пожалуйста, попробуйте позже.');
      }
    };

    fetchCategories();
  }, []);

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

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

    try {
      // Создаем базовый продукт
      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: generateSlug(formData.name)
      };

      // Отправляем данные на сервер
      const product = await productService.createProduct(productData);
      
      // Загружаем изображения
      for (const image of images) {
        await productService.uploadProductImage(
          product.id,
          image.file,
          image.isPrimary
        );
      }
      
      // Добавляем варианты
      for (const variant of variants) {
        await productService.addProductVariant(product.id, {
          sku: variant.sku,
          size: variant.size,
          color: variant.color,
          price: variant.price,
          stock: variant.stock
        });
      }
      
      // После успешного создания перенаправляем на страницу товаров
      router.push('/admin/products');
    } catch (error) {
      console.error('Ошибка при создании товара:', error);
      setError('Произошла ошибка при создании товара. Пожалуйста, проверьте введенные данные и попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  // Генерация slug из названия
  const generateSlug = (name) => {
    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, ''); // Удаляем дефисы в начале и конце
  };

  return (
    <AdminLayout title="Добавление товара">
      <form onSubmit={handleSubmit}>
        <div className="mb-6 flex justify-between items-center">
          <h2 className="text-xl font-semibold text-gray-800">Новый товар</h2>
          <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={loading}
              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" />
              {loading ? 'Сохранение...' : 'Сохранить'}
            </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>

            <ImageUploader images={images} setImages={setImages} />
            <VariantManager variants={variants} setVariants={setVariants} />
          </div>
        </div>
      </form>
    </AdminLayout>
  );
} 