import Image from "next/image"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { formatPrice } from "@/lib/utils"
import { productImage } from "@/lib/product-image"

export interface ProductCardProps {
  id: string
  name: string
  slug: string
  price: number
  images: string[]
  materials?: string[]
  category?: string
  stock: number
  drop?: {
    name: string
    status: "UPCOMING" | "LIVE" | "SOLD_OUT"
  } | null
}

export function ProductCard({ name, slug, price, images, materials = [], stock, drop }: ProductCardProps) {
  const isSoldOut = stock === 0 || drop?.status === "SOLD_OUT"
  const isLive = drop?.status === "LIVE"
  const img = productImage(images, materials)

  return (
    <Link
      href={`/shop/${slug}`}
      className="group block"
      aria-label={name}
    >
      {/* Image */}
      <div className="relative aspect-[3/4] overflow-hidden bg-[var(--surface)] mb-4">
        {img ? (
          <Image
            src={img}
            alt={name}
            fill
            sizes="(max-width: 768px) 50vw, 25vw"
            className={`object-cover transition-transform duration-500 group-hover:scale-105 ${
              isSoldOut ? "opacity-60 grayscale" : ""
            }`}
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-[var(--text-muted)]">
            <span className="font-mono text-xs uppercase tracking-widest">VALABEL</span>
          </div>
        )}

        {/* Badge overlay */}
        <div className="absolute top-3 left-3 flex flex-col gap-1.5">
          {isLive && <Badge variant="drop">Drop Live</Badge>}
          {isSoldOut && <Badge variant="sold">Sold Out</Badge>}
          {!isSoldOut && !isLive && drop?.status === "UPCOMING" && (
            <Badge variant="upcoming">Bientôt</Badge>
          )}
        </div>

        {/* Quick view on hover */}
        <div className="absolute inset-x-0 bottom-0 translate-y-full group-hover:translate-y-0 transition-transform duration-300 bg-[var(--bg)] bg-opacity-90 backdrop-blur-sm py-3 px-4">
          <span className="font-mono text-xs uppercase tracking-widest text-[var(--text)]">
            Voir le produit
          </span>
        </div>
      </div>

      {/* Info */}
      <div className="space-y-1">
        <h3 className="font-heading text-sm font-semibold uppercase tracking-wide text-[var(--text)] group-hover:text-[var(--accent)] transition-colors">
          {name}
        </h3>
        <p className="font-mono text-sm text-[var(--text-secondary)]">
          {isSoldOut ? (
            <span className="line-through text-[var(--text-muted)]">{formatPrice(price)}</span>
          ) : (
            formatPrice(price)
          )}
        </p>
      </div>
    </Link>
  )
}