// PDP step — side-by-side: "more of the same" vs "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.PLP_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>
  );
}

const SLOT_LABEL = { bottom: 'Bottom', outer: 'Layer', top: 'Top', onepiece: 'Dress', swim: 'Swim', shoes: 'Shoes', bag: 'Bag' };

// Rainbow (Before) "You may also like" — fixed "more of the same" grid (from rainbowshops.com).
const RAINBOW_PDP_ITEMS = [
  { id: 'rb-pdp-0', name: 'Smocked Acid Wash Strapless Crop Top - tan', type: 'Crop Top', price: 12.97, orig: null, sale: false, cats: [], img: 'assets/sim-0.png' },
  { id: 'rb-pdp-1', name: 'Smocked Acid Wash Strapless Crop Top - black', type: 'Crop Top', price: 12.97, orig: null, sale: false, cats: [], img: 'assets/sim-1.png' },
  { id: 'rb-pdp-2', name: 'Slashed Acid Wash Tube Top - tan', type: 'Tube Top', price: 6.58, orig: null, sale: false, cats: [], img: 'assets/sim-2.png' },
  { id: 'rb-pdp-3', name: 'Patterned Tie Front Tube Top - orange', type: 'Tube Top', price: 6.48, orig: null, sale: false, cats: [], img: 'assets/sim-3.png' },
  { id: 'rb-pdp-4', name: 'Slashed Acid Wash Tube Top - orange', type: 'Tube Top', price: 6.58, orig: null, sale: false, cats: [], img: 'assets/sim-4.png' },
  { id: 'rb-pdp-5', name: 'Side Ruched Cropped Tube Top - black', type: 'Tube Top', price: 5.99, orig: null, sale: false, cats: [], img: 'assets/sim-5.png' },
  { id: 'rb-pdp-6', name: 'Solid Strapless Tube Top - black', type: 'Tube Top', price: 6.99, orig: null, sale: false, cats: [], img: 'assets/sim-6.png' },
  { id: 'rb-pdp-7', name: 'Crepe Knit Smocked Ruffle Tube Top - pink', type: 'Tube Top', price: 10.97, orig: null, sale: false, cats: [], img: 'assets/sim-7.png' },
  { id: 'rb-pdp-8', name: 'Crepe Knit Smocked Ruffle Tube Top - black', type: 'Tube Top', price: 10.97, orig: null, sale: false, cats: [], img: 'assets/sim-8.png' },
  { id: 'rb-pdp-9', name: 'Smocked Peplum Tube Top - blue', type: 'Tube Top', price: 9.99, orig: null, sale: false, cats: [], img: 'assets/sim-9.png' },
  { id: 'rb-pdp-10', name: 'Crepe Knit Smocked Ruffle Tube Top - yellow', type: 'Tube Top', price: 10.97, orig: null, sale: false, cats: [], img: 'assets/sim-10.png' },
  { id: 'rb-pdp-11', name: 'Acid Wash Short Sleeve Crop Top - charcoal', type: 'Crop Top', price: 12.97, orig: null, sale: false, cats: [], img: 'assets/sim-11.png' },
];

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; };

  // Rainbow (alpha): fixed "more of the same" grid from rainbowshops.com.
  // Malachyte: complete the look — complementary categories, ranked for the persona.
  let recs = isMal
    ? window.completeTheLook(anchor, persona, favWeights, 6)
    : RAINBOW_PDP_ITEMS;

  // usr_2093 (denim) — pin the high-waist acid-wash pants at #1, then complementary
  // apparel, then shoes + bags that finish the acid-wash-top outfit.
  if (isMal && persona.id === 'denim') {
    const pinned = {
      id: 'ctl-hw-acid-pants',
      name: 'High Waisted Acid Wash Casual Pants with Tie Waist Belt - black',
      type: 'Pants', slot: 'bottom', price: 16.97, orig: null, sale: false, cats: [],
      img: 'assets/ctl-hw-acid-pants.png',
    };
    const accessories = [
      { id: 'acc-sneaker', name: 'Chunky Platform Canvas Sneakers - black', type: 'Sneakers', slot: 'shoes', price: 7.99, orig: 14.99, sale: true, cats: [], img: 'assets/acc-sneaker.png' },
      { id: 'acc-wedge', name: 'Faux Leather Open Toe Wedges - black', type: 'Wedges', slot: 'shoes', price: 12.99, orig: 19.99, sale: true, cats: [], img: 'assets/acc-wedge.png' },
      { id: 'acc-handbag', name: 'Solid Faux Leather Handbag - black', type: 'Handbag', slot: 'bag', price: 16.99, orig: null, sale: false, cats: [], img: 'assets/acc-handbag.png' },
      { id: 'acc-hobo', name: 'Faux Leather Pleated Hobo Bag - black', type: 'Hobo Bag', slot: 'bag', price: 17.99, orig: null, sale: false, cats: [], img: 'assets/acc-hobo.png' },
    ];
    const apparel = [pinned, ...recs.filter(p => p.id !== pinned.id)].slice(0, 3);
    // #1 pinned pants → a shoe → a bag → remaining apparel + other accessories
    recs = [apparel[0], accessories[0], accessories[2], ...apparel.slice(1), accessories[1], accessories[3]];
  }

  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__brandline"><img src="assets/rainbow-logo.jpeg" alt="Rainbow Shops" className="sbs-col__logo sbs-col__logo--wiha" /><span className="rainbow-wordmark">RAINBOW</span></span>}
        <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">
            rainbowshops.com/products/{anchor.url ? anchor.url.split('/').pop() : 'crop-top'}
            {isMal ? ' · personalized by malachyte' : ''}
          </div>
        </div>

        <WihaChrome />

        <div className="wiha-plp-root">
          <div className="wiha-crumbs">
            <a>Home</a><span className="sep">/</span>
            <a>Women</a><span className="sep">/</span>
            <a>Tops</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">
              <h2 className="pdp-anchor__name">{anchor.name}</h2>
              <div className="pdp-anchor__price">
                ${anchor.price.toFixed(2)}
                {anchor.orig && <span className="wiha-card__orig" style={{ fontSize: 15 }}>${anchor.orig.toFixed(2)}</span>}
              </div>
              <p className="pdp-anchor__desc">
                Acid-wash smocked bodice with a strapless neckline and stretch-back fit.
                A go-anywhere top — dress it up for a night out or down with denim.
              </p>
            </div>
          </div>

          <div className="pdp-recs">
            <div className="pdp-recs__head">
              {isMal ? (
                <>
                  <h3 className="pdp-recs__title">Complete the look</h3>
                  <span className="wiha-rank-chip"><span className="wiha-rank-chip__dot" />Head-to-toe outfit · ranked for {persona.userId}</span>
                </>
              ) : (
                <>
                  <h3 className="pdp-recs__title">You may also like</h3>
                  <span className="sbs-toolbar__static">More {anchor.type.toLowerCase()}s · catalog order</span>
                </>
              )}
            </div>

            <div className="pdp-carousel">
              {recs.map((p, i) => (
                <a key={p.id} className="pdp-rec-mini" href="#" onClick={(e) => e.preventDefault()}>
                  {isMal && <div className="pdp-rec-mini__slot">{SLOT_LABEL[p.slot] || 'Add-on'}</div>}
                  <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 });