import Image from "next/image";
import Link from "next/link";
import { SanityProductCard } from "@/lib/sanity/queries";
import { formatEuro } from "@/lib/utils/money";

type Props = {
  product: SanityProductCard;
  index: number;
};

export function ProductCard({ product, index }: Props) {
  const image = product.imageUrl || "";
  const hasPriceRange =
    typeof product.minPriceCents === "number" &&
    typeof product.maxPriceCents === "number" &&
    product.maxPriceCents > product.minPriceCents;
  const showRegularPrice =
    !hasPriceRange &&
    typeof product.regularPriceCents === "number" &&
    typeof product.priceCents === "number" &&
    product.regularPriceCents > product.priceCents;
  const displayedPrice = hasPriceRange
    ? `${formatEuro(product.minPriceCents)} - ${formatEuro(product.maxPriceCents)}`
    : formatEuro(product.priceCents);

  return (
    <article
      className="group h-full overflow-hidden rounded-[1.5rem] border border-[#ffe0e0] bg-transparent shadow-none"
      style={{ animationDelay: `${Math.min(index * 40, 200)}ms` }}
    >
      <Link href={`/produits/${product.handle}`} className="flex h-full flex-col">
        <div className="relative aspect-[4/5] overflow-hidden bg-[radial-gradient(circle_at_top,#fff5f1_0%,#fde8e1_48%,#f8ddd5_100%)]">
          {image ? (
            <Image
              src={image}
              alt={product.title}
              fill
              sizes="(max-width: 768px) 100vw, 33vw"
              loading="lazy"
              className="object-cover transition duration-500 group-hover:scale-105"
            />
          ) : (
            <div className="h-full w-full bg-gradient-to-br from-[#ffb8b8] to-[#f55050]" />
          )}
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[#1e171010] via-transparent to-transparent opacity-0 transition group-hover:opacity-100" />
          {product.displayBadge?.trim() ? (
            <span className="absolute left-3 top-3 rounded-full border border-[#ffffffcc] bg-white/90 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.13em] text-[var(--accent-3)]">
              {product.displayBadge}
            </span>
          ) : null}
        </div>

        <div className="flex min-h-[7.25rem] flex-1 flex-col justify-between gap-3 bg-[linear-gradient(180deg,#fff7f4_0%,#fff0ef_100%)] p-4">
          <h3 className="min-h-[3rem] line-clamp-2 text-base font-semibold text-[var(--foreground)] group-hover:text-[#0f1915]">
            {product.title}
          </h3>
          <div className="flex items-center justify-between">
            <div className="flex items-baseline gap-2">
              {showRegularPrice ? (
                <p className="text-xs font-medium text-[var(--muted)] line-through decoration-[1.5px]">
                  {formatEuro(product.regularPriceCents)}
                </p>
              ) : null}
              <p className="text-sm font-semibold text-[var(--accent)]">{displayedPrice}</p>
            </div>
            <span className="text-xs font-semibold uppercase tracking-[0.13em] text-[var(--accent-3)] group-hover:translate-x-[3px]">
              Voir
            </span>
          </div>
        </div>
      </Link>
    </article>
  );
}