/* Test galerii PDP OSKAR: main img + miniaturka + lightbox przy wyborze wariantu */
const puppeteer = require('C:/xampp/htdocs/vilmax/vilmax-cockpit/node_modules/puppeteer');

const GAL = `(() => {
  const s1 = document.querySelector('.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image');
  const img = s1 && s1.querySelector('img');
  const a = s1 && s1.querySelector('a');
  const thumb = document.querySelector('.flex-control-thumbs li:first-child img, .flex-control-nav li:first-child img');
  const allThumbs = [...document.querySelectorAll('.flex-control-thumbs li img, .flex-control-nav li img')].map(t => t.src.split('/').pop());
  return {
    main: img && img.src.split('/').pop(),
    link: a && a.getAttribute('href').split('/').pop(),
    dataThumb: s1 && s1.getAttribute('data-thumb').split('/').pop(),
    thumbImg: thumb && thumb.src.split('/').pop(),
    vid: document.querySelector('input[name="variation_id"]')?.value,
    thumbs: allThumbs.slice(0, 3).concat(['...', allThumbs.length]),
  };
})()`;

(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();
  page.on('pageerror', e => console.log('PAGEERR', e.message.slice(0, 200)));
  await page.setViewport({ width: 1440, height: 960 });
  await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });
  await new Promise(r => setTimeout(r, 2500));

  console.log('INIT:', JSON.stringify(await page.evaluate(GAL)));

  const click = (attr, val) => page.evaluate((a, v) => {
    const sel = document.querySelector('select[data-attribute_name="attribute_' + a + '"]');
    const btn = [...sel.parentNode.querySelectorAll('.bs-swatch')].find(b => b.dataset.value === v);
    btn.click(); return sel.value;
  }, attr, val);

  console.log('click 77 →', await click('pa_kod-odcienia', '77'));
  await new Promise(r => setTimeout(r, 1800));
  console.log('SHADE77:', JSON.stringify(await page.evaluate(GAL)));
  await page.screenshot({ path: 'gal_shade77.png' });

  console.log('click prawy →', await click('pa_strona', 'prawy'));
  await new Promise(r => setTimeout(r, 1800));
  console.log('P+77:', JSON.stringify(await page.evaluate(GAL)));
  await page.screenshot({ path: 'gal_p77.png' });

  console.log('click 100 →', await click('pa_kod-odcienia', '100'));
  await new Promise(r => setTimeout(r, 1800));
  console.log('P+100:', JSON.stringify(await page.evaluate(GAL)));
  await page.screenshot({ path: 'gal_p100.png' });

  console.log('click lewy →', await click('pa_strona', 'lewy'));
  await new Promise(r => setTimeout(r, 1800));
  console.log('L+100:', JSON.stringify(await page.evaluate(GAL)));
  await page.screenshot({ path: 'gal_l100.png' });

  const cleared = await page.evaluate(() => {
    const c = document.querySelector('.reset_variations');
    if (!c) return 'no reset btn';
    c.click(); return 'clicked';
  });
  console.log('RESET:', cleared);
  await new Promise(r => setTimeout(r, 1800));
  console.log('AFTER RESET:', JSON.stringify(await page.evaluate(GAL)));

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