// PDP step — side-by-side: generic recommendations vs persona-aware bundles.
// Anchor auto-selects a layer piece from the visitor's gender that best fits their vector.

// Coarse category groups used to build "complete the look" — recommend items from
// DIFFERENT groups than the anchor (a jacket → base layers, bottoms, socks, beanie…).
function pdpGroup(p) {
  if (p.cats.includes('jacket')) return 'outer';
  if (p.cats.includes('hoodie') || p.cats.includes('zip') || p.cats.includes('sweater') || p.cats.includes('vest')) return 'mid';
  if (p.cats.includes('underwear')) return 'under';
  if (p.cats.includes('bottom')) return 'bottom';
  if (p.cats.includes('accessory')) return 'acc';
  if (p.cats.includes('top') || p.cats.includes('tank')) return 'top';
  return 'other';
}

function StepPDP({ state, setState }) {
  const persona = window.PERSONAS.find(p => p.id === state.persona) || window.PERSONAS[0];
  const favorites = state.favorites || [];

  const genderPool = window.PRODUCTS.filter(p => p.gender === persona.gender);
  const layerPool = genderPool.filter(p => p.cats.includes('layer'));
  const anchor = window.rankProducts(layerPool.length ? layerPool : genderPool, persona, null)[0] || genderPool[0];

  return (
    <div className="sbs-shell">
      <div className="sbs-grid">
        <PDPColumn mode="alpha" anchor={anchor} persona={persona} favorites={favorites} />
        <PDPColumn mode="malachyte" anchor={anchor} persona={persona} favorites={favorites} />
      </div>
    </div>
  );
}

function PDPColumn({ mode, anchor, persona, favorites }) {
  const isMal = mode === 'malachyte';
  const favWeights = window.buildFavWeights ? window.buildFavWeights(favorites) : null;
  const handleImgErr = (e) => { e.target.src = window.PRODUCT_FALLBACK; };

  // Two philosophies:
  //  · Ibex today (alpha): naive "you may also like" — MORE OF THE SAME category as the anchor.
  //  · With Malachyte:      "complete the look" — COMPLEMENTARY groups the anchor doesn't cover.
  const anchorGroup = pdpGroup(anchor);
  let recs;

  if (!isMal) {
    // Naive "you may also like" — more upper-body layers & tops like the anchor (hoodies,
    // zips, sweaters, tees), regardless of what the visitor actually needs.
    const SIMILAR = ['outer', 'mid', 'top'];
    const sameFamily = window.PRODUCTS.filter(p =>
      p.id !== anchor.id && p.gender === anchor.gender && SIMILAR.includes(pdpGroup(p))
    );
    recs = [...sameFamily].sort((a, b) => (b.isNew - a.isNew) || (b.price - a.price)).slice(0, 6);
  } else {
    const comp = window.PRODUCTS.filter(p =>
      p.id !== anchor.id && p.gender === anchor.gender && pdpGroup(p) !== anchorGroup && pdpGroup(p) !== 'other'
    );
    const buckets = {};
    for (const p of comp) { (buckets[pdpGroup(p)] = buckets[pdpGroup(p)] || []).push(p); }
    for (const k in buckets) buckets[k] = window.rankProducts(buckets[k], persona, favWeights);
    const groupOrder = Object.keys(buckets).sort((a, b) =>
      (buckets[b][0] ? window.scoreFor(buckets[b][0], persona, favWeights) : -9) -
      (buckets[a][0] ? window.scoreFor(buckets[a][0], persona, favWeights) : -9));
    recs = [];
    for (let idx = 0; recs.length < 6; idx++) {
      let any = false;
      for (const g of groupOrder) {
        if (buckets[g] && buckets[g][idx]) { recs.push(buckets[g][idx]); any = true; if (recs.length >= 6) break; }
      }
      if (!any) break;
    }
  }

  const collection = anchor.gender === 'Men' ? 'mens' : 'womens';
  const slug = anchor.url ? anchor.url.split('/').pop() : 'merino-layer';

  return (
    <div className={`sbs-col sbs-col--${mode}`}>
      <div className="sbs-col__head">
        <span className="sbs-col__tag">{isMal ? 'AFTER' : 'BEFORE'}</span>
        {isMal
          ? <img src="assets/malachyte-logo-gradient.png" alt="Malachyte" className="sbs-col__logo sbs-col__logo--mal" />
          : <span className="sbs-col__logo sbs-col__logo--ibex"><img src="assets/ibex-logo.png" alt="Ibex" /><b>ibex</b></span>}
        <span className="sbs-col__caption">{isMal ? 'Persona-aware bundles' : 'Static recommendations'}</span>
      </div>

      <div className="sbs-col__viewport">
        <div className="demo-urlbar">
          <div className="demo-urlbar__dots"><span /><span /><span /></div>
          <div className="demo-urlbar__url">
            ibex.com/products/{slug}{isMal ? ' · personalized by malachyte' : ''}
          </div>
        </div>

        <WihaChrome />

        <div className="wiha-plp-root">
          <div className="wiha-crumbs">
            <a>Home</a><span className="sep">/</span>
            <a>Shop All {anchor.gender}</a><span className="sep">/</span>
            <span className="current">{anchor.name}</span>
          </div>

          <div className="pdp-anchor">
            <div className="pdp-anchor__img">
              <img src={anchor.img} alt={anchor.name} onError={handleImgErr} />
            </div>
            <div className="pdp-anchor__body">
              <div className="pdp-anchor__type">{anchor.type} · {anchor.gender}</div>
              <h2 className="pdp-anchor__name">{anchor.name}</h2>
              <div className="pdp-anchor__price">
                ${anchor.price.toFixed(2)}
                {anchor.orig && <span className="pdp-anchor__orig">${anchor.orig.toFixed(2)}</span>}
              </div>
              <p className="pdp-anchor__desc">
                100% ZQ-certified merino wool. Naturally temperature-regulating and
                odor-resistant, soft next to skin. Available in {anchor.colors > 1 ? `${anchor.colors} colorways` : 'a signature colorway'}.
              </p>
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              {isMal ? (
                <h3 className="pdp-recs__title">Complete the kit — for {persona.chips[0].toLowerCase()} shoppers</h3>
              ) : (
                <h3 className="pdp-recs__title">You may also like</h3>
              )}
            </div>

            <div className="pdp-carousel">
              {recs.map((p, i) => (
                <a key={p.id} className="pdp-rec-mini" href="#" onClick={(e) => e.preventDefault()}>
                  <div className="pdp-rec-mini__img">
                    <img src={p.img} alt={p.name} onError={handleImgErr} />
                  </div>
                  <div className="pdp-rec-mini__name">{p.name}</div>
                  <div className="pdp-rec-mini__price">${p.price.toFixed(2)}</div>
                  {isMal && i < 3 && <div className="pdp-rec-mini__rank">#{i + 1}</div>}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepPDP });