"use client";

import Link from "next/link";
import { Heart, Scale } from "lucide-react";
import { AddToCartButton } from "@/components/AddToCartButton";
import { ProductVisual } from "@/components/ProductVisual";
import { currency, displayPrice } from "@/lib/utils";

type Product = {
  id: string;
  slug?: string | null;
  name?: string | null;
  metalType?: string | null;
  weight?: string | null;
  purity?: string | null;
  productType?: string | null;
  mintBrand?: string | null;
  brandMint?: string | null;
  customerPrice?: unknown;
  totalSalePrice?: unknown;
  manualPrice?: unknown;
  isIraEligible?: boolean | null;
  imageUrl?: string | null;
  imageUrls?: string | null;
  images?: string | null;
  stockStatus?: string | null;
  inventoryStatus?: string | null;
};

export function ProductCard({ product }: { product: Product }) {
  const stock = product.stockStatus || product.inventoryStatus || "IN_STOCK";
  const stockClass = stock === "OUT_OF_STOCK" ? "product-badge product-badge-muted" : stock === "LOW_STOCK" ? "product-badge product-badge-warning" : "product-badge product-badge-stock";
  const brand = product.brandMint || product.mintBrand || "Generic Bullion";
  const price = displayPrice(product);
  const href = product.slug ? `/products/${product.slug}` : "/products";
  const name = product.name || "Bullion Product";
  const weight = product.weight || "Weight varies";
  const purity = product.purity || "Purity listed on product";

  const stockLabel = stock === "LOW_STOCK" ? "Low Stock" : stock === "OUT_OF_STOCK" ? "Out of Stock" : "In Stock";

  return (
    <article className="product-card product-tile group flex h-full min-h-[392px] flex-col bg-white">
      <div className="product-image-shell product-card-image-shell relative aspect-[16/10] min-h-[138px] border-b border-[#d8d2c4]">
        <Link href={href} className="block h-full" aria-label={name}>
          <ProductVisual product={product} className="h-full transition duration-200 group-hover:scale-[1.02]" compact />
        </Link>
        <div className="product-card-badges absolute left-3 top-3 z-10 flex max-w-[calc(100%-76px)] flex-wrap gap-1.5">
          <span className={stockClass}>{stockLabel}</span>
          {product.isIraEligible ? <span className="product-badge product-badge-ira">IRA</span> : null}
        </div>
        <div className="absolute right-3 top-3 z-10 flex gap-2">
          <button type="button" className="product-card-icon-button" aria-label={`Compare ${name}`}>
            <Scale size={15} />
          </button>
          <button type="button" className="product-card-icon-button" aria-label={`Save ${name} to wishlist`}>
            <Heart size={15} />
          </button>
        </div>
      </div>
      <div className="flex flex-1 flex-col p-3">
        <Link href={href} className="product-card-title min-h-[44px] text-[0.96rem] font-black leading-snug text-[#111827] hover:text-[#8B6A12]">
          {name}
        </Link>
        <div className="mt-2 flex min-h-5 flex-wrap items-center gap-2 text-[0.78rem] font-black uppercase tracking-[0.02em] text-[#5f6673]">
          <span>{weight}</span>
          <span className="h-1 w-1 rounded-full bg-[#b8860b]" />
          <span>{purity}</span>
        </div>
        <p className="mt-1 truncate text-[0.7rem] font-black uppercase tracking-[0.08em] text-[#5f6673]">{brand}</p>
        <div className="price-panel product-card-price-panel mt-2.5 rounded border border-[#d8d2c4] bg-[#fbf7ee] p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
          <div className="text-[0.64rem] font-black uppercase tracking-[0.12em] text-[#5f6673]">As low as</div>
          <div className="product-card-price mt-1">{currency(price)}</div>
          <div className="mt-1 text-xs font-bold text-[#5f6673]">Price updated</div>
        </div>
        <div className="product-card-actions">
          <AddToCartButton productId={product.id} disabled={stock === "OUT_OF_STOCK"} className="product-card-add-button" />
          <Link href={href} className="product-card-details-button product-details-link outline-button">Details</Link>
        </div>
      </div>
    </article>
  );
}