import { motion } from 'framer-motion'
import { Heart, Eye, ShoppingCart, Star } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Badge } from '@/Components/ui/Badge'
import type { WishlistItem } from '@/Hooks/useWishlist'

interface ProductCardProps {
  product: {
    id: string
    name: string
    price: number
    image?: string
    source_type?: string
    rating?: number
    sales_count?: number
    vendor_name?: string
  }
  isWishlisted?: boolean
  onWishlist?: (item: WishlistItem) => void
  onQuickView?: (product: any) => void
  className?: string
  index?: number
}

const sourceColors: Record<string, string> = {
  shopee: 'bg-orange-500/15 text-orange-400 border-orange-500/30',
  shopify: 'bg-teal-500/15 text-teal-400 border-teal-500/30',
  internal: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/30',
}

const sourceLabels: Record<string, string> = {
  shopee: 'Shopee',
  shopify: 'Shopify',
  internal: 'Internal',
}

export function ProductCard({ product, isWishlisted, onWishlist, onQuickView, className, index = 0 }: ProductCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05, duration: 0.4 }}
      whileHover={{ y: -6, transition: { duration: 0.2 } }}
      className={cn('group relative glass rounded-2xl overflow-hidden cursor-pointer', className)}
    >
      {/* Source badge */}
      {product.source_type && (
        <Badge variant="default" className="absolute top-3 left-3 z-10" dot>
          {sourceLabels[product.source_type] || product.source_type}
        </Badge>
      )}

      {/* Wishlist heart */}
      {onWishlist && (
        <button
          onClick={(e) => { e.stopPropagation(); onWishlist({ id: product.id, name: product.name, price: product.price, image: product.image, source_type: product.source_type, added_at: Date.now() }) }}
          className={cn(
            'absolute top-3 right-3 z-10 w-8 h-8 rounded-full flex items-center justify-center transition-all',
            isWishlisted ? 'bg-red-500/20 text-red-400' : 'bg-black/30 text-white/60 hover:bg-red-500/20 hover:text-red-400'
          )}
        >
          <Heart className={cn('w-4 h-4 transition-transform', isWishlisted && 'scale-110')} fill={isWishlisted ? 'currentColor' : 'none'} />
        </button>
      )}

      {/* Image */}
      <div className="relative aspect-square overflow-hidden bg-gradient-to-br from-slate-800 to-slate-900">
        {product.image ? (
          <img src={product.image} alt={product.name} loading="lazy" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-slate-600">
            <ShoppingCart className="w-12 h-12 opacity-30" />
          </div>
        )}

        {/* Hover overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <div className="flex gap-2 w-full">
            {onQuickView && (
              <button onClick={e => { e.stopPropagation(); onQuickView(product) }}
                className="flex-1 bg-white/10 backdrop-blur-md text-white text-xs font-medium py-2 rounded-xl hover:bg-white/20 transition-colors flex items-center justify-center gap-1.5">
                <Eye className="w-3.5 h-3.5" /> Quick View
              </button>
            )}
            <a href={`/product/${product.id}`}
              onClick={e => e.stopPropagation()}
              className="flex-1 bg-cyan-500/80 backdrop-blur-md text-white text-xs font-medium py-2 rounded-xl hover:bg-cyan-500 transition-colors text-center">
              Buy Now
            </a>
          </div>
        </div>
      </div>

      {/* Info */}
      <div className="p-4">
        <h3 className="text-sm font-medium text-white line-clamp-2 mb-2 group-hover:text-cyan-400 transition-colors">
          {product.name}
        </h3>

        <div className="flex items-center justify-between mb-2">
          <span className="text-lg font-bold text-white">
            RM{typeof product.price === 'number' ? product.price.toFixed(2) : product.price}
          </span>
          {product.rating && (
            <span className="flex items-center gap-1 text-xs text-amber-400">
              <Star className="w-3 h-3" fill="currentColor" /> {product.rating}
            </span>
          )}
        </div>

        {product.sales_count !== undefined && (
          <p className="text-[10px] text-slate-500">
            {product.sales_count.toLocaleString()} sold
            {product.vendor_name && ` · ${product.vendor_name}`}
          </p>
        )}
      </div>
    </motion.div>
  )
}

/** Grid wrapper with stagger animation */
export function ProductGrid({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={cn('grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4', className)}>
      {children}
    </div>
  )
}