import puppeteer from 'puppeteer-extra';
import StealthPlugin from 'puppeteer-extra-plugin-stealth';
import { Browser, Page } from 'puppeteer';

puppeteer.use(StealthPlugin());

async function debugDetailedAgeGate() {
  let browser: Browser | null = null;

  try {
    const url = 'https://curaleaf.com/stores/curaleaf-az-48th-street';

    browser = await puppeteer.launch({
      headless: false, // Run with visible browser
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-blink-features=AutomationControlled'
      ]
    });

    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 1080 });
    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 page...');
    await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 60000 });
    await page.waitForTimeout(5000);

    console.log(`\nCurrent URL: ${page.url()}`);

    // Check for dropdown button
    console.log('\nLooking for dropdown button #state...');
    const stateButton = await page.$('button#state');
    console.log('State button found:', !!stateButton);

    if (stateButton) {
      console.log('Clicking state button...');
      await stateButton.click();
      await page.waitForTimeout(1000);

      console.log('\nLooking for dropdown options after clicking...');
      const options = await page.evaluate(() => {
        // Look for any elements that appeared after clicking
        const allElements = Array.from(document.querySelectorAll('[role="option"], [class*="option"], [class*="Option"], li'));
        return allElements.slice(0, 20).map(el => ({
          text: el.textContent?.trim(),
          tag: el.tagName,
          role: el.getAttribute('role'),
          classes: el.className
        }));
      });

      console.log('Found options:', JSON.stringify(options, null, 2));

      // Try to click Arizona
      console.log('\nTrying to click Arizona option...');
      const clicked = await page.evaluate(() => {
        const allElements = Array.from(document.querySelectorAll('[role="option"], [class*="option"], [class*="Option"], li, div, span'));
        const arizonaEl = allElements.find(el => el.textContent?.toLowerCase().includes('arizona'));
        if (arizonaEl instanceof HTMLElement) {
          console.log('Found Arizona element:', arizonaEl.textContent);
          arizonaEl.click();
          return true;
        }
        return false;
      });

      console.log('Arizona clicked:', clicked);

      if (clicked) {
        console.log('Waiting for navigation...');
        try {
          await page.waitForNavigation({ timeout: 10000 });
          console.log('Navigation successful!');
        } catch (e) {
          console.log('Navigation timeout');
        }
      }
    }

    console.log(`\nFinal URL: ${page.url()}`);
    console.log('\nPress Ctrl+C to close browser...');

    // Keep browser open for inspection
    await new Promise(() => {});

  } catch (error) {
    console.error('Error:', error);
    if (browser) await browser.close();
    process.exit(1);
  }
}

debugDetailedAgeGate();