import Link from "next/link";
import { Star, Store, Heart, Zap } from "lucide-react";
import type { MarketplaceProduct } from "@/lib/marketplace-data";
import { getMarketplaceDisplayPrice } from "@/lib/marketplace-product-pricing";

interface ProductGridProps {
  products: MarketplaceProduct[];
  title?: string;
  subtitle?: string;
  icon?: React.ReactNode;
}

export function ProductGrid({ 
  products, 
  title = "Descobertas do Dia", 
  subtitle = "Produtos recomendados para você",
  icon = <Zap className="w-6 h-6 text-violet-600" />
}: ProductGridProps) {
  if (!products || products.length === 0) return null;

  return (
    <section className="py-12 bg-gray-50/50">
      <div className="container mx-auto px-4 lg:px-8">
        
        {/* Header */}
        <div className="flex flex-col items-center text-center mb-10">
          <div className="flex items-center gap-2 mb-2">
            {icon}
            <h2 className="text-2xl lg:text-3xl font-extrabold text-gray-900 uppercase tracking-tight">{title}</h2>
          </div>
          <p className="text-gray-500">{subtitle}</p>
        </div>

        {/* Endless Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 lg:gap-6">
          {products.map((product) => {
            const primaryImage = product.product_images?.find(img => img.is_primary)?.image_url || product.image_url;
            const fallbackImage = 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?q=80&w=600&auto=format&fit=crop';
            
            const displayPrice = getMarketplaceDisplayPrice(product);

            return (
              <div key={product.id} className="bg-white border border-gray-100 rounded-2xl overflow-hidden hover:shadow-xl hover:border-violet-200 transition-all duration-300 group flex flex-col h-full">
                {/* Image Area */}
                <div className="aspect-square bg-gray-50 relative overflow-hidden">
                  <img 
                    src={primaryImage || fallbackImage} 
                    alt={product.name} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  
                  {/* Floating Store Badge */}
                  <Link href={`/lojas/${product.store?.slug}`} className="absolute bottom-2 left-2 right-2 bg-white/90 backdrop-blur-sm rounded-lg p-1.5 flex items-center gap-2 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-sm hover:bg-white z-10">
                    <div className="w-5 h-5 rounded-full bg-gray-100 overflow-hidden flex-shrink-0">
                      {product.store?.logoUrl ? (
                        <img src={product.store.logoUrl} alt="" className="w-full h-full object-cover" />
                      ) : (
                        <Store className="w-3 h-3 m-1 text-gray-400" />
                      )}
                    </div>
                    <span className="text-[10px] font-bold text-gray-700 truncate">
                      {product.store?.name || "Loja Parceira"}
                    </span>
                  </Link>

                  {/* Favorite Button */}
                  <button className="absolute top-2 right-2 w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-gray-400 hover:text-red-500 hover:bg-white transition-colors shadow-sm z-10">
                    <Heart className="w-4 h-4" />
                  </button>
                </div>
                
                {/* Content Area */}
                <div className="p-3 sm:p-4 flex flex-col flex-1">
                  <Link href={`/produtos/${product.id}`} className="block mb-2 group-hover:text-violet-600 transition-colors">
                    <h3 className="text-sm sm:text-base font-medium text-gray-800 line-clamp-2 leading-snug">
                      {product.name}
                    </h3>
                  </Link>
                  
                  <div className="mt-auto pt-2">
                    <div className="space-y-1">
                      {displayPrice.startsAt ? (
                        <div className="text-[10px] sm:text-xs text-gray-500 font-medium">A partir de</div>
                      ) : null}
                      <div className="font-bold text-violet-600 text-lg sm:text-xl leading-none">
                        {displayPrice.label}
                      </div>
                    </div>
                    
                    <div className="flex items-center justify-between mt-2">
                      <div className="flex items-center gap-1 text-[10px] sm:text-xs font-medium text-gray-500">
                        <Star className="w-3 h-3 fill-amber-400 text-amber-400" />
                        4.9
                      </div>
                      <span className="text-[10px] text-gray-400 border border-gray-200 rounded px-1.5 py-0.5">
                        {product.category || 'Produto'}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Load More Button Placeholder */}
        <div className="mt-12 text-center">
          <Link href="/produtos" className="inline-flex items-center justify-center px-8 py-3.5 border-2 border-violet-200 text-violet-600 font-bold rounded-full hover:bg-violet-50 transition-colors">
            Ver mais produtos
          </Link>
        </div>

      </div>
    </section>
  );
}