import Link from 'next/link'
import type { Product } from '@homaroma/types'
import { getCategoryImage, formatPrice } from '@homaroma/types'
import { resolveLocalized } from '../lib/localization'
import WishlistButton from './WishlistButton'

interface ProductCardProps {
  product: Product
}

export default function ProductCard({ product }: ProductCardProps) {
  const categoryName = resolveLocalized(product.category.name)
  const productName = resolveLocalized(product.name) || product.scent.name
  const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
  const firstPrice = product.variants[0]?.price ?? product.price

  return (
    <article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-brutal transition duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
      <div className="relative aspect-[4/3] overflow-hidden bg-pop-bg">
        <WishlistButton product={product} />
        <Link href={`/products/${product.id}`} className="block h-full w-full">
          <img
            src={imageUrl}
            className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
            alt={productName}
          />
          {categoryName && (
            <span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-pop-black shadow-sm">
              {categoryName}
            </span>
          )}
        </Link>
      </div>

      <div className="flex flex-1 flex-col gap-4 p-5">
        <div className="space-y-1">
          <h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black">
            <Link href={`/products/${product.id}`} className="transition hover:text-pop-pink">
              {productName}
            </Link>
          </h3>
          {product.scent.name && (
            <p className="text-xs font-semibold uppercase tracking-widest text-gray-400">
              {product.scent.name}
            </p>
          )}
        </div>

        {product.variants.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {product.variants.slice(0, 3).map((variant) => (
              <span key={variant.id} className="rounded-full bg-pop-bg px-3 py-1 text-xs font-semibold text-gray-600">
                {variant.size}
              </span>
            ))}
          </div>
        )}

        <div className="mt-auto flex items-center justify-between gap-4">
          <span className="text-lg font-bold text-pop-pink">{formatPrice(firstPrice)}</span>
          <Link
            href={`/products/${product.id}`}
            className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
          >
            View
          </Link>
        </div>
      </div>
    </article>
  )
}