import { useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import { productService, categoryService, Product as ApiProduct, Category, Collection, ProductVariant } from '../../services/catalog';
import { Heart, ShoppingBag, ChevronLeft, ChevronRight, Check } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
// Импортируем статические данные и функции из файла data/products.ts
import { getProductBySlug as getStaticProductBySlug, getSimilarProducts as getStaticSimilarProducts, Product as StaticProduct } from '../../data/products';

// Функция для преобразования статического продукта в формат API продукта
const convertStaticToApiProduct = (staticProduct: StaticProduct): ApiProduct => {
  return {
    id: staticProduct.id,
    name: staticProduct.name,
    slug: staticProduct.slug,
    description: staticProduct.description,
    is_active: true,
    category_id: staticProduct.categoryId,
    collection_id: staticProduct.collectionId || null,
    images: staticProduct.images.map((url, index) => ({
      id: index + 1,
      url,
      is_primary: index === 0,
      product_id: staticProduct.id
    })),
    variants: [
      {
        id: staticProduct.id * 100 + 1,
        name: 'Стандартный',
        sku: `SKU-${staticProduct.id}`,
        price: staticProduct.price,
        discount_price: null,
        stock: staticProduct.inStock ? 10 : 0,
        is_active: true,
        product_id: staticProduct.id
      }
    ],
    category: {
      id: staticProduct.categoryId,
      name: 'Категория', // Заглушка, так как в статических данных нет имени категории
      slug: `category-${staticProduct.categoryId}`,
      parent_id: null,
      is_active: true,
      order: 1
    }
  };
};

interface ProductPageProps {
  product: ApiProduct;
  similarProducts: ApiProduct[];
}

export default function ProductPage({ product, similarProducts }: ProductPageProps) {
  const router = useRouter();
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [isFavorite, setIsFavorite] = useState(false);
  const [quantity, setQuantity] = useState(1);
  const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);
  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(
    product.variants && product.variants.length > 0 ? product.variants[0] : null
  );

  // Если страница еще загружается, показываем заглушку
  if (router.isFallback) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"></div>
      </div>
    );
  }

  // Функция для переключения изображений
  const nextImage = () => {
    if (product.images && product.images.length > 0) {
      setCurrentImageIndex((prev) => (prev === product.images!.length - 1 ? 0 : prev + 1));
    }
  };

  const prevImage = () => {
    if (product.images && product.images.length > 0) {
      setCurrentImageIndex((prev) => (prev === 0 ? product.images!.length - 1 : prev - 1));
    }
  };

  // Функция для добавления/удаления товара из избранного
  const toggleFavorite = () => {
    setIsFavorite(!isFavorite);
  };

  // Функция для изменения количества товара
  const incrementQuantity = () => {
    setQuantity((prev) => prev + 1);
  };

  const decrementQuantity = () => {
    if (quantity > 1) {
      setQuantity((prev) => prev - 1);
    }
  };

  // Функция для выбора варианта товара
  const handleVariantSelect = (variant: ProductVariant) => {
    setSelectedVariant(variant);
  };

  // Функция для добавления товара в корзину
  const addToCart = () => {
    // Здесь будет логика добавления товара в корзину
    const variantInfo = selectedVariant ? ` (вариант: ${selectedVariant.name})` : '';
    alert(`Товар "${product.name}"${variantInfo} добавлен в корзину в количестве ${quantity} шт.`);
  };

  // Функция для форматирования цены
  const formatPrice = (price: number): string => {
    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
  };

  // Получаем текущую цену на основе выбранного варианта
  const currentPrice = selectedVariant ? selectedVariant.price : 
    (product.variants && product.variants.length > 0 ? product.variants[0].price : 0);
  
  const currentDiscountPrice = selectedVariant ? selectedVariant.discount_price : 
    (product.variants && product.variants.length > 0 ? product.variants[0].discount_price : null);

  return (
    <div className="min-h-screen bg-white font-['Arimo']">
      <Head>
        <title>{product.name} | Brand Store</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header />

      <main className="max-w-7xl mx-auto px-4 py-12 md:px-8">
        <div className="mb-8">
          <Link href={product.category ? `/category/${product.category.slug}` : "/category"} className="text-gray-600 hover:text-black transition-colors">
            ← {product.category ? product.category.name : 'Назад к категориям'}
          </Link>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Галерея изображений */}
          <div className="relative">
            <div className="relative aspect-[3/4] overflow-hidden rounded-xl">
              <AnimatePresence mode="wait">
                <motion.div
                  key={currentImageIndex}
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.3 }}
                  className="absolute inset-0"
                >
                  {product.images && product.images.length > 0 ? (
                    <Image
                      src={product.images[currentImageIndex].url}
                      alt={product.name}
                      fill
                      className="object-cover"
                      priority
                      quality={95}
                    />
                  ) : (
                    <div className="w-full h-full bg-gray-200 flex items-center justify-center">
                      <span className="text-gray-500">Нет изображения</span>
                    </div>
                  )}
                </motion.div>
              </AnimatePresence>

              {/* Кнопки навигации по галерее */}
              {product.images && product.images.length > 1 && (
                <>
                  <button
                    onClick={prevImage}
                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/50 hover:bg-white/70 p-3 rounded-full transition-all z-10"
                    aria-label="Предыдущее изображение"
                  >
                    <ChevronLeft className="w-5 h-5 text-black" />
                  </button>
                  <button
                    onClick={nextImage}
                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/50 hover:bg-white/70 p-3 rounded-full transition-all z-10"
                    aria-label="Следующее изображение"
                  >
                    <ChevronRight className="w-5 h-5 text-black" />
                  </button>
                </>
              )}
            </div>

            {/* Миниатюры изображений */}
            {product.images && product.images.length > 1 && (
              <div className="flex mt-4 space-x-2 overflow-x-auto">
                {product.images.map((image, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentImageIndex(index)}
                    className={`relative w-20 h-20 rounded-md overflow-hidden ${
                      index === currentImageIndex ? 'ring-2 ring-black' : 'opacity-70 hover:opacity-100'
                    }`}
                    aria-label={`Изображение ${index + 1}`}
                  >
                    <Image src={image.url} alt={`${product.name} - изображение ${index + 1}`} fill className="object-cover" />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Информация о товаре */}
          <div>
            <motion.h1
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="text-3xl font-bold font-['Playfair_Display']"
            >
              {product.name}
            </motion.h1>

            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.1 }}
              className="text-2xl font-bold mt-4"
            >
              {currentPrice ? (
                <>
                  {formatPrice(currentPrice)} ₽
                  {currentDiscountPrice && (
                    <span className="ml-2 text-sm line-through text-gray-500">
                      {formatPrice(currentDiscountPrice)} ₽
                    </span>
                  )}
                </>
              ) : (
                'Цена по запросу'
              )}
            </motion.p>

            {/* Варианты товара */}
            {product.variants && product.variants.length > 0 && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.5, delay: 0.2 }}
                className="mt-6"
              >
                <h2 className="text-lg font-medium mb-2">Варианты</h2>
                <div className="flex flex-wrap gap-2">
                  {product.variants.map((variant) => (
                    <button
                      key={variant.id}
                      onClick={() => handleVariantSelect(variant)}
                      className={`px-4 py-2 border rounded-md transition-colors ${
                        selectedVariant?.id === variant.id
                          ? 'border-black bg-black text-white'
                          : 'border-gray-300 hover:border-gray-500'
                      }`}
                    >
                      <div className="flex items-center">
                        {selectedVariant?.id === variant.id && <Check className="w-4 h-4 mr-1" />}
                        {variant.name}
                        {variant.stock <= 3 && variant.stock > 0 && (
                          <span className="ml-2 text-xs text-red-500">Осталось {variant.stock} шт.</span>
                        )}
                        {variant.stock === 0 && (
                          <span className="ml-2 text-xs text-red-500">Нет в наличии</span>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              </motion.div>
            )}

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="mt-6"
            >
              <h2 className="text-lg font-medium mb-2">Описание</h2>
              <p className="text-gray-600">{product.description}</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="mt-8"
            >
              <h2 className="text-lg font-medium mb-2">Количество</h2>
              <div className="flex items-center border border-gray-300 rounded-md w-fit">
                <button
                  onClick={decrementQuantity}
                  className="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-colors"
                  aria-label="Уменьшить количество"
                  disabled={quantity <= 1}
                >
                  -
                </button>
                <span className="px-4 py-2 border-l border-r border-gray-300">{quantity}</span>
                <button
                  onClick={incrementQuantity}
                  className="px-4 py-2 text-gray-600 hover:bg-gray-100 transition-colors"
                  aria-label="Увеличить количество"
                >
                  +
                </button>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.5 }}
              className="mt-8 flex flex-col sm:flex-row gap-4"
            >
              <button
                onClick={addToCart}
                className={`flex items-center justify-center gap-2 bg-black text-white px-8 py-3 rounded-md transition-colors ${
                  selectedVariant && selectedVariant.stock === 0 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-800'
                }`}
                disabled={selectedVariant && selectedVariant.stock === 0}
              >
                <ShoppingBag className="w-5 h-5" />
                {selectedVariant && selectedVariant.stock === 0 ? 'Нет в наличии' : 'Добавить в корзину'}
              </button>
              <button
                onClick={toggleFavorite}
                className={`flex items-center justify-center gap-2 px-8 py-3 rounded-md border transition-colors ${
                  isFavorite
                    ? 'border-red-500 text-red-500 hover:bg-red-50'
                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
                }`}
              >
                <Heart className={isFavorite ? 'w-5 h-5 fill-red-500' : 'w-5 h-5'} />
                {isFavorite ? 'В избранном' : 'В избранное'}
              </button>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="mt-8 border-t border-gray-200 pt-8"
            >
              <h2 className="text-lg font-medium mb-2">Категория</h2>
              {product.category && (
                <Link href={`/category/${product.category.slug}`} className="text-gray-600 hover:text-black transition-colors">
                  {product.category.name}
                </Link>
              )}
              
              {product.collection && (
                <div className="mt-4">
                  <h2 className="text-lg font-medium mb-2">Коллекция</h2>
                  <Link href={`/collections/${product.collection.slug}`} className="text-gray-600 hover:text-black transition-colors">
                    {product.collection.name}
                  </Link>
                  {product.collection.description && (
                    <p className="mt-2 text-sm text-gray-500">{product.collection.description}</p>
                  )}
                </div>
              )}
            </motion.div>
          </div>
        </div>

        {/* Похожие товары */}
        {similarProducts.length > 0 && (
          <section className="mt-16">
            <h2 className="text-2xl font-bold mb-8 font-['Playfair_Display']">Похожие товары</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
              {similarProducts.map((similarProduct) => (
                <motion.div
                  key={similarProduct.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: similarProduct.id * 0.05 }}
                  whileHover={{ y: -5, transition: { duration: 0.2 } }}
                >
                  <Link
                    href={`/product/${similarProduct.slug}`}
                    className="block h-full"
                    onMouseEnter={() => setHoveredProduct(similarProduct.id)}
                    onMouseLeave={() => setHoveredProduct(null)}
                  >
                    <div className="relative overflow-hidden rounded-xl">
                      <div className="aspect-[3/4] relative overflow-hidden rounded-xl">
                        {similarProduct.images && similarProduct.images.length > 0 ? (
                          <Image
                            src={
                              hoveredProduct === similarProduct.id && similarProduct.images.length > 1
                                ? similarProduct.images[1].url
                                : similarProduct.images[0].url
                            }
                            alt={similarProduct.name}
                            fill
                            sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
                            className="object-cover transition-all duration-500 group-hover:scale-105"
                          />
                        ) : (
                          <div className="w-full h-full bg-gray-200 flex items-center justify-center">
                            <span className="text-gray-500">Нет изображения</span>
                          </div>
                        )}
                      </div>
                    </div>
                    <div className="mt-4">
                      <h3 className="text-lg font-medium">{similarProduct.name}</h3>
                      {similarProduct.variants && similarProduct.variants.length > 0 ? (
                        <p className="mt-1 text-lg font-bold">
                          {formatPrice(similarProduct.variants[0].price)} ₽
                          {similarProduct.variants[0].discount_price && (
                            <span className="ml-2 text-sm line-through text-gray-500">
                              {formatPrice(similarProduct.variants[0].discount_price)} ₽
                            </span>
                          )}
                        </p>
                      ) : (
                        <p className="mt-1 text-lg font-bold">Цена по запросу</p>
                      )}
                    </div>
                  </Link>
                </motion.div>
              ))}
            </div>
          </section>
        )}
      </main>

      <Footer />
    </div>
  );
}

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
  try {
    const slug = params?.slug as string;
    
    // Получаем данные о продукте через API
    let product;
    let similarProducts = [];
    
    try {
      // Пытаемся получить продукт через API
      product = await productService.getProductBySlug(slug);
      
      // Получаем похожие товары (товары из той же категории)
      similarProducts = await productService.getProducts({
        category_id: product.category_id,
        include_variants: true,
        limit: 4
      });
      
      // Фильтруем, чтобы исключить текущий товар из похожих
      similarProducts = similarProducts.filter(p => p.id !== product.id);
    } catch (error) {
      console.error('Ошибка при получении данных продукта через API:', error);
      
      // Если не удалось получить данные через API, используем статические данные из файла
      const staticProduct = getStaticProductBySlug(slug);
      
      if (!staticProduct) {
        return { notFound: true };
      }
      
      // Преобразуем статический продукт в формат API продукта
      product = convertStaticToApiProduct(staticProduct);
      
      // Получаем похожие товары из статических данных
      const staticSimilarProducts = getStaticSimilarProducts(staticProduct.id);
      similarProducts = staticSimilarProducts.map(convertStaticToApiProduct);
    }
    
    return {
      props: {
        product,
        similarProducts
      }
    };
  } catch (error) {
    console.error('Ошибка при получении данных продукта:', error);
    return {
      notFound: true
    };
  }
}; 