// mb-ui.jsx — shared UI primitives & icon set for Morar Bem

// ── Icons (stroke, 24 viewBox) ───────────────────────────────
function Icon({ name, size = 22, color = "currentColor", fill = "none", sw = 1.9, style }) {
  const p = { fill: "none", stroke: color, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    search: <><circle cx="11" cy="11" r="7" {...p} /><path d="M20 20l-3.5-3.5" {...p} /></>,
    filter: <><path d="M4 6h16M7 12h10M10 18h4" {...p} /></>,
    sliders: <><path d="M4 8h10M18 8h2M4 16h2M10 16h10" {...p} /><circle cx="16" cy="8" r="2.2" {...p} /><circle cx="8" cy="16" r="2.2" {...p} /></>,
    pin: <><path d="M12 21s7-5.6 7-11a7 7 0 10-14 0c0 5.4 7 11 7 11z" {...p} /><circle cx="12" cy="10" r="2.6" {...p} /></>,
    list: <><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" {...p} /></>,
    map: <><path d="M9 4L4 6v14l5-2 6 2 5-2V4l-5 2-6-2z" {...p} /><path d="M9 4v14M15 6v14" {...p} /></>,
    bag: <><path d="M6 8h12l-1 12H7L6 8z" {...p} /><path d="M9 8a3 3 0 016 0" {...p} /></>,
    wallet: <><rect x="3" y="6" width="18" height="13" rx="3" {...p} /><path d="M3 10h18" {...p} /><circle cx="17" cy="14" r="1.3" fill={color} stroke="none" /></>,
    receipt: <><path d="M6 3h12v18l-2.5-1.5L13 21l-2.5-1.5L8 21l-2-1.5V3z" {...p} /><path d="M9 8h6M9 12h6" {...p} /></>,
    user: <><circle cx="12" cy="8.5" r="3.6" {...p} /><path d="M5 20c1.2-3.6 4-5.2 7-5.2s5.8 1.6 7 5.2" {...p} /></>,
    star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9L3.5 9.7l5.9-.9L12 3.5z" stroke={color} strokeWidth={sw} fill={fill} strokeLinejoin="round" />,
    heart: <path d="M12 20s-7-4.4-7-9.4A4.1 4.1 0 0112 7a4.1 4.1 0 017 3.6c0 5-7 9.4-7 9.4z" stroke={color} strokeWidth={sw} fill={fill} strokeLinejoin="round" />,
    chevR: <path d="M9 5l7 7-7 7" {...p} />,
    chevL: <path d="M15 5l-7 7 7 7" {...p} />,
    chevD: <path d="M5 9l7 7 7-7" {...p} />,
    plus: <path d="M12 5v14M5 12h14" {...p} />,
    minus: <path d="M5 12h14" {...p} />,
    target: <><circle cx="12" cy="12" r="7.5" {...p} /><circle cx="12" cy="12" r="2.4" {...p} /><path d="M12 1.5v3M12 19.5v3M22.5 12h-3M4.5 12h-3" {...p} /></>,
    clock: <><circle cx="12" cy="12" r="8" {...p} /><path d="M12 8v4.5l3 2" {...p} /></>,
    bike: <><circle cx="6" cy="17" r="3" {...p} /><circle cx="18" cy="17" r="3" {...p} /><path d="M6 17l4-8h4l2 8M10 9h6" {...p} /></>,
    store: <><path d="M4 9l1.2-4h13.6L20 9M4 9v10h16V9M4 9h16" {...p} /><path d="M4 9a2.5 2.5 0 005 0 2.5 2.5 0 005 0 2.5 2.5 0 005 0" {...p} /></>,
    check: <path d="M5 12.5l4.5 4.5L19 7" {...p} />,
    close: <path d="M6 6l12 12M18 6L6 18" {...p} />,
    arrowL: <path d="M19 12H5M11 6l-6 6 6 6" {...p} />,
    info: <><circle cx="12" cy="12" r="8.5" {...p} /><path d="M12 11v5M12 8h.01" {...p} /></>,
    bolt: <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" stroke={color} strokeWidth={sw} fill={fill} strokeLinejoin="round" />,
    coin: <><circle cx="12" cy="12" r="8.5" {...p} /><path d="M12 7v10M14.5 9.2c-.6-.7-1.5-1-2.6-1-1.4 0-2.4.7-2.4 1.8 0 2.6 5.2 1.3 5.2 3.9 0 1.2-1.1 1.9-2.6 1.9-1.2 0-2.2-.4-2.8-1.1" {...p} /></>,
    food: <><path d="M7 3v8M5 3v4a2 2 0 004 0V3M7 11v10M17 3c-1.6 0-2.5 2-2.5 5s.9 4 2.5 4v9" {...p} /></>,
    home: <><path d="M4 11l8-6 8 6M6 10v9h12v-9" {...p} /></>,
    health: <><path d="M12 21s-7-4.6-7-10a4.5 4.5 0 017-3.7A4.5 4.5 0 0119 11c0 5.4-7 10-7 10z" {...p} /><path d="M12 9v5M9.5 11.5h5" {...p} /></>,
    beauty: <><path d="M12 3c2 3 2 6 0 8s-2 5 0 8" {...p} /><circle cx="12" cy="11" r="8" {...p} opacity="0.4" /></>,
    fun: <><circle cx="12" cy="12" r="8.5" {...p} /><path d="M8.5 14c1 1.4 2.2 2 3.5 2s2.5-.6 3.5-2M9 9.5h.01M15 9.5h.01" {...p} /></>,
    pet: <><circle cx="7" cy="10" r="1.8" {...p} /><circle cx="12" cy="8" r="1.8" {...p} /><circle cx="17" cy="10" r="1.8" {...p} /><path d="M12 12c-2.5 0-4.5 2-4.5 4.2 0 1.6 1.4 2.3 4.5 2.3s4.5-.7 4.5-2.3C16.5 14 14.5 12 12 12z" {...p} /></>,
    trash: <><path d="M5 7h14M9 7V5h6v2M7 7l1 12h8l1-12" {...p} /></>,
    bell: <><path d="M6 9a6 6 0 1112 0c0 5 2 6 2 6H4s2-1 2-6z" {...p} /><path d="M10 19a2 2 0 004 0" {...p} /></>,
    card: <><rect x="3" y="5" width="18" height="14" rx="3" {...p} /><path d="M3 10h18" {...p} /></>,
    ticket: <><path d="M4 7a2 2 0 012-2h12a2 2 0 012 2v3a2 2 0 000 4v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3a2 2 0 000-4V7z" {...p} /><path d="M14 5v14" {...p} strokeDasharray="2 2" /></>,
    share: <><circle cx="6" cy="12" r="2.5" {...p} /><circle cx="17" cy="6" r="2.5" {...p} /><circle cx="17" cy="18" r="2.5" {...p} /><path d="M8.2 11l6.6-3.6M8.2 13l6.6 3.6" {...p} /></>,
    edit: <><path d="M5 19h3l9-9-3-3-9 9v3z" {...p} /><path d="M13.5 6.5l3 3" {...p} /></>,
    gift: <><rect x="4" y="9" width="16" height="11" rx="1.5" {...p} /><path d="M4 13h16M12 9v11M12 9c-2-4-6-3-6 0M12 9c2-4 6-3 6 0" {...p} /></>,
    headset: <><path d="M5 13v-1a7 7 0 0114 0v1M5 13a2 2 0 012 2v2a2 2 0 01-4 0v-2a2 2 0 012-2zm14 0a2 2 0 00-2 2v2a2 2 0 004 0v-2a2 2 0 00-2-2z" {...p} /></>,
    logout: <><path d="M14 8V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2v-2M9 12h11m0 0l-3-3m3 3l-3 3" {...p} /></>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" {...p} /><circle cx="12" cy="12" r="3" {...p} /></>,
    eyeoff: <><path d="M3 3l18 18M10.6 10.6a3 3 0 004.2 4.2M9.4 5.2A10 10 0 0112 5c6.5 0 10 7 10 7a17 17 0 01-3 3.8M6.2 6.2A17 17 0 002 12s3.5 7 10 7a10 10 0 003-.5" {...p} /></>,
    lock: <><rect x="5" y="11" width="14" height="9" rx="2.5" {...p} /><path d="M8 11V8a4 4 0 018 0v3" {...p} /></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="3" {...p} /><path d="M4 7l8 6 8-6" {...p} /></>,
    phone: <><path d="M5 4h3l2 5-2 1.5a11 11 0 005 5L19 13l2 5v2a2 2 0 01-2 2A16 16 0 013 5a2 2 0 012-1z" {...p} /></>,
    apple: <path d="M16 13c0-2 1.5-3 1.6-3.1-0.9-1.3-2.3-1.5-2.8-1.5-1.2-.1-2.3.7-2.9.7s-1.5-.7-2.5-.7c-1.3 0-2.5.8-3.1 1.9-1.3 2.3-.3 5.7 1 7.6.6.9 1.4 1.9 2.4 1.9.9 0 1.3-.6 2.4-.6s1.5.6 2.5.6 1.7-.9 2.3-1.8c.7-1 1-2 1-2.1-.1 0-1.9-.8-1.9-2.9zM14.5 6.8c.5-.6.9-1.5.8-2.4-.8 0-1.7.5-2.2 1.2-.5.5-.9 1.4-.8 2.3.9 0 1.8-.5 2.2-1.1z" fill={color} stroke="none" />,
    bolt2: <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z" {...p} />,
    book: <><path d="M4 19.5A2.5 2.5 0 016.5 17H20" {...p} /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" {...p} /><path d="M8 7h7M8 11h5" {...p} /></>,
  };
  // SVG inline colado manualmente — força currentColor em fill/stroke
  // para que a cor seja controlada pela prop color sem precisar ajustar o SVG
  if (name && (name.trimStart().startsWith("<svg") || name.trimStart().startsWith("<SVG"))) {
    const forced = name
      // remove <rect> com fill colorido (fundo de exportações Figma/design tools)
      .replace(/<rect\b[^>]*fill="(?!none\b)[^"]*"[^>]*(?:\/>|>[^<]*<\/rect>)/g, '')
      .replace(/width="[^"]*"/g,  `width="${size}"`)
      .replace(/height="[^"]*"/g, `height="${size}"`)
      .replace(/\s+fill="(?!none\b)[^"]*"/g,   ' fill="currentColor"')
      .replace(/\s+stroke="(?!none\b)[^"]*"/g, ' stroke="currentColor"');
    return <span style={{ display:"block", width:size, height:size, flexShrink:0, color, lineHeight:0, ...style }}
      dangerouslySetInnerHTML={{ __html: forced }} />;
  }
  // Iconify icon: formato "lucide/utensils" guardado no banco
  // Usa mask-image para respeitar a prop color de forma precisa
  if (name && name.includes("/")) {
    const [set, icon] = name.split("/");
    const url = `https://api.iconify.design/${set}/${icon}.svg`;
    return <div style={{
      width: size, height: size, flexShrink: 0, display: "block",
      backgroundColor: color || "currentColor",
      WebkitMaskImage: `url("${url}")`, maskImage: `url("${url}")`,
      WebkitMaskSize: "contain", maskSize: "contain",
      WebkitMaskRepeat: "no-repeat", maskRepeat: "no-repeat",
      WebkitMaskPosition: "center", maskPosition: "center",
      ...style,
    }} />;
  }
  return <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: "block", flexShrink: 0, ...style }}>{paths[name]}</svg>;
}

const segIcon = (id) => ({ comer: "food", morar: "home", saude: "health", beleza: "beauty", lazer: "fun", pet: "pet" }[id] || "bag");

// ── Image placeholder (striped) ──────────────────────────────
function Ph({ label = "imagem", h = 120, r = 14, style, className }) {
  return (
    <div className={className} style={{
      height: h, borderRadius: r, position: "relative", overflow: "hidden",
      background: "repeating-linear-gradient(135deg, var(--ph1) 0 10px, var(--ph2) 10px 20px)",
      display: "flex", alignItems: "center", justifyContent: "center", ...style,
    }}>
      <span style={{ font: "600 10px var(--mono)", letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ph-text)", background: "var(--surface)", padding: "2px 7px", borderRadius: 6 }}>{label}</span>
    </div>
  );
}

// ── Badges ───────────────────────────────────────────────────
function Cashback({ pct, small }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 3,
      background: "var(--cb-bg)", color: "var(--cb)", fontWeight: 700,
      fontSize: small ? 11 : 12.5, padding: small ? "2px 7px" : "3px 9px", borderRadius: 999,
    }}>
      <Icon name="coin" size={small ? 12 : 14} sw={2} /> {pct}%
    </span>
  );
}

function Turbo({ pct, small }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 3,
      background: "var(--turbo-grad)", color: "#fff", fontWeight: 700,
      fontSize: small ? 11 : 12.5, padding: small ? "2px 7px" : "3px 9px", borderRadius: 999,
      boxShadow: "0 2px 8px var(--turbo-shadow)",
    }}>
      <Icon name="bolt" size={small ? 11 : 13} sw={2} fill="#fff" color="#fff" /> +{pct}%
    </span>
  );
}

function Stars({ value = 5, size = 13, gap = 1 }) {
  return (
    <span style={{ display: "inline-flex", gap }}>
      {[1, 2, 3, 4, 5].map(i => (
        <Icon key={i} name="star" size={size} sw={1.6}
          color={i <= Math.round(value) ? "#F5A524" : "var(--line)"}
          fill={i <= Math.round(value) ? "#F5A524" : "none"} />
      ))}
    </span>
  );
}

// ── Buttons ──────────────────────────────────────────────────
function Btn({ children, onClick, variant = "primary", full, disabled, style }) {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    height: 52, padding: "0 22px", borderRadius: 15, border: "none", cursor: "pointer",
    font: "650 16px var(--ui)", width: full ? "100%" : undefined,
    transition: "transform .12s, filter .15s, background .15s", opacity: disabled ? 0.45 : 1,
    pointerEvents: disabled ? "none" : "auto",
  };
  const v = {
    primary: { background: "var(--accent)", color: "var(--accent-ink)" },
    dark: { background: "var(--brand)", color: "#fff" },
    soft: { background: "var(--accent-50)", color: "var(--accent)" },
    ghost: { background: "var(--surface)", color: "var(--text)", border: "1.5px solid var(--line)" },
  }[variant];
  return (
    <button onClick={onClick} disabled={disabled} style={{ ...base, ...v, ...style }}
      onMouseDown={e => e.currentTarget.style.transform = "scale(.97)"}
      onMouseUp={e => e.currentTarget.style.transform = "scale(1)"}
      onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}>
      {children}
    </button>
  );
}

function Chip({ children, active, onClick, icon, style }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap",
      height: 36, padding: "0 14px", borderRadius: 999, cursor: "pointer",
      font: "600 13.5px var(--ui)",
      background: active ? "var(--brand)" : "var(--surface)",
      color: active ? "#fff" : "var(--text)",
      border: active ? "1.5px solid var(--brand)" : "1.5px solid var(--line)",
      transition: "all .15s", ...style,
    }}>
      {icon && <Icon name={icon} size={16} sw={2} />}{children}
    </button>
  );
}

// Circular icon button
function IconBtn({ name, onClick, size = 40, badge, color = "var(--text)", bg = "var(--surface)", style }) {
  return (
    <button onClick={onClick} style={{
      width: size, height: size, borderRadius: 999, border: "none", cursor: "pointer",
      background: bg, color, display: "inline-flex", alignItems: "center", justifyContent: "center",
      boxShadow: "0 2px 8px rgba(20,22,58,.08)", position: "relative", ...style,
    }}>
      <Icon name={name} size={size * 0.5} />
      {badge != null && badge > 0 && (
        <span style={{
          position: "absolute", top: -3, right: -3, minWidth: 18, height: 18, padding: "0 4px",
          borderRadius: 999, background: "var(--turbo-grad)", color: "#fff",
          font: "700 11px var(--ui)", display: "flex", alignItems: "center", justifyContent: "center",
          border: "2px solid var(--bg)",
        }}>{badge}</span>
      )}
    </button>
  );
}

Object.assign(window, { Icon, segIcon, Ph, Cashback, Turbo, Stars, Btn, Chip, IconBtn });