/**
 * Test if blocking stylesheets affects product detection
 */

import puppeteer, { Page } from 'puppeteer';

const STORE_ID = 'best';

async function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function bypassAgeGate(page: Page): Promise<void> {
  const ageGate = await page.$('[data-testid="age-gate-modal"]');
  if (ageGate) {
    console.log('  Age gate detected, bypassing...');
    const btn = await page.$('[data-testid="age-gate-submit-button"]');
    if (btn) await btn.click();
    await sleep(2000);
  }
}

async function countProducts(page: Page): Promise<{ total: number; withName: number; withPrice: number }> {
  return page.evaluate(() => {
    const all = document.querySelectorAll('[class*="product_product__"]');
    let withName = 0;
    let withPrice = 0;

    all.forEach(el => {
      const hasName = el.querySelector('[class*="product__name"]') || el.querySelector('[class*="name__"]');
      const hasPrice = el.querySelector('[class*="price"]');
      if (hasName) withName++;
      if (hasPrice) withPrice++;
    });

    return { total: all.length, withName, withPrice };
  });
}

async function testWithBlocking(blockStylesheets: boolean): Promise<void> {
  console.log(`\n${'='.repeat(50)}`);
  console.log(`Testing with ${blockStylesheets ? 'BLOCKED' : 'ALLOWED'} stylesheets`);
  console.log('='.repeat(50));

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

  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });

  await page.setRequestInterception(true);
  page.on('request', (req) => {
    const type = req.resourceType();
    if (type === 'image' || type === 'font' || type === 'media') {
      req.abort();
    } else if (type === 'stylesheet' && blockStylesheets) {
      req.abort();
    } else {
      req.continue();
    }
  });

  const url = `https://${STORE_ID}.treez.io/onlinemenu/brands?customerType=ADULT`;
  console.log(`Navigating to ${url}`);

  await page.goto(url, { waitUntil: 'networkidle2', timeout: 60000 });
  await sleep(3000);
  await bypassAgeGate(page);
  await sleep(2000);

  const counts = await countProducts(page);
  console.log(`Total product elements: ${counts.total}`);
  console.log(`With name selector: ${counts.withName}`);
  console.log(`With price selector: ${counts.withPrice}`);

  // Check what classes exist on product elements
  const sampleClasses = await page.evaluate(() => {
    const products = document.querySelectorAll('[class*="product_product__"]');
    const sample = products[0];
    if (!sample) return 'No products found';

    const children = Array.from(sample.querySelectorAll('*')).slice(0, 20);
    return children.map(el => ({
      tag: el.tagName,
      class: el.className?.toString?.().slice(0, 80) || '',
    }));
  });

  console.log('\nSample product children:');
  if (Array.isArray(sampleClasses)) {
    sampleClasses.forEach(c => console.log(`  [${c.tag}] ${c.class}`));
  } else {
    console.log(`  ${sampleClasses}`);
  }

  await browser.close();
}

async function main() {
  console.log('Testing stylesheet impact on Treez product detection');

  await testWithBlocking(true);  // Block stylesheets
  await testWithBlocking(false); // Allow stylesheets
}

main().catch(console.error);