'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { fetchProduct, updateProduct, deleteProduct, Product, ApiResponse } from '@/lib/api';
import { fetchCategories, Category } from '@/lib/catalog-admin';
import ProductForm from '@/components/admin/ProductForm';

export default function EditProductPage({ params }: { params: { id: string } }) {
  const router = useRouter();
  const productId = parseInt(params.id);
  
  const [product, setProduct] = useState<Product | null>(null);
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadingCategories, setLoadingCategories] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Загрузка данных товара
  useEffect(() => {
    const loadProduct = async () => {
      try {
        setLoading(true);
        const response = await fetchProduct(productId);
        
        if (response.success && response.data) {
          setProduct(response.data);
        } else {
          throw new Error(response.error || 'Не удалось загрузить товар');
        }
      } catch (err) {
        console.error('Ошибка при загрузке товара:', err);
        setError('Не удалось загрузить товар');
      } finally {
        setLoading(false);
      }
    };

    if (productId) {
      loadProduct();
    }
  }, [productId]);

  // Загрузка категорий
  useEffect(() => {
    const loadCategories = async () => {
      try {
        setLoadingCategories(true);
        const response = await fetchCategories();
        
        if (response.data && Array.isArray(response.data)) {
          setCategories(response.data);
        }
      } catch (err) {
        console.error('Ошибка при загрузке категорий:', err);
      } finally {
        setLoadingCategories(false);
      }
    };

    loadCategories();
  }, []);

  // Обработчик сохранения товара
  const handleSubmit = async (formData: Partial<Product>) => {
    try {
      setSaving(true);
      
      // Подготавливаем данные для обновления
      const updateData: Partial<Product> = {
        name: formData.name,
        slug: formData.slug || undefined,
        description: formData.description,
        price: formData.price,
        discount_price: formData.discount_price,
        is_active: formData.is_active,
        category_id: formData.category_id ? parseInt(formData.category_id.toString()) : undefined,
        collection_id: formData.collection_id ? parseInt(formData.collection_id.toString()) : undefined,
        care_instructions: formData.care_instructions
      };
      
      console.log('Отправляем данные для обновления:', updateData);
      
      const response = await updateProduct(productId, updateData);
      
      if (response.success) {
        console.log('Товар успешно обновлен');
        router.push('/admin/products');
      } else {
        throw new Error(`Ошибка обновления: ${response.error}`);
      }
    } catch (err) {
      console.error('Ошибка при сохранении товара:', err);
      setError('Не удалось сохранить товар');
    } finally {
      setSaving(false);
    }
  };

  // Обработчик удаления товара
  const handleDelete = async () => {
    if (window.confirm('Вы уверены, что хотите удалить этот товар?')) {
      try {
        setSaving(true);
        const response = await deleteProduct(productId);
        if (response.success) {
          router.push('/admin/products');
        }
      } catch (err) {
        console.error('Ошибка при удалении товара:', err);
        setError('Не удалось удалить товар');
      } finally {
        setSaving(false);
      }
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          <Link href="/admin/products" className="mr-4">
            <ArrowLeft className="h-6 w-6 text-gray-500 hover:text-gray-700" />
          </Link>
          <h1 className="text-2xl font-bold">
            {loading ? 'Загрузка...' : `Редактирование: ${product?.name}`}
          </h1>
        </div>
      </div>

      {error && (
        <div className="bg-red-50 border-l-4 border-red-400 p-4">
          <div className="flex">
            <div className="ml-3">
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        </div>
      )}

      {loading || loadingCategories ? (
        <div className="flex justify-center p-8">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
        </div>
      ) : product ? (
        <ProductForm
          initialData={product}
          categories={categories}
          onSubmit={handleSubmit}
          onDelete={handleDelete}
          isLoading={saving}
        />
      ) : (
        <div className="text-center py-8">
          <p className="text-red-500">Продукт не найден</p>
        </div>
      )}
    </div>
  );
} 