/**
 * Find actual brand elements on /brands page
 */

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 main() {
  console.log('='.repeat(60));
  console.log('Finding Brand Elements on /brands page');
  console.log('='.repeat(60));

  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) => {
    if (['image', 'font', 'media'].includes(req.resourceType())) {
      req.abort();
    } else {
      req.continue();
    }
  });

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

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

  // Check current URL
  const currentUrl = page.url();
  console.log(`\nCurrent URL: ${currentUrl}`);

  // Look for ANY links on the page that might be brand links
  console.log('\n[1] Looking for all anchor links with "brand" in href or class...');

  const brandLinks = await page.evaluate(() => {
    const links: { href: string; text: string }[] = [];

    document.querySelectorAll('a').forEach((a: Element) => {
      const href = a.getAttribute('href') || '';
      const text = a.textContent?.trim().slice(0, 50) || '';
      const className = a.className || '';

      if (href.includes('brand') || href.includes('Brand') ||
          className.includes('brand') || className.includes('Brand')) {
        links.push({ href, text });
      }
    });

    return links;
  });

  console.log(`Found ${brandLinks.length} brand-related links:`);
  brandLinks.slice(0, 30).forEach(l => console.log(`  "${l.text}" → ${l.href}`));

  // Look for the navigation/dropdown
  console.log('\n[2] Looking at navigation structure...');

  const navItems = await page.evaluate(() => {
    const items: string[] = [];

    document.querySelectorAll('nav a, [class*="nav"] a, header a').forEach((a: Element) => {
      const text = a.textContent?.trim();
      const href = a.getAttribute('href') || '';
      if (text && text.length < 30) {
        items.push(`${text} (${href})`);
      }
    });

    return [...new Set(items)];
  });

  console.log('Navigation items:');
  navItems.forEach(item => console.log(`  - ${item}`));

  // Look for grid containers that might hold brand cards
  console.log('\n[3] Looking for brand card containers...');

  const containers = await page.evaluate(() => {
    const results: { selector: string; count: number; sample: string }[] = [];

    // Try various selectors for brand cards
    const selectors = [
      '[class*="brand_brand"]',
      '[class*="brands_brand"]',
      '[class*="brand-card"]',
      '[class*="brandCard"]',
      '[class*="BrandCard"]',
      'a[href*="/brand/"]',
      '[data-testid*="brand"]',
    ];

    selectors.forEach(sel => {
      const els = document.querySelectorAll(sel);
      if (els.length > 0) {
        const first = els[0];
        results.push({
          selector: sel,
          count: els.length,
          sample: first.textContent?.trim().slice(0, 50) || '',
        });
      }
    });

    return results;
  });

  console.log('Brand containers found:');
  containers.forEach(c => console.log(`  ${c.selector}: ${c.count} elements, sample: "${c.sample}"`));

  // Get ALL unique hrefs that contain /brand/
  console.log('\n[4] All links containing "/brand/" in href...');

  const brandHrefs = await page.evaluate(() => {
    const hrefs: string[] = [];

    document.querySelectorAll('a[href*="/brand/"]').forEach((a: Element) => {
      const href = a.getAttribute('href');
      if (href && !hrefs.includes(href)) {
        hrefs.push(href);
      }
    });

    return hrefs;
  });

  console.log(`Found ${brandHrefs.length} unique brand hrefs:`);
  brandHrefs.forEach(href => console.log(`  ${href}`));

  // Take screenshot
  await page.screenshot({ path: '/tmp/treez-brands-page.png', fullPage: false });
  console.log('\n[5] Screenshot saved to /tmp/treez-brands-page.png');

  // Scroll and see if more brands load
  console.log('\n[6] Scrolling to load more brands...');

  for (let i = 0; i < 10; i++) {
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
    await sleep(1500);

    const brandCount = await page.evaluate(() =>
      document.querySelectorAll('a[href*="/brand/"]').length
    );
    const productCount = await page.evaluate(() =>
      document.querySelectorAll('a[href*="/product/"]').length
    );

    console.log(`  Scroll ${i + 1}: brand links=${brandCount}, product links=${productCount}`);
  }

  // Final brand href list
  const finalBrandHrefs = await page.evaluate(() => {
    const hrefs: string[] = [];
    document.querySelectorAll('a[href*="/brand/"]').forEach((a: Element) => {
      const href = a.getAttribute('href');
      if (href && !hrefs.includes(href)) hrefs.push(href);
    });
    return hrefs;
  });

  console.log(`\n[7] Final brand href list (${finalBrandHrefs.length} brands):`);
  finalBrandHrefs.forEach(href => console.log(`  ${href}`));

  await browser.close();
}

main().catch(console.error);