// PDP step — side-by-side: "more of the same" recs vs Malachyte cross-category "complete the look"
function StepPDP({ state, setState }) {
  const persona = window.PERSONAS.find(p => p.id === state.persona) || window.PERSONAS[0];
  const favorites = state.favorites || [];

  const anchor = window.PRODUCTS.find(p => p.id === window.PDP_ANCHOR_ID) || window.PRODUCTS[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; };

  // BEFORE — "more of the same": same category, mostly same house, by item id (no diversity).
  const moreOfSame = window.PRODUCTS
    .filter(p => p.id !== anchor.id && p.cats[0] === anchor.cats[0] &&
      (p.brandSlug === anchor.brandSlug || p.cats[1] === anchor.cats[1]))
    .sort((a, b) => {
      if ((b.brandSlug === anchor.brandSlug) !== (a.brandSlug === anchor.brandSlug))
        return b.brandSlug === anchor.brandSlug ? 1 : -1;
      return String(a.sku).localeCompare(String(b.sku));
    })
    .slice(0, 6);

  // AFTER — cross-category complementary pairing, colour-matched + persona-ranked.
  const complete = window.complementaryFor(anchor, persona, favWeights).slice(0, 6);

  const recs = isMal ? complete : moreOfSame;
  const slug = anchor.url ? anchor.url.split('/').pop() : 'product';

  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" />
          : <img src="assets/mygemma-logo.png" alt="MyGemma" className="sbs-col__logo sbs-col__logo--mg" />}
        <span className="sbs-col__caption">{isMal ? 'Complete the look' : 'More of the same'}</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">
            mygemma.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>{anchor.type}s</a><span className="sep">/</span>
            <span className="current">{anchor.brand}</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="mg-card__brand">{anchor.brand}</div>
              <h2 className="pdp-anchor__name">{anchor.name}</h2>
              <div className="pdp-anchor__price">
                ${anchor.price.toLocaleString()}
                {anchor.orig && <span className="wiha-card__orig" style={{ fontSize: 15 }}>${anchor.orig.toLocaleString()}</span>}
              </div>
              <p className="pdp-anchor__desc">
                Authenticated pre-owned · excellent condition. {anchor.brand}'s everyday icon
                in {anchor.color.toLowerCase()}. Includes dust bag. Insured shipping, 14-day returns.
              </p>
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              <h3 className="pdp-recs__title">
                {isMal
                  ? `Complete the look — paired for ${persona.name.split('·')[0].trim().toLowerCase()}`
                  : 'You may also like'}
              </h3>
            </div>

            <div className={`wiha-grid-wrap wiha-grid-wrap--${mode} pdp-recs__wrap`}>
              <div className="wiha-grid-railbar">
                <span className="wiha-grid-railbar__dot" />
                {isMal
                  ? <>CROSS-CATEGORY · COLOUR-MATCHED · <b>{persona.userId}</b></>
                  : <>SAME CATEGORY · SAME HOUSE · <b>STATIC</b></>}
              </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__brand">{p.brand}</div>
                  <div className="pdp-rec-mini__name">{p.name}</div>
                  <div className="pdp-rec-mini__price">${p.price.toLocaleString()}</div>
                </a>
              ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { StepPDP });