import { chromium } from 'playwright';

async function debugCuraleafButtons() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
    viewport: { width: 1280, height: 720 }
  });

  const page = await context.newPage();

  await page.goto('https://curaleaf.com/stores/curaleaf-dispensary-48th-street');
  await page.waitForTimeout(2000);

  console.log('\n=== BEFORE STATE SELECTION ===\n');

  // Get all buttons
  const buttonsBefore = await page.locator('button, [role="button"], a').evaluateAll(elements => {
    return elements.map(el => ({
      tag: el.tagName,
      text: el.textContent?.trim().substring(0, 50),
      id: el.id,
      class: el.className,
      visible: el.offsetParent !== null
    })).filter(b => b.visible);
  });

  console.log('Buttons before state selection:');
  buttonsBefore.forEach((b, i) => console.log(`${i + 1}. ${b.tag} - "${b.text}" [id: ${b.id}]`));

  // Click state dropdown
  const stateButton = page.locator('button#state').first();
  await stateButton.click();
  await page.waitForTimeout(1000);

  // Click Arizona
  const arizona = page.locator('[role="option"]').filter({ hasText: /^Arizona$/i }).first();
  await arizona.click();
  await page.waitForTimeout(2000);

  console.log('\n=== AFTER STATE SELECTION ===\n');

  const buttonsAfter = await page.locator('button, [role="button"], a').evaluateAll(elements => {
    return elements.map(el => ({
      tag: el.tagName,
      text: el.textContent?.trim().substring(0, 50),
      id: el.id,
      class: el.className,
      type: el.getAttribute('type'),
      visible: el.offsetParent !== null
    })).filter(b => b.visible);
  });

  console.log('Buttons after state selection:');
  buttonsAfter.forEach((b, i) => console.log(`${i + 1}. ${b.tag} - "${b.text}" [id: ${b.id}] [type: ${b.type}]`));

  // Check for any form elements
  const forms = await page.locator('form').count();
  console.log(`\nForms on page: ${forms}`);

  if (forms > 0) {
    const formActions = await page.locator('form').evaluateAll(forms => {
      return forms.map(f => ({
        action: f.action,
        method: f.method
      }));
    });
    console.log('Form details:', formActions);
  }

  await page.screenshot({ path: '/tmp/curaleaf-debug-after-state.png', fullPage: true });
  console.log('\n📸 Screenshot: /tmp/curaleaf-debug-after-state.png');

  await browser.close();
}

debugCuraleafButtons();