/* ui.jsx — shared icons + small primitives */

/* Minimal line-icon set (simple geometric strokes only) */
const Icon = {
  bag: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M6 8h12l-1 12H7L6 8Z" stroke="currentColor" strokeWidth="1.7" strokeLinejoin="round"/><path d="M9 8V6.5a3 3 0 0 1 6 0V8" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  plus: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>),
  minus: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>),
  x: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"/></svg>),
  check: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 12.5l5 5L20 6.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  arrowR: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  arrowL: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M19 12H5M11 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  leaf: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M5 19c0-7 5-13 14-13 0 9-6 14-14 13Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M5 19c2-4 5-6 9-7.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  bowl: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M3 11h18a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8 7c0-1 .8-1.4.8-2.4M12 7c0-1 .8-1.4.8-2.4M16 7c0-1 .8-1.4.8-2.4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>),
  spoon: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><ellipse cx="9" cy="7" rx="4" ry="5" stroke="currentColor" strokeWidth="1.6"/><path d="M9 12v9" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>),
  heart: ({ filled, ...p } = {}) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 20s-7-4.4-9-9.2C1.6 7 3.6 4 7 4c2 0 3.4 1.2 5 3.2C13.6 5.2 15 4 17 4c3.4 0 5.4 3 4 6.8C19 15.6 12 20 12 20Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" fill={filled ? "currentColor" : "none"}/></svg>),
  truck: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M3 6h11v9H3V6Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M14 9h4l3 3v3h-7V9Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><circle cx="7" cy="17.5" r="1.8" stroke="currentColor" strokeWidth="1.6"/><circle cx="17" cy="17.5" r="1.8" stroke="currentColor" strokeWidth="1.6"/></svg>),
  store: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M4 10v9h16v-9" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M3 5h18l1 5a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0l1-5Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M10 19v-5h4v5" stroke="currentColor" strokeWidth="1.6"/></svg>),
  lock: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><rect x="5" y="10" width="14" height="10" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" strokeWidth="1.6"/></svg>),
  clock: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.6"/><path d="M12 8v4.5l3 1.8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  pin: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><circle cx="12" cy="10" r="2.5" stroke="currentColor" strokeWidth="1.6"/></svg>),
  info: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 11v5M12 8h.01" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  mail: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="m4 7 8 6 8-6" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>),
  flame: (p) => (<svg viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1.5.7-2.3 1.5-3 .2 1 .8 1.6 1.5 1.6.8 0 1-1 .5-2.2C11.3 5.6 11.5 4 12 3Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>),
};

/* tag chip */
function Tag({ k }) {
  const label = (window.TAG_LABEL || {})[k] || k;
  const cls = { vegan: "tag-vegan", veg: "tag-veg", gf: "tag-gf", spicy: "tag-spicy" }[k] || "";
  const ic = k === "vegan" || k === "veg" ? <Icon.leaf /> : k === "spicy" ? <Icon.flame /> : null;
  return (<span className={"tag " + cls}>{ic}{label}</span>);
}

/* image-slot wrapper — renders the drop-in slot with a tasteful tinted fallback */
function Photo({ id, label, tint, shape, radius, style, src }) {
  const ref = React.useRef(null);
  // Real photo: explicit src wins, else look up by slot id in window.IMAGES.
  // Falls back to the tinted empty state when neither is set.
  const photo = src || (window.IMAGES && window.IMAGES[id]) || undefined;
  return (
    <image-slot
      ref={ref}
      id={id}
      src={photo}
      shape={shape || "rect"}
      radius={radius}
      placeholder={label || "Foto hierher ziehen"}
      style={{ background: tint ? mixTint(tint) : "var(--cream-deep)", ...(style || {}) }}
    ></image-slot>
  );
}
function mixTint(hex) {
  // subtle diagonal wash using the soup's tint over cream
  return `repeating-linear-gradient(135deg, ${hexA(hex,0.13)} 0 16px, ${hexA(hex,0.22)} 16px 32px), var(--cream-deep)`;
}
function hexA(hex, a) {
  const h = hex.replace("#", "");
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return `rgba(${r},${g},${b},${a})`;
}

/* quantity stepper */
function Stepper({ qty, onDec, onInc, min }) {
  return (
    <div className="stepper">
      <button onClick={onDec} disabled={qty <= (min ?? 1)} aria-label="weniger"><Icon.minus /></button>
      <span className="qty">{qty}</span>
      <button onClick={onInc} aria-label="mehr"><Icon.plus /></button>
    </div>
  );
}

const CHF = (n) => "CHF " + n.toFixed(2).replace(".", ".");

Object.assign(window, { Icon, Tag, Photo, Stepper, CHF, hexA });
