import Image from "next/image";
import Link from "next/link";
import { detonexFigmaAssets } from "@/lib/detonex-figma";
import { getProductDiscountLabel } from "@/lib/storefront-pricing";
import { buildWishlistItemFromProductCard } from "@/lib/storefront-wishlist-item";
import type { StorefrontProductCard } from "@/types/storefront";
import { ProductCardAddButton } from "@/components/ui/product-card-add-button";
import { ProductCardWishlistButton } from "@/components/ui/product-card-wishlist-button";

export function ProductCard({ product }: { product: StorefrontProductCard }) {
  const discountLabel = getProductDiscountLabel(product);

  return (
    <article className="group relative overflow-hidden rounded-[8px] bg-surface">
      <Link href={product.href} className="block">
        <div className="relative aspect-square overflow-hidden bg-surface p-5">
          <Image
            src={product.featuredImage?.src || detonexFigmaAssets.productFallbackImage}
            alt={product.featuredImage?.alt || product.name}
            fill
            sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 25vw"
            className="object-contain p-5 transition-transform duration-300 group-hover:scale-[1.03]"
          />

          {discountLabel ? (
            <span className="absolute left-5 top-5 inline-flex h-8 items-center justify-center rounded-[4px] bg-accent px-[10px] text-[12px] font-semibold uppercase tracking-[-0.01em] text-white">
              Akcija
            </span>
          ) : null}
        </div>
      </Link>

      <ProductCardWishlistButton item={buildWishlistItemFromProductCard(product)} />

      <div className="px-5 pb-5">
        <div className="pb-2">
          <p className="text-[12px] font-medium uppercase leading-[1.5] tracking-[-0.02em] text-primary/60">
            {product.brand?.name ?? product.category?.name ?? "Browning"}
          </p>
          <Link href={product.href} className="block">
            <h3 className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary">
              {product.name}
            </h3>
          </Link>
        </div>

        <div className="flex items-end gap-[10px]">
          <div className="min-w-0 flex-1 space-y-1">
            <p className="text-[18px] font-semibold leading-[1.5] tracking-[-0.02em] text-primary">
              {product.price}
            </p>
            {product.isOnSale && product.regularPrice ? (
              <div className="flex flex-wrap items-center gap-3">
                {discountLabel ? (
                  <span className="inline-flex rounded-[4px] bg-accent/10 px-2 py-[3px] text-[12px] font-semibold tracking-[-0.01em] text-accent">
                    {discountLabel}
                  </span>
                ) : null}
                <span className="text-[14px] font-medium leading-[1.5] tracking-[-0.02em] text-primary line-through">
                  {product.regularPrice}
                </span>
              </div>
            ) : null}
          </div>
          <ProductCardAddButton product={product} />
        </div>
      </div>
    </article>
  );
}