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

async function inspectStructure() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  console.log('\n=== INSPECTING OLD SITE (localhost:3000) ===\n');
  await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });

  // Get all class names
  const classes = await page.evaluate(() => {
    const allElements = document.querySelectorAll('*');
    const classSet = new Set();
    allElements.forEach(el => {
      if (el.className && typeof el.className === 'string') {
        el.className.split(' ').forEach(cls => {
          if (cls.trim()) classSet.add(cls.trim());
        });
      }
    });
    return Array.from(classSet).sort();
  });

  console.log('All classes found:');
  console.log(classes.filter(c => c.includes('badge') || c.includes('title') || c.includes('cv') || c.includes('sidebar')).join('\n'));

  // Get main structure
  const structure = await page.evaluate(() => {
    const getStructure = (el, depth = 0) => {
      if (depth > 3) return null;
      const tag = el.tagName.toLowerCase();
      const classes = el.className || '';
      const id = el.id || '';
      return {
        tag,
        classes,
        id,
        children: Array.from(el.children).map(child => getStructure(child, depth + 1)).filter(Boolean)
      };
    };
    return getStructure(document.body);
  });

  console.log('\n\nMain structure:');
  console.log(JSON.stringify(structure, null, 2).substring(0, 5000));

  // Find elements with "badge" or "title" in their classes
  const badgeElements = await page.$$eval('[class*="badge"], [class*="title"]', elements =>
    elements.slice(0, 20).map(el => ({
      tag: el.tagName,
      class: el.className,
      text: el.textContent?.substring(0, 100),
      computedStyles: (() => {
        const computed = window.getComputedStyle(el);
        return {
          fontSize: computed.fontSize,
          fontWeight: computed.fontWeight,
          color: computed.color,
          backgroundColor: computed.backgroundColor,
          padding: computed.padding,
          height: computed.height
        };
      })()
    }))
  );

  console.log('\n\nBadge/Title elements:');
  console.log(JSON.stringify(badgeElements, null, 2));

  console.log('\n\n=== INSPECTING NEW SITE (localhost:1999) ===\n');
  await page.goto('http://localhost:1999', { waitUntil: 'networkidle' });

  const newBadgeElements = await page.$$eval('[class*="badge"], [class*="title"]', elements =>
    elements.slice(0, 20).map(el => ({
      tag: el.tagName,
      class: el.className,
      text: el.textContent?.substring(0, 100),
      computedStyles: (() => {
        const computed = window.getComputedStyle(el);
        return {
          fontSize: computed.fontSize,
          fontWeight: computed.fontWeight,
          color: computed.color,
          backgroundColor: computed.backgroundColor,
          padding: computed.padding,
          height: computed.height
        };
      })()
    }))
  );

  console.log('Badge/Title elements:');
  console.log(JSON.stringify(newBadgeElements, null, 2));

  await browser.close();
}

inspectStructure().catch(console.error);