"use client";

import Link from "next/link";
import Image from "next/image";
import { Heart, ShoppingBag } from "lucide-react";
import { Product } from "@/lib/types";
import { formatPrice } from "@/lib/format";
import { cartStore } from "@/lib/cart-store";
import { useWishlist } from "@/hooks/use-wishlist";

export function ProductCard({ product, priority = false }: { product: Product; priority?: boolean }) {
  const image = product.product_images?.[0]?.url || "";
  const compareAtPrice = product.compare_at_price;
  const isOnSale = compareAtPrice !== null && compareAtPrice > product.price;
  const { isFav, toggle } = useWishlist(product.id);

  return (
    <div className="group">
      <div className="relative aspect-3/4 rounded-lg overflow-hidden bg-brand-cream mb-3">
        <Link href={`/produit/${product.slug}`} className="absolute inset-0" aria-label={`Voir ${product.name}`}>
          {image && (
            <Image
              src={image}
              alt={product.name}
              fill
              priority={priority}
              sizes="(min-width: 1280px) 20vw, (min-width: 1024px) 25vw, 50vw"
              className="object-cover transition-transform duration-500 group-hover:scale-105"
            />
          )}
        </Link>
        <div className="pointer-events-none absolute top-3 left-3 flex flex-col gap-1.5">
          {product.is_new && (
            <span className="px-2 py-0.5 bg-brand-black text-white text-[10px] uppercase tracking-wider font-medium rounded">
              Nouveau
            </span>
          )}
          {product.is_bestseller && (
            <span className="px-2 py-0.5 gold-gradient text-white text-[10px] uppercase tracking-wider font-medium rounded">
              Best-seller
            </span>
          )}
          {product.is_limited && (
            <span className="px-2 py-0.5 bg-brand-charcoal text-white text-[10px] uppercase tracking-wider font-medium rounded">
              Edition limitee
            </span>
          )}
          {isOnSale && (
            <span className="px-2 py-0.5 bg-red-600 text-white text-[10px] uppercase tracking-wider font-medium rounded">
              Promo
            </span>
          )}
        </div>
        <div className="absolute top-3 right-3 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
          <button
            type="button"
            onClick={(event) => {
              event.preventDefault();
              toggle();
            }}
            className="w-11 h-11 rounded-full bg-white/95 flex items-center justify-center shadow-xs hover:bg-white transition-colors"
            aria-label={isFav ? "Retirer des favoris" : "Ajouter aux favoris"}
          >
            <Heart size={18} className={isFav ? "fill-red-500 text-red-500" : "text-brand-charcoal"} />
          </button>
        </div>
        <div className="absolute bottom-3 left-3 right-3 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
          <button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              cartStore.addItem(product);
            }}
            className="w-full min-h-11 py-2.5 bg-brand-black/90 text-white text-xs font-medium rounded flex items-center justify-center gap-2 hover:bg-brand-black transition-colors"
          >
            <ShoppingBag size={14} />
            Ajouter au panier
          </button>
        </div>
      </div>
      <Link href={`/produit/${product.slug}`}>
        <h3 className="text-sm font-medium text-brand-black group-hover:text-brand-gold transition-colors">
          {product.name}
        </h3>
        <p className="text-xs text-brand-charcoal/60 mt-0.5">{product.color}</p>
        <div className="flex items-center gap-2 mt-1.5">
          <span className="text-sm font-semibold text-brand-black">
            {formatPrice(product.price)}
          </span>
          {isOnSale && compareAtPrice !== null && (
            <span className="text-xs text-brand-charcoal/50 line-through">
              {formatPrice(compareAtPrice)}
            </span>
          )}
        </div>
      </Link>
    </div>
  );
}