type ProductVisualProduct = {
  name?: string | null;
  metalType?: string | null;
  productType?: string | null;
  weight?: string | null;
  purity?: string | null;
  mintBrand?: string | null;
  brandMint?: string | null;
  imageUrl?: string | null;
  imageUrls?: string | null;
  images?: string | null;
};

function parseImages(value?: string | null) {
  if (!value || value === "[]") return [];
  try {
    const parsed = JSON.parse(value);
    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === "string") : [];
  } catch {
    return [value];
  }
}

function safeImageSrc(value?: string | null) {
  if (!value) return null;
  const src = value.trim();
  if (!src) return null;
  if (src.startsWith("/") || src.startsWith("http://") || src.startsWith("https://") || src.startsWith("data:image/")) return src;
  return null;
}

function realImage(product: ProductVisualProduct) {
  const images = [product.imageUrl, ...parseImages(product.imageUrls), ...parseImages(product.images)];
  return images.map(safeImageSrc).find((image): image is string => Boolean(image));
}

function metalLabel(product: ProductVisualProduct) {
  return product.metalType?.toUpperCase() === "SILVER" ? "Silver" : product.metalType?.toUpperCase() === "GOLD" ? "Gold" : "Bullion";
}

function typeLabel(product: ProductVisualProduct) {
  const type = product.productType?.replaceAll("_", " ").toLowerCase();
  return type ? type.replace(/\b\w/g, (char) => char.toUpperCase()) : "Product";
}

function imageAlt(product: ProductVisualProduct) {
  if (product.name?.trim()) return product.name.trim();

  const parts = [
    product.metalType ? metalLabel(product) : "",
    product.weight?.trim() || "",
    typeLabel(product),
    product.brandMint?.trim() || product.mintBrand?.trim() || ""
  ].filter(Boolean);

  return parts.length ? `${parts.join(" ")} image` : "Bullion product image";
}

export function ProductVisual({ product, className = "", compact = false }: { product: ProductVisualProduct; className?: string; compact?: boolean }) {
  const alt = imageAlt(product);
  const image = realImage(product);
  const stageClass = `visual-stage bullion-asset-stage ${image ? "visual-stage-real-image" : "visual-stage-pending-image"} ${compact ? "visual-stage-compact" : ""} ${className}`;

  if (image) {
    return (
      <div className={stageClass}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={image} alt={alt} className="bullion-asset-image" loading="lazy" />
      </div>
    );
  }

  return (
    <div className={stageClass} aria-label={alt}>
      <div className="product-image-pending">
        <span>{metalLabel(product)}</span>
        <strong>{typeLabel(product)}</strong>
        <small>{product.weight ? `${product.weight} / Product image pending` : "Product image pending"}</small>
      </div>
    </div>
  );
}