import { useState } from 'react';
import { Plus, Edit, Trash } from 'lucide-react';
import { ProductVariant } from '../../services/catalog';
import { productService } from '../../services/catalog';

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

const ProductVariantManager: React.FC<ProductVariantManagerProps> = ({ 
  variants, 
  setVariants, 
  productId 
}) => {
  const [newVariant, setNewVariant] = useState({
    name: '',
    sku: '',
    price: '',
    discount_price: '',
    stock: ''
  });
  const [editingVariant, setEditingVariant] = useState<ProductVariant | null>(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 {
        // Иначе добавляем временный вариант (для новых продуктов)
        setVariants([...variants, { 
          ...variantData, 
          id: Date.now(), // Временный ID
          product_id: 0
        }]);
      }

      // Сбрасываем форму
      setNewVariant({
        name: '',
        sku: '',
        price: '',
        discount_price: '',
        stock: ''
      });
    } catch (err) {
      console.error('Ошибка при добавлении варианта:', err);
      setError('Не удалось добавить вариант. Пожалуйста, попробуйте снова.');
    } finally {
      setLoading(false);
    }
  };

  const handleEditVariant = (variant: ProductVariant) => {
    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
        await productService.updateProductVariant(editingVariant.id, variantData);
      }

      // Обновляем локальное состояние
      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: number) => {
    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">
      <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="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"
                    >
                      <Edit className="h-4 w-4" />
                    </button>
                    <button
                      type="button"
                      onClick={() => handleRemoveVariant(variant.id)}
                      className="text-red-600 hover:text-red-900"
                    >
                      <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}
                      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"
                    >
                      Сохранить
                    </button>
                    <button
                      type="button"
                      onClick={handleCancelEdit}
                      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}
                    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 ProductVariantManager; 