const puppeteer = require('puppeteer');

async function debugPBTech() {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');

  console.log('Loading PB Tech CPU page...');
  await page.goto('https://www.pbtech.co.nz/category/components/cpus', {
    waitUntil: 'networkidle2',
    timeout: 30000
  });

  console.log('\n=== LOOKING FOR ACTUAL PRODUCT CARDS ===');

  const info = await page.evaluate(() => {
    // Look for cards/items that have both price and product ID
    const buttons = document.querySelectorAll('[data-product-id]');
    const results = [];

    buttons.forEach((btn, index) => {
      if (index >= 3) return; // Just first 3

      const productId = btn.getAttribute('data-product-id');
      const price = btn.getAttribute('data-price');

      // Try to find parent card/container
      let parent = btn.closest('.card, .item, [class*="card"], article, .grid-item, .product-grid-item');
      if (!parent) {
        parent = btn.parentElement?.parentElement?.parentElement; // Go up a few levels
      }

      if (parent) {
        const nameEl = parent.querySelector('h3, h4, h5, .title, [class*="title"], [class*="name"], a[title]');
        const priceEl = parent.querySelector('.price, [class*="price"], .cost');

        results.push({
          productId: productId,
          buttonPrice: price,
          name: nameEl?.textContent?.trim() || nameEl?.getAttribute('title'),
          priceText: priceEl?.textContent?.trim(),
          parentHTML: parent.outerHTML.substring(0, 800),
          parentClass: parent.className
        });
      }
    });

    return results;
  });

  console.log('\nProduct details:');
  info.forEach((p, i) => {
    console.log(`\n--- Product ${i + 1} ---`);
    console.log(`Product ID: ${p.productId}`);
    console.log(`Button Price: $${p.buttonPrice}`);
    console.log(`Name: ${p.name}`);
    console.log(`Price Text: ${p.priceText}`);
    console.log(`Parent Class: ${p.parentClass}`);
    console.log(`Parent HTML: ${p.parentHTML}...`);
  });

  await browser.close();
}

debugPBTech().catch(console.error);