/* Screenshot PDP OSKAR + test wyboru wariantu (Puppeteer) */
const puppeteer = require('C:/xampp/htdocs/vilmax/vilmax-cockpit/node_modules/puppeteer');

(async () => {
  const url = 'https://bazarowy-swiat.pl/produkt/naroznik-oskar-tilia-warianty-l-p/?v=' + Date.now();
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 960 });
  await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });
  await new Promise(r => setTimeout(r, 1500));

  const info = await page.evaluate(() => {
    const sels = [...document.querySelectorAll('form.variations_form select[data-attribute_name]')];
    const sw = [...document.querySelectorAll('.bs-swatches')].map(w => ({
      count: w.querySelectorAll('.bs-swatch').length,
      img: w.querySelectorAll('.bs-swatch--img').length,
    }));
    return {
      selects: sels.map(s => ({ name: s.getAttribute('data-attribute_name'), hidden: s.classList.contains('bs-swatch-hidden'), opts: s.options.length })),
      swatchGroups: sw,
      labels: [...document.querySelectorAll('.variations th.label label')].map(l => l.textContent.trim()),
    };
  });
  console.log('INIT:', JSON.stringify(info, null, 1));
  await page.screenshot({ path: 'pdp_init.png', fullPage: false });

  // kliknij swatch odcienia granat (77) w grupie kod-odcienia
  const clicked = await page.evaluate(() => {
    const sel = document.querySelector('select[data-attribute_name="attribute_pa_kod-odcienia"]');
    if (!sel) return 'no sel';
    const wrap = sel.parentNode.querySelector('.bs-swatches');
    const btn = [...wrap.querySelectorAll('.bs-swatch')].find(b => b.dataset.value === '77');
    if (!btn) return 'no btn 77';
    btn.click();
    return 'clicked ' + btn.title;
  });
  console.log('CLICK shade:', clicked);
  await new Promise(r => setTimeout(r, 1200));
  await page.screenshot({ path: 'pdp_shade77.png' });

  // kliknij strone prawy
  const clicked2 = await page.evaluate(() => {
    const sel = document.querySelector('select[data-attribute_name="attribute_pa_strona"]');
    const wrap = sel.parentNode.querySelector('.bs-swatches');
    const btn = [...wrap.querySelectorAll('.bs-swatch')].find(b => b.dataset.value === 'prawy');
    btn.click();
    return btn.title;
  });
  console.log('CLICK side:', clicked2);
  await new Promise(r => setTimeout(r, 1500));

  const after = await page.evaluate(() => {
    const gal = document.querySelector('.woocommerce-product-gallery__image img');
    const price = document.querySelector('.single_variation .price');
    const avail = document.querySelector('.woocommerce-variation-availability');
    const selReadouts = [...document.querySelectorAll('.bs-swatch-selected')].map(s => s.textContent);
    return {
      img: gal && gal.src,
      price: price && price.textContent,
      avail: avail && avail.textContent.trim(),
      readouts: selReadouts,
      addToCartDisabled: document.querySelector('.single_add_to_cart_button')?.disabled,
      variationId: document.querySelector('input[name="variation_id"]')?.value,
    };
  });
  console.log('AFTER:', JSON.stringify(after, null, 1));
  await page.screenshot({ path: 'pdp_p77.png' });

  // mobile
  await page.setViewport({ width: 390, height: 844 });
  await page.goto(url + '&m=1', { waitUntil: 'networkidle2' });
  await new Promise(r => setTimeout(r, 1500));
  await page.screenshot({ path: 'pdp_mobile.png' });

  await browser.close();
})().catch(e => { console.error('ERR', e.message); process.exit(1); });