// aerOS Guest v2 — product cards in 4 layouts. Exports G2Card.
// Outer element is a <div role=button> (not <button>) so the inner quick-add <button> nests validly.

function G2Card({ p, layout, C, t, lang, tw, onSelect, onQuickAdd, animate, idx }) {
  const name = lang === 'en' ? p.en : p.name;
  const desc = lang === 'en' ? p.en_desc : p.desc;
  const price = G2THEME.money(p.price, tw.currency);
  const showPrice = tw.showPrice, showCal = tw.showCal, showDiet = tw.showDiet, showBadge = tw.showBadge, photoMode = tw.photoMode;
  const radius = tw.corners === 'sharp' ? 4 : 18;
  const animStyle = animate ? { animationDelay: (idx % 8) * 45 + 'ms' } : {};
  const open = () => onSelect(p);
  const cardBase = { cursor: 'pointer', textAlign: 'left', fontFamily: G2THEME.BODY_FONT };

  const addBtn = (sz = 30) => (
    <button onClick={(e) => { e.stopPropagation(); onQuickAdd(p); }} aria-label={t.add} style={{ width: sz, height: sz, borderRadius: tw.corners === 'sharp' ? 6 : 10, background: `linear-gradient(180deg, ${C.accent}, ${C.accentDark})`, color: C.accentInk, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, boxShadow: `0 4px 12px -4px ${C.accent}`, transition: 'transform 130ms cubic-bezier(.34,1.56,.64,1)' }} onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.12)'} onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>{Icon.plus({ size: sz * 0.55 })}</button>
  );

  // kcal + prep time shown directly on the card (no need to open the detail).
  const metaChip = (icon, val, unit) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, fontWeight: 600, color: C.muted }}>
      {icon({ size: 12, style: { color: C.muted } })}<span className="tnum">{val}</span>{unit ? ' ' + unit : ''}
    </span>
  );
  // Show kcal + prep whenever the product has them (tenant entered a value);
  // not gated by the showCal tweak — "girilmişse görünsün".
  const hasCal = p.cal != null, hasPrep = p.prep != null;
  // Allergen icons only on the card (names shown in the detail sheet).
  const _icoKey = window.G2DATA && window.G2DATA.ALLERGEN_ICOKEY || {};
  const _algNames = window.G2DATA && window.G2DATA.ALLERGENS || {};
  const allergenIco = (p.allergens && p.allergens.length) ? (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
      {p.allergens.slice(0, 5).map(aid => { const ic = ALLERGEN_ICON[_icoKey[aid] || aid] || Icon.info; return <span key={aid} title={_algNames[aid] || ''} style={{ color: C.ink2, display: 'flex' }}>{ic({ size: 14 })}</span>; })}
    </span>
  ) : null;
  const calChip = (hasCal || hasPrep || allergenIco) ? (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
      {hasCal && metaChip(Icon.flame, p.cal, t.cal)}
      {hasPrep && metaChip(Icon.clock, p.prep, t.prepTime)}
      {allergenIco}
    </span>
  ) : null;

  // ── GALLERY (2-col grid) ──
  if (layout === 'gallery') {
    return (
      <div role="button" onClick={open} style={{ ...cardBase, ...animStyle, border: tw.corners === 'sharp' ? `1px solid ${C.line}` : 'none', background: C.bg2, borderRadius: radius, overflow: 'hidden', boxShadow: tw.corners === 'sharp' ? 'none' : C.cardShadow, display: 'flex', flexDirection: 'column' }}>
        <div style={{ position: 'relative' }}>
          <G2Photo id={p.id} color={p.color} ratio={1.1} radius={0} C={C} t={t} photoMode={photoMode} src={p.image} />
          {showBadge && p.badge && <div style={{ position: 'absolute', top: 8, left: 8 }}><G2Badge kind={p.badge} t={t} small /></div>}
          {showDiet && <div style={{ position: 'absolute', top: 8, right: 8 }}><G2Diet ids={p.diet.slice(0, 2)} C={C} size="sm" /></div>}
        </div>
        <div style={{ padding: 12, display: 'flex', flexDirection: 'column', flex: 1 }}>
          <div style={{ fontFamily: G2THEME.headFont(tw), fontWeight: 600, fontSize: 16, color: C.ink, lineHeight: 1.15 }}>{name}</div>
          <div style={{ fontSize: 11.5, color: C.muted, marginTop: 4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', minHeight: 30, lineHeight: 1.35 }}>{desc}</div>
          {calChip && <div style={{ marginTop: 7 }}>{calChip}</div>}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: 10 }}>
            <span className="tnum" style={{ fontWeight: 800, fontSize: 15.5, color: C.ink }}>{showPrice ? price : ''}</span>
            {addBtn(30)}
          </div>
        </div>
      </div>
    );
  }

  // ── MAGAZINE (full-width photo) ──
  if (layout === 'magazine') {
    return (
      <div role="button" onClick={open} style={{ ...cardBase, ...animStyle, border: 'none', background: C.bg2, borderRadius: radius, overflow: 'hidden', boxShadow: C.cardShadow, width: '100%' }}>
        <div style={{ position: 'relative' }}>
          <G2Photo id={p.id} color={p.color} ratio={2} radius={0} C={C} t={t} photoMode={photoMode} src={p.image} />
          <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 6 }}>{showBadge && p.badge && <G2Badge kind={p.badge} t={t} />}</div>
          {showPrice && <div className="tnum" style={{ position: 'absolute', bottom: 12, right: 12, background: 'rgba(12,9,6,0.82)', backdropFilter: 'blur(6px)', color: '#fff', padding: '7px 13px', borderRadius: 999, fontWeight: 800, fontSize: 15 }}>{price}</div>}
        </div>
        <div style={{ padding: 16 }}>
          <div style={{ fontFamily: G2THEME.headFont(tw), fontWeight: 600, fontSize: 21, color: C.ink, lineHeight: 1.1 }}>{name}</div>
          <div style={{ fontSize: 13.5, color: C.ink2, marginTop: 6, lineHeight: 1.5 }}>{desc}</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 13 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>{showDiet && <G2Diet ids={p.diet} C={C} size="sm" />}{calChip}</div>
            {addBtn(34)}
          </div>
        </div>
      </div>
    );
  }

  // ── TEXT (no photo, compact menu) ──
  if (layout === 'text') {
    return (
      <div role="button" onClick={open} style={{ ...cardBase, ...animStyle, border: 'none', borderBottom: `1px solid ${C.line}`, background: 'transparent', width: '100%', display: 'flex', gap: 14, padding: '14px 2px', alignItems: 'flex-start' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontFamily: G2THEME.headFont(tw), fontWeight: 600, fontSize: 17, color: C.ink }}>{name}</span>
            {showBadge && p.badge && <G2Badge kind={p.badge} t={t} small />}
          </div>
          <div style={{ fontSize: 13, color: C.muted, marginTop: 3, lineHeight: 1.45 }}>{desc}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 7 }}>{showDiet && <G2Diet ids={p.diet} C={C} size="sm" />}{calChip}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, flexShrink: 0 }}>
          {showPrice && <span className="tnum" style={{ fontWeight: 800, fontSize: 16, color: C.ink }}>{price}</span>}
          {addBtn(30)}
        </div>
      </div>
    );
  }

  // ── LIST (default) ──
  return (
    <div role="button" onClick={open} style={{ ...cardBase, ...animStyle, display: 'flex', gap: 13, padding: 11, border: tw.corners === 'sharp' ? `1px solid ${C.line}` : 'none', background: C.bg2, borderRadius: radius, boxShadow: tw.corners === 'sharp' ? 'none' : C.cardShadow, width: '100%' }}>
      <div style={{ width: 96, flexShrink: 0, position: 'relative' }}>
        <G2Photo id={p.id} color={p.color} ratio={1} radius={tw.corners === 'sharp' ? 3 : 13} C={C} t={t} photoMode={photoMode} src={p.image} />
        {showBadge && p.badge && <div style={{ position: 'absolute', top: 6, left: 6 }}><G2Badge kind={p.badge} t={t} small /></div>}
      </div>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <div style={{ fontFamily: G2THEME.headFont(tw), fontWeight: 600, fontSize: 17, color: C.ink, lineHeight: 1.15 }}>{name}</div>
        <div style={{ fontSize: 12.5, color: C.muted, marginTop: 3, lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{desc}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 6 }}>{showDiet && <G2Diet ids={p.diet} C={C} size="sm" />}{calChip}</div>
        <div style={{ marginTop: 'auto', paddingTop: 9, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span className="tnum" style={{ fontWeight: 800, fontSize: 16.5, color: C.ink }}>{showPrice ? price : ''}</span>
          {addBtn(32)}
        </div>
      </div>
    </div>
  );
}

window.G2Card = G2Card;