import { useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { Heart } from 'lucide-react';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import { Product, products } from '../../data/products';

export default function NewArrivals() {
  const [hoveredProduct, setHoveredProduct] = useState<number | null>(null);
  const [favorites, setFavorites] = useState<number[]>([]);

  // Фильтруем только новые товары
  const newProducts = products.filter(product => product.isNew);

  // Функция для добавления/удаления товара из избранного
  const toggleFavorite = (id: number, e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setFavorites(prev => 
      prev.includes(id) 
        ? prev.filter(itemId => itemId !== id) 
        : [...prev, id]
    );
  };

  return (
    <div className="min-h-screen bg-[#2B5F47] font-['Arimo']">
      <Head>
        <title>Новинки | Brand Store</title>
        <link rel="icon" href="/favicon.ico" />
        <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700&display=swap" rel="stylesheet" />
      </Head>

      <Header />

      <main className="pt-24 pb-16 px-4 md:px-8">
        <div className="container mx-auto">
          <motion.h1 
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-3xl md:text-4xl font-bold mb-8 text-[#2B5F47] text-center"
          >
            Новые поступления
          </motion.h1>

          {newProducts.length > 0 ? (
            <motion.div 
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.2 }}
              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
            >
              {newProducts.map((product, index) => (
                <motion.div
                  key={product.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: 0.1 * index }}
                  className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
                  onMouseEnter={() => setHoveredProduct(product.id)}
                  onMouseLeave={() => setHoveredProduct(null)}
                >
                  <Link href={`/product/${product.slug}`}>
                    <div className="relative h-72 w-full overflow-hidden">
                      <Image
                        src={hoveredProduct === product.id && product.images.length > 1 
                          ? product.images[1] 
                          : product.images[0]}
                        alt={product.name}
                        fill
                        className="object-cover transition-transform duration-500 ease-in-out"
                      />
                      <div className="absolute top-3 left-3 bg-[#63823B] text-white text-xs py-1 px-3 rounded-md">
                        Новинка
                      </div>
                      <button
                        onClick={(e) => toggleFavorite(product.id, e)}
                        className="absolute top-3 right-3 p-2 rounded-full bg-white/80 hover:bg-white transition-colors z-10"
                      >
                        <Heart 
                          className={`w-5 h-5 ${favorites.includes(product.id) ? 'fill-[#63823B] text-[#63823B]' : 'text-gray-600'}`} 
                        />
                      </button>
                    </div>
                    <div className="p-4">
                      <h3 className="text-lg font-medium text-[#2B5F47] mb-1">{product.name}</h3>
                      {/* <p className="text-sm text-gray-600 mb-2 line-clamp-2">{product.description}</p> */}
                      <div className="flex justify-between items-center">
                        <span className="font-bold text-[#2B5F47]">{product.price} ₽</span>
                        <span className="text-sm text-[#63823B]">
                          {product.inStock ? 'В наличии' : 'Нет в наличии'}
                        </span>
                      </div>
                    </div>
                  </Link>
                </motion.div>
              ))}
            </motion.div>
          ) : (
            <div className="text-center py-12">
              <p className="text-xl text-[#2B5F47] mb-4">Новинок пока нет</p>
              <Link href="/" className="inline-block px-6 py-3 bg-[#63823B] text-white rounded-md hover:bg-[#2B5F47] transition-colors">
                Вернуться на главную
              </Link>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  );
} 