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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
  const page = await context.newPage();

  try {
    console.log('Navigating to http://localhost:1999/?lang=en');
    await page.goto('http://localhost:1999/?lang=en', { waitUntil: 'networkidle' });

    // Wait for page to settle
    await page.waitForTimeout(2000);

    // Take full page screenshot
    console.log('Taking full-page screenshot...');
    await page.screenshot({ path: '/tmp/cv-fullpage.png', fullPage: true });

    // Take viewport screenshot (top area)
    console.log('Taking viewport screenshot...');
    await page.screenshot({ path: '/tmp/cv-viewport.png', clip: { x: 0, y: 0, width: 1920, height: 300 } });

    // Get page HTML structure
    console.log('\n=== PAGE STRUCTURE (first 2000 chars of body) ===');
    const bodyHTML = await page.locator('body').innerHTML();
    console.log(bodyHTML.substring(0, 2000));

    // Check for header element
    console.log('\n=== HEADER ELEMENT ===');
    const headers = await page.locator('header').all();
    console.log(`Found ${headers.length} header elements`);
    if (headers.length > 0) {
      const headerHTML = await headers[0].innerHTML();
      console.log(headerHTML);
    }

    // Check for language selector
    console.log('\n=== LANGUAGE SELECTOR ===');
    const langButtons = await page.locator('button[hx-get*="lang"]').all();
    console.log(`Found ${langButtons.length} language buttons`);
    for (const btn of langButtons) {
      const text = await btn.textContent();
      const classes = await btn.getAttribute('class');
      const visible = await btn.isVisible();
      console.log(`Button: "${text.trim()}" | Classes: ${classes} | Visible: ${visible}`);
    }

    // Check for any toggle buttons
    console.log('\n=== TOGGLE BUTTONS ===');
    const toggles = await page.locator('button').all();
    console.log(`Found ${toggles.length} total buttons on page`);
    for (const toggle of toggles) {
      const text = await toggle.textContent();
      const classes = await toggle.getAttribute('class');
      const id = await toggle.getAttribute('id');
      const hxGet = await toggle.getAttribute('hx-get');
      const visible = await toggle.isVisible();
      console.log(`- "${text.trim()}" | ID: ${id} | Classes: ${classes} | hx-get: ${hxGet} | Visible: ${visible}`);
    }

    // Check for elements with specific classes
    console.log('\n=== ELEMENTS WITH "toggle" IN CLASS ===');
    const toggleClass = await page.locator('[class*="toggle"]').all();
    console.log(`Found ${toggleClass.length} elements with "toggle" in class`);
    for (const el of toggleClass) {
      const tagName = await el.evaluate(e => e.tagName);
      const classes = await el.getAttribute('class');
      const text = await el.textContent();
      console.log(`- ${tagName}: ${classes} | Text: "${text.trim().substring(0, 50)}"`);
    }

    // Check for any elements with "margin" in their text
    console.log('\n=== ELEMENTS WITH "MARGIN" TEXT ===');
    const marginElements = await page.locator('text=/margin/i').all();
    console.log(`Found ${marginElements.length} elements with "margin" in text`);
    for (const el of marginElements) {
      const text = await el.textContent();
      const tagName = await el.evaluate(e => e.tagName);
      const classes = await el.getAttribute('class');
      console.log(`- ${tagName}: "${text.trim()}" | Classes: ${classes}`);
    }

    // Get all visible elements in the top 100px
    console.log('\n=== ELEMENTS IN TOP 100px ===');
    const topElements = await page.evaluate(() => {
      const elements = Array.from(document.querySelectorAll('*'));
      const topEls = elements.filter(el => {
        const rect = el.getBoundingClientRect();
        return rect.top >= 0 && rect.top < 100 && rect.width > 0 && rect.height > 0;
      }).map(el => ({
        tag: el.tagName,
        class: el.className,
        id: el.id,
        text: el.textContent?.substring(0, 50).trim(),
        top: el.getBoundingClientRect().top,
        left: el.getBoundingClientRect().left,
        width: el.getBoundingClientRect().width,
        height: el.getBoundingClientRect().height
      }));
      return topEls.slice(0, 20); // First 20 elements
    });
    console.log(JSON.stringify(topElements, null, 2));

    console.log('\n✅ Screenshots saved to:');
    console.log('   /tmp/cv-fullpage.png - Full page');
    console.log('   /tmp/cv-viewport.png - Top 300px viewport');

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