import { chromium } from 'playwright';

const GOOGLE_UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';

async function main() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    userAgent: GOOGLE_UA
  });

  const page = await context.newPage();

  try {
    console.log('Loading menu page...');
    await page.goto('https://best.treez.io/onlinemenu/?customerType=ADULT', {
      waitUntil: 'networkidle',
      timeout: 30000
    });

    await page.waitForTimeout(3000);

    // Look for category navigation elements
    console.log('\n=== Checking for category filters/tabs ===\n');

    // Check for common category selectors
    const categorySelectors = [
      'nav a',
      'nav button',
      '[role="tab"]',
      '[class*="category"]',
      '[class*="filter"]',
      '[class*="nav"]',
      '.menu-category',
      '.category-filter',
      '.product-category'
    ];

    for (const selector of categorySelectors) {
      const elements = await page.locator(selector).all();
      if (elements.length > 0) {
        console.log(`\nFound ${elements.length} elements matching "${selector}":`);
        for (let i = 0; i < Math.min(10, elements.length); i++) {
          const text = await elements[i].textContent();
          const href = await elements[i].getAttribute('href');
          const className = await elements[i].getAttribute('class');
          console.log(`  ${i + 1}. Text: "${text?.trim()}" | Class: "${className}" | Href: "${href}"`);
        }
      }
    }

    // Check the main navigation
    console.log('\n=== Main Navigation Structure ===\n');
    const navElements = await page.locator('nav, [role="navigation"]').all();
    console.log(`Found ${navElements.length} navigation elements`);

    for (let i = 0; i < navElements.length; i++) {
      const navHtml = await navElements[i].innerHTML();
      console.log(`\nNavigation ${i + 1}:`);
      console.log(navHtml.substring(0, 500)); // First 500 chars
      console.log('...');
    }

    // Check for dropdowns or select elements
    console.log('\n=== Checking for dropdowns ===\n');
    const selects = await page.locator('select').all();
    console.log(`Found ${selects.length} select elements`);

    for (let i = 0; i < selects.length; i++) {
      const options = await selects[i].locator('option').all();
      console.log(`\nSelect ${i + 1} has ${options.length} options:`);
      for (let j = 0; j < Math.min(10, options.length); j++) {
        const text = await options[j].textContent();
        const value = await options[j].getAttribute('value');
        console.log(`  - "${text}" (value: ${value})`);
      }
    }

    // Look for any clickable category buttons
    console.log('\n=== Checking for category buttons ===\n');
    const buttons = await page.locator('button').all();
    console.log(`Found ${buttons.length} total buttons`);

    const categoryButtons = [];
    for (const button of buttons) {
      const text = await button.textContent();
      const className = await button.getAttribute('class');
      if (text && (text.includes('Flower') || text.includes('Edible') || text.includes('Vape') ||
                   text.includes('Concentrate') || text.includes('Pre-Roll') || text.includes('All'))) {
        categoryButtons.push({ text: text.trim(), class: className });
      }
    }

    console.log(`Found ${categoryButtons.length} potential category buttons:`);
    categoryButtons.forEach((btn, i) => {
      console.log(`  ${i + 1}. "${btn.text}" (class: ${btn.class})`);
    });

  } catch (error: any) {
    console.error('Error:', error.message);
  } finally {
    await browser.close();
  }
}

main().catch(console.error);