import { Link } from 'react-router-dom'
import { motion, useReducedMotion } from 'framer-motion'
import { Flower2, Star } from 'lucide-react'
import { money } from '../../store/shop'
import { Product } from '../../types'

// 블루밍 호버: 카드가 꽃이 피어나듯 살짝 떠오르고 이미지가 줌인.
export default function ProductCard({ p }: { p: Partial<Product> }) {
  const reduce = useReducedMotion()
  const onSale = p.salePrice != null && p.salePrice > 0 && p.salePrice < (p.price || 0)
  const off = onSale ? Math.round((1 - (p.salePrice as number) / (p.price as number)) * 100) : 0

  return (
    <motion.div
      whileHover={reduce ? undefined : { y: -8 }}
      transition={{ type: 'spring', stiffness: 300, damping: 24 }}
      className="group h-full"
    >
      <Link
        to={`/product/${p.id}`}
        className="block h-full bg-white rounded-3xl overflow-hidden border border-blush-100/70 shadow-soft hover:shadow-bloom transition-shadow duration-500"
      >
        <div className="relative aspect-[4/5] zoom-frame bg-gradient-to-br from-blush-50 to-ivory flex items-center justify-center">
          {p.thumbnail ? (
            <img
              src={p.thumbnail}
              alt={p.name}
              loading="lazy"
              className="w-full h-full object-cover group-hover:scale-110"
            />
          ) : (
            <Flower2 className="text-blush-200" size={56} />
          )}
          {onSale && (
            <span className="absolute top-3 left-3 bg-blush-500 text-white text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-petal">
              -{off}%
            </span>
          )}
          {p.occasion && (
            <span className="absolute top-3 right-3 bg-white/85 backdrop-blur text-sage-700 text-[10px] uppercase tracking-wide px-2.5 py-1 rounded-full">
              {p.occasion}
            </span>
          )}
          {/* hover 시 살짝 떠오르는 보태니컬 글로우 */}
          <div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-t from-blush-900/10 to-transparent" />
        </div>
        <div className="p-4">
          {p.brand && (
            <div className="text-[10px] uppercase tracking-[0.12em] text-sage-600 mb-0.5">{p.brand}</div>
          )}
          <div className="font-serif text-[15px] leading-snug text-blush-900 truncate">{p.name}</div>
          <div className="flex items-center justify-between mt-2">
            <div className="flex items-baseline gap-1.5">
              {onSale ? (
                <>
                  <span className="text-blush-600 font-bold">{money(p.salePrice)}</span>
                  <span className="text-gray-400 line-through text-xs">{money(p.price)}</span>
                </>
              ) : (
                <span className="font-bold text-blush-900">{money(p.price)}</span>
              )}
            </div>
            {p.ratingAvg != null && p.reviewCount ? (
              <span className="flex items-center gap-0.5 text-xs text-gold">
                <Star size={12} fill="currentColor" />
                {p.ratingAvg?.toFixed(1)}
              </span>
            ) : null}
          </div>
        </div>
      </Link>
    </motion.div>
  )
}
