/**
 * Imágenes de la tienda sin fallbacks hardcodeados.
 *
 * Problema que resuelve: cuando una categoría (o novedad, o banner) no tenía
 * imagen propia, la tienda caía a fotos de Unsplash de comida que venían en el
 * config por defecto. Resultado: una categoría "Aire acondicionado" mostraba un
 * plato de comida. Multi-tenant, eso es siempre incorrecto.
 *
 * Ahora, cuando no hay imagen real, se genera un placeholder NEUTRO (un degradé
 * gris con la inicial del nombre) en vez de una foto que no corresponde. Es un
 * SVG inline (data-URI): no pega a la red, funciona offline y encaja en
 * cualquier <img> con object-fit.
 */

export function isBlankImage(src?: string | null): boolean {
  return !src || !src.trim();
}

/** Placeholder SVG data-URI neutro derivado del nombre. Nunca una foto. */
export function storePlaceholder(label = ''): string {
  const clean = (label || '').trim();
  // Hasta 2 iniciales (ej. "Aire Acondicionado" → "AA").
  const initials =
    clean
      .split(/\s+/)
      .slice(0, 2)
      .map((w) => w[0])
      .join('')
      .toUpperCase() || '•';

  const svg =
    `<svg xmlns='http://www.w3.org/2000/svg' width='600' height='450' viewBox='0 0 600 450'>` +
    `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +
    `<stop offset='0' stop-color='#eef1f5'/><stop offset='1' stop-color='#d7dee7'/>` +
    `</linearGradient></defs>` +
    `<rect width='600' height='450' fill='url(#g)'/>` +
    `<text x='50%' y='50%' font-family='system-ui,Segoe UI,Roboto,sans-serif' ` +
    `font-size='160' font-weight='700' fill='#aebacc' text-anchor='middle' ` +
    `dominant-baseline='central'>${initials}</text>` +
    `</svg>`;

  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

/** Devuelve la imagen real si existe; si no, el placeholder neutro. */
export function storeImageSrc(src: string | null | undefined, label = ''): string {
  return isBlankImage(src) ? storePlaceholder(label) : (src as string).trim();
}