const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  
  try {
    console.log('=== DASHBOARD INSPECTION ===');
    
    // Login first
    await page.goto('http://localhost:3000/login-new');
    await page.fill('input[type="email"], input[name="email"]', 'tmartinez@gmail.com');
    await page.fill('input[type="password"], input[name="password"]', 'Skittles@420');
    await page.click('button[type="submit"], input[type="submit"]');
    await page.waitForTimeout(3000);
    
    console.log('1. Inspecting dashboard navigation...');
    
    // Look for any dropdown triggers or menu buttons
    const menuTriggers = await page.locator('button, [role="button"], .dropdown-trigger, [data-dropdown], [aria-haspopup]').all();
    console.log(`   Found ${menuTriggers.length} potential menu triggers`);
    
    for (let i = 0; i < Math.min(menuTriggers.length, 10); i++) {
      const text = await menuTriggers[i].textContent();
      const classes = await menuTriggers[i].getAttribute('class');
      const id = await menuTriggers[i].getAttribute('id');
      console.log(`     ${i + 1}. Text: "${text?.trim()}" | ID: ${id} | Classes: ${classes}`);
    }
    
    // Check for logout button in DOM but hidden
    const logoutButton = page.locator('#logout-btn');
    const logoutExists = await logoutButton.count();
    console.log(`\\n2. Logout button exists: ${logoutExists > 0}`);
    
    if (logoutExists > 0) {
      const isVisible = await logoutButton.isVisible();
      const isEnabled = await logoutButton.isEnabled();
      const boundingBox = await logoutButton.boundingBox();
      
      console.log(`   Is visible: ${isVisible}`);
      console.log(`   Is enabled: ${isEnabled}`);
      console.log(`   Bounding box: ${boundingBox ? JSON.stringify(boundingBox) : 'null'}`);
      
      // Get parent elements to understand structure
      const parent = logoutButton.locator('..');
      const parentClasses = await parent.getAttribute('class');
      console.log(`   Parent classes: ${parentClasses}`);
      
      // Try to find what might be hiding it
      const computedStyle = await logoutButton.evaluate(el => {
        const style = window.getComputedStyle(el);
        return {
          display: style.display,
          visibility: style.visibility,
          opacity: style.opacity,
          position: style.position,
          zIndex: style.zIndex,
          transform: style.transform
        };
      });
      console.log(`   Computed style:`, computedStyle);
    }
    
    // Look for user profile/avatar areas
    console.log('\\n3. Looking for user profile areas...');
    const profileSelectors = [
      '.user-profile',
      '.user-avatar', 
      '.profile-dropdown',
      '[data-testid*="user"]',
      '[data-testid*="profile"]',
      'img[alt*="avatar"]',
      'img[alt*="profile"]'
    ];
    
    for (const selector of profileSelectors) {
      const elements = await page.locator(selector).count();
      if (elements > 0) {
        console.log(`   Found ${elements} elements matching: ${selector}`);
      }
    }
    
    // Try clicking on different areas that might trigger dropdown
    console.log('\\n4. Testing potential dropdown triggers...');
    
    // Look for elements with user info or initials
    const userElements = await page.locator('*').evaluateAll(elements => {
      return elements.filter(el => {
        const text = el.textContent?.trim() || '';
        return text.includes('@') || text.includes('Tyler') || text.includes('martinez') || 
               text.length === 2 && text.match(/^[A-Z]{2}$/); // Initials
      }).map(el => ({
        tagName: el.tagName,
        text: el.textContent?.trim(),
        className: el.className,
        id: el.id
      }));
    });
    
    console.log('   Elements that might be user-related:');
    userElements.forEach((el, i) => {
      console.log(`     ${i + 1}. ${el.tagName}: "${el.text}" | ID: ${el.id} | Classes: ${el.className}`);
    });
    
    // Try to force click the logout button
    console.log('\\n5. Attempting to force click logout...');
    if (logoutExists > 0) {
      try {
        await logoutButton.click({ force: true, timeout: 2000 });
        await page.waitForTimeout(2000);
        console.log(`   Force click attempted, current URL: ${page.url()}`);
      } catch (error) {
        console.log(`   Force click failed: ${error.message}`);
      }
    }
    
  } catch (error) {
    console.error('Inspection failed:', error.message);
  } finally {
    await browser.close();
  }
})();