// ProductCard — two variants: "grid" (square card) and "lane" (horizontal compact)

const CATEGORY_COLORS = {
  hambeconom:      { bg: "#fad9d4", accent: "#b91c1c" },
  hambpremium:     { bg: "#f8c9c2", accent: "#991b1b" },
  superpanchos:    { bg: "#fbe1d4", accent: "#c2410c" },
  panchos:         { bg: "#fbe1d4", accent: "#ea580c" },
  aderezos:        { bg: "#fbecc7", accent: "#a16207" },
  snacks:          { bg: "#eff6cc", accent: "#65a30d" },
  congelados:      { bg: "#d8f0f4", accent: "#0e7490" },
  gaseosas:        { bg: "#d6ecfa", accent: "#0369a1" },
  hielo:           { bg: "#d8f0f4", accent: "#0e7490" },
  carbon:          { bg: "#e2e0db", accent: "#475569" },
};

const categoryColors = (cat) => CATEGORY_COLORS[cat] || { bg: "#f5ede1", accent: "#d97706" };

function ProductIcon({ category, size = 48, image }) {
  if (image) {
    return <img src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />;
  }
  const icons = {
  hambeconom: "🍔", hambpremium: "🍔",
    superpanchos: "🌭", panchos: "🌭",
    aderezos: "🧂", snacks: "🍟", congelados: "🧊",
    gaseosas: "🥤", carbon: "🪵",
  };
  return (
    <div style={{
      fontSize: size,
      display: "flex", alignItems: "center", justifyContent: "center",
      width: "100%", height: "100%",
      filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.15))"
    }}>
      {icons[category] || "📦"}
    </div>
  );
}

function StockBadge({ product }) {
  // Prioridad: agotado > badge custom
  if (product.available === false) {
    return (
      <div style={{
        position: "absolute", top: 8, right: 8,
        background: "#1a1008", color: "#fff",
        fontSize: 10, fontWeight: 800, padding: "3px 8px",
        borderRadius: 20, letterSpacing: "0.06em", textTransform: "uppercase"
      }}>Agotado</div>
    );
  }
  if (product.badge && product.badge.trim()) {
    return (
      <div style={{
        position: "absolute", top: 8, right: 8,
        background: "#b91c1c", color: "#fff",
        fontSize: 10, fontWeight: 700, padding: "2px 7px",
        borderRadius: 20, letterSpacing: "0.04em", textTransform: "uppercase",
        whiteSpace: "nowrap"
      }}>{product.badge}</div>
    );
  }
  return null;
}

function DiscountBadge({ discount }) {
  if (!discount || discount < 1 || discount > 100) return null;
  return (
    <div style={{
      position: "absolute", top: 8, left: 8,
      background: "#d97706", color: "#fff",
      fontSize: 11, fontWeight: 800, padding: "2px 8px",
      borderRadius: 20, letterSpacing: "0.03em"
    }}>-{discount}%</div>
  );
}

function GridCard({ product, cartQty, onAdd, onRemove, onClick }) {
  const { bg, accent } = categoryColors(product.category);
  const inCart = cartQty > 0;
  return (
    <div
      data-sui="card"
      data-active={inCart ? "1" : null}
      onClick={onClick}
      style={{
        background: "#ffffff",
        borderRadius: 16,
        overflow: "hidden",
        cursor: "default",
        position: "relative",
        border: inCart ? `2px solid ${accent}` : "2px solid #e8dcc8",
        transition: "border-color 0.2s, transform 0.15s",
        display: "flex", flexDirection: "column",
        boxShadow: "0 2px 8px rgba(60,40,20,0.06)",
      }}
    >
      {/* Image area — smaller */}
      <div data-sui="image-cell" style={{
        background: bg, height: 72,
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative"
      }}>
        <ProductIcon category={product.category} size={38} image={product.image_url} />
        <StockBadge product={product} />
        <DiscountBadge discount={product.discount} />
      </div>

      {/* Info — more room for text */}
      <div style={{ padding: "10px 11px 6px", flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{
          fontSize: 13, fontWeight: 700, color: "#1a1008",
          lineHeight: 1.3, fontFamily: "'DM Sans', sans-serif",
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden",
          minHeight: 34
        }}>{product.name}</div>
        <div style={{
          fontSize: 11, color: "#8a7a66", lineHeight: 1.35, fontFamily: "'DM Sans', sans-serif",
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden"
        }}>
          {product.description}
        </div>
        <div style={{
          fontSize: 17, fontWeight: 800, color: accent,
          fontFamily: "'Bebas Neue', cursive", letterSpacing: "0.04em", marginTop: 4
        }}>
          ${product.price.toLocaleString("es-AR")}
        </div>
        {(() => { const u = unitInfo(product); return u ? (
          <div style={{ fontSize: 11.5, color: "#0f8a43", fontWeight: 800, lineHeight: 1.2, marginTop: 2, fontFamily: "'DM Sans', sans-serif" }}>{u.text}</div>
        ) : null; })()}
      </div>

      {/* Add to cart */}
      <div style={{ padding: "0 10px 10px" }} onClick={e => e.stopPropagation()}>
        {product.available === false ? (
          <button disabled style={{
            width: "100%", background: "#e8dcc8", color: "#8a7a66",
            border: "none", borderRadius: 30, padding: "7px 0",
            fontWeight: 700, fontSize: 13, cursor: "not-allowed",
            fontFamily: "'DM Sans', sans-serif"
          }}>Sin stock</button>
        ) : inCart ? (
          <div data-sui="stepper" style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            background: "#fdf3e1", borderRadius: 30, padding: "4px 8px",
            border: `1px solid ${accent}33`
          }}>
            <button onClick={onRemove} style={qtyBtnStyle}><span>−</span></button>
            <span style={{ color: accent, fontWeight: 800, fontSize: 15 }}>{cartQty}</span>
            <button onClick={onAdd} style={qtyBtnStyle}><span>+</span></button>
          </div>
        ) : (
          <button data-sui="btn-primary" onClick={onAdd} style={{
            width: "100%", background: accent, color: "#fff",
            border: "none", borderRadius: 30, padding: "7px 0",
            fontWeight: 800, fontSize: 13, cursor: "pointer",
            fontFamily: "'DM Sans', sans-serif"
          }}>Agregar</button>
        )}
      </div>
    </div>
  );
}

function LaneCard({ product, cartQty, onAdd, onRemove, onClick }) {
  const { bg, accent } = categoryColors(product.category);
  const inCart = cartQty > 0;
  return (
    <div
      data-sui="card"
      data-active={inCart ? "1" : null}
      style={{
        background: "#ffffff",
        borderRadius: 14,
        overflow: "hidden",
        display: "flex",
        alignItems: "stretch",
        position: "relative",
        border: inCart ? `2px solid ${accent}` : "2px solid #e8dcc8",
        boxShadow: "0 2px 8px rgba(60,40,20,0.06)",
        cursor: "default",
        marginBottom: 10,
      }}
      onClick={onClick}
    >
      <div data-sui="image-cell" style={{
        background: bg, width: 80, minWidth: 80,
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative"
      }}>
        <ProductIcon category={product.category} size={40} image={product.image_url} />
        <DiscountBadge discount={product.discount} />
      </div>
      <div style={{ padding: "12px 12px", flex: 1, display: "flex", flexDirection: "column", gap: 4 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#1a1008", lineHeight: 1.3, fontFamily: "'DM Sans', sans-serif", marginRight: (product.available === false || (product.badge && product.badge.trim())) ? 90 : 0 }}>
          {product.name}
        </div>
        <div style={{ fontSize: 11, color: "#8a7a66", lineHeight: 1.4, fontFamily: "'DM Sans', sans-serif",
          display: "-webkit-box", WebkitLineClamp: 1, WebkitBoxOrient: "vertical", overflow: "hidden"
        }}>
          {product.description}
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4, gap: 8 }}>
          <div style={{ minWidth: 0 }}>
            <span style={{ fontSize: 17, fontWeight: 800, color: accent, fontFamily: "'Bebas Neue', cursive", letterSpacing: "0.04em" }}>
              ${product.price.toLocaleString("es-AR")}
            </span>
            {(() => { const u = unitInfo(product); return u ? (
              <span style={{ display: "block", fontSize: 11.5, color: "#0f8a43", fontWeight: 800, lineHeight: 1.2, fontFamily: "'DM Sans', sans-serif" }}>{u.text}</span>
            ) : null; })()}
          </div>
          <div onClick={e => e.stopPropagation()}>
            {product.available === false ? (
              <button disabled style={{
                background: "#e8dcc8", color: "#8a7a66", border: "none", borderRadius: 30,
                padding: "5px 16px", fontWeight: 700, fontSize: 12, cursor: "not-allowed",
                fontFamily: "'DM Sans', sans-serif"
              }}>Sin stock</button>
            ) : inCart ? (
              <div data-sui="stepper" style={{ display: "flex", alignItems: "center", gap: 8, background: "#fdf3e1", borderRadius: 30, padding: "3px 8px", border: `1px solid ${accent}33` }}>
                <button onClick={onRemove} style={qtyBtnStyle}><span>−</span></button>
                <span style={{ color: accent, fontWeight: 800, fontSize: 14, minWidth: 16, textAlign: "center" }}>{cartQty}</span>
                <button onClick={onAdd} style={qtyBtnStyle}><span>+</span></button>
              </div>
            ) : (
              <button data-sui="btn-primary" onClick={onAdd} style={{
                background: accent, color: "#fff", border: "none", borderRadius: 30,
                padding: "5px 16px", fontWeight: 800, fontSize: 12, cursor: "pointer",
                fontFamily: "'DM Sans', sans-serif"
              }}>+ Agregar</button>
            )}
          </div>
        </div>
      </div>
      <StockBadge product={product} />
    </div>
  );
}

const qtyBtnStyle = {
  background: "none", border: "none", color: "#1a1008",
  fontSize: 18, cursor: "pointer", padding: "0 4px",
  lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center",
  fontWeight: 700
};

Object.assign(window, { GridCard, LaneCard, ProductIcon, categoryColors });