const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ viewport: { width: 1280, height: 900 } });
  const page = await context.newPage();

  // Set token directly via localStorage
  await page.goto('http://127.0.0.1:5001/pos/catalog', { waitUntil: 'networkidle' });
  await page.evaluate(() => {
    localStorage.setItem('pos_token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0eXBlIjoicG9zX2FjY2VzcyIsInRlbmFudF9pZCI6MzEsImVtcGxveWVlX2lkIjoxLCJyb2xlIjoib3duZXIiLCJuYW1lIjoiVGVzdCIsImJyYW5jaF9pZCI6MSwicGVybWlzc2lvbnMiOlsiaW52ZW50b3J5LnZpZXciLCJpbnZlbnRvcnkuZWRpdCIsImludmVudG9yeS5jcmVhdGUiLCJjYXRhbG9nLnZpZXciLCJjb25maWcuZWRpdF9wcmljZXMiXX0.iWLHGSnOeNW-eprH0-U1YkWZksIJqiuBc0ZZ20xdZq0');
  });
  await page.reload({ waitUntil: 'networkidle' });

  // Wait for console logs
  page.on('console', msg => {
    if (msg.type() === 'error') {
      console.log('CONSOLE ERROR:', msg.text());
    }
  });

  await page.waitForTimeout(2000);
  await page.screenshot({ path: '/tmp/catalog_initial.png', fullPage: false });

  // Try to select Chevrolet brand
  const brands = await page.locator('.nav-card').all();
  console.log('Brands count:', brands.length);
  
  for (const b of brands.slice(0, 5)) {
    const text = await b.textContent();
    console.log('Brand:', text);
  }

  // Find Chevrolet
  const chevy = await page.locator('.nav-card').filter({ hasText: /Chevrolet/i }).first();
  if (await chevy.isVisible().catch(() => false)) {
    await chevy.click();
    await page.waitForTimeout(1500);
    await page.screenshot({ path: '/tmp/catalog_models.png', fullPage: false });

    // Find Aveo
    const aveo = await page.locator('.nav-card').filter({ hasText: /Aveo/i }).first();
    if (await aveo.isVisible().catch(() => false)) {
      await aveo.click();
      await page.waitForTimeout(1500);
      await page.screenshot({ path: '/tmp/catalog_years.png', fullPage: false });

      // Find 2018
      const y2018 = await page.locator('.nav-card').filter({ hasText: /2018/i }).first();
      if (await y2018.isVisible().catch(() => false)) {
        await y2018.click();
        await page.waitForTimeout(1500);
        await page.screenshot({ path: '/tmp/catalog_engines.png', fullPage: false });

        // Find 1.5L
        const engine = await page.locator('.nav-card').filter({ hasText: /1\.5/i }).first();
        if (await engine.isVisible().catch(() => false)) {
          await engine.click();
          await page.waitForTimeout(2500);
          await page.screenshot({ path: '/tmp/catalog_categories.png', fullPage: false });

          // Try to find Supplier Catalog
          const sc = await page.locator('.nav-card').filter({ hasText: /Proveedores/i }).first();
          if (await sc.isVisible().catch(() => false)) {
            console.log('FOUND Supplier Catalog card');
            await sc.click();
            await page.waitForTimeout(2000);
            await page.screenshot({ path: '/tmp/catalog_subgroups.png', fullPage: false });

            // Find SUSPENSION
            const susp = await page.locator('.nav-card').filter({ hasText: /Suspension/i }).first();
            if (await susp.isVisible().catch(() => false)) {
              await susp.click();
              await page.waitForTimeout(2000);
              await page.screenshot({ path: '/tmp/catalog_parts.png', fullPage: false });
            }
          } else {
            console.log('Supplier Catalog card NOT found');
            const allCards = await page.locator('.nav-card').all();
            for (const c of allCards) {
              console.log('Card:', await c.textContent());
            }
          }
        }
      }
    }
  }

  await browser.close();
  console.log('Done. Screenshots saved to /tmp/catalog_*.png');
})();