'use client'

import { motion } from 'framer-motion'
import { Heart, Share2, Eye, Tag, Sparkles, TrendingDown, Star, Zap } from 'lucide-react'
import type { Product } from '@/lib/types'
import { useCatalogStore } from '@/lib/store'
import { formatPrice, getEffectivePrice, getProductImageStyle, getCategorySymbol } from '@/lib/catalog-utils'
import { MiniCartButton } from './mini-cart-button'

interface ProductCardProps {
  product: Product
  index?: number
}

export function ProductCard({ product, index = 0 }: ProductCardProps) {
  const { favorites, toggleFavorite, navigateToProduct, goToPage } = useCatalogStore()
  const isFavorite = favorites.includes(product.code)
  const imageStyle = getProductImageStyle(product)
  const effectivePrice = getEffectivePrice(product)
  const hasPromo = product.promotionalPrice !== null && product.promotionalPrice < product.price

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay: Math.min(index * 0.03, 0.4) }}
      className="group relative bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100"
    >
      {/* Badges */}
      <div className="absolute top-3 left-3 z-10 flex flex-col gap-1.5">
        {product.isLaunch && (
          <span className="inline-flex items-center gap-1 bg-amber-400 text-black text-[10px] font-bold px-2 py-1 rounded-full shadow-sm">
            <Zap className="w-2.5 h-2.5" /> LANÇAMENTO
          </span>
        )}
        {product.isLowerPriceYear && (
          <span className="inline-flex items-center gap-1 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-full shadow-sm">
            <TrendingDown className="w-2.5 h-2.5" /> MENOR PREÇO
          </span>
        )}
        {product.isBestseller && !product.isLaunch && (
          <span className="inline-flex items-center gap-1 bg-black text-amber-400 text-[10px] font-bold px-2 py-1 rounded-full shadow-sm">
            <Star className="w-2.5 h-2.5" /> MAIS VENDIDO
          </span>
        )}
        {hasPromo && product.discountPercent && (
          <span className="inline-flex items-center bg-black text-white text-[10px] font-bold px-2 py-1 rounded-full shadow-sm">
            -{product.discountPercent}%
          </span>
        )}
      </div>

      {/* Favorite button */}
      <div className="absolute top-3 right-3 z-10 flex flex-col gap-1.5">
        <button
          onClick={(e) => { e.stopPropagation(); toggleFavorite(product.code) }}
          className="w-8 h-8 rounded-full bg-white/90 backdrop-blur flex items-center justify-center shadow-sm hover:bg-white transition-colors"
          aria-label="Favoritar"
        >
          <Heart className={`w-4 h-4 transition-all ${isFavorite ? 'fill-red-500 text-red-500' : 'text-gray-400'}`} />
        </button>
      </div>

      {/* Product Image / Placeholder */}
      <div
        className="relative aspect-square cursor-pointer overflow-hidden"
        style={{ background: imageStyle.bg }}
        onClick={() => navigateToProduct(product)}
      >
        <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
          <div className="text-5xl mb-3 opacity-80">{getCategorySymbol(product.category?.slug || '')}</div>
          <div className="text-xs font-mono text-gray-600 mb-1">CÓD: {product.code}</div>
          <div className="text-[11px] text-gray-500 leading-tight line-clamp-3 font-medium">{product.volume}</div>
        </div>
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-end justify-center pb-4 opacity-0 group-hover:opacity-100">
          <span className="bg-white text-black text-xs font-semibold px-3 py-1.5 rounded-full shadow flex items-center gap-1">
            <Eye className="w-3 h-3" /> Ver detalhes
          </span>
        </div>
      </div>

      {/* Product Info */}
      <div className="p-4 cursor-pointer" onClick={() => navigateToProduct(product)}>
        <div className="flex items-center gap-1.5 mb-1.5">
          <span className="text-[10px] font-semibold text-amber-600 uppercase tracking-wider">
            {product.category?.name}
          </span>
          {product.fragrance && (
            <span className="text-[10px] text-gray-400">• {product.fragrance}</span>
          )}
        </div>

        <h3 className="font-semibold text-sm text-gray-900 line-clamp-2 min-h-[2.5rem] leading-tight mb-2 group-hover:text-amber-600 transition-colors">
          {product.name}
        </h3>

        <div className="flex items-end justify-between gap-2">
          <div className="min-w-0">
            {hasPromo && (
              <div className="text-[11px] text-gray-400 line-through">
                {formatPrice(product.price)}
              </div>
            )}
            <div className="flex items-baseline gap-1">
              {hasPromo && <span className="text-[10px] text-gray-500 font-medium">por</span>}
              <span className={`font-bold text-lg ${hasPromo ? 'text-red-600' : 'text-gray-900'}`}>
                {formatPrice(effectivePrice)}
              </span>
            </div>
            <button
              onClick={(e) => {
                e.stopPropagation()
                goToPage(product.page)
              }}
              className="text-[10px] text-gray-400 hover:text-amber-600 flex items-center gap-0.5 transition-colors mt-0.5"
            >
              <Tag className="w-3 h-3" /> Pág. {product.page}
            </button>
          </div>
          {/* Mini cart button — wraps to its own row on narrow cards */}
          <div onClick={(e) => e.stopPropagation()} className="flex-shrink-0">
            <MiniCartButton code={product.code} size="sm" />
          </div>
        </div>
      </div>
    </motion.div>
  )
}