const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  
  try {
    console.log('=== USER MENU LOGOUT TEST ===');
    
    // 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. Logged in successfully');
    
    // Try clicking the user menu button first
    console.log('2. Looking for user menu button...');
    const userMenuBtn = page.locator('#user-menu-btn');
    const hasUserMenu = await userMenuBtn.count() > 0;
    console.log(`   User menu button exists: ${hasUserMenu}`);
    
    if (hasUserMenu) {
      console.log('3. Clicking user menu to open dropdown...');
      await userMenuBtn.click();
      await page.waitForTimeout(1000);
      
      // Now check if logout button is visible
      const logoutBtn = page.locator('#logout-btn');
      const isLogoutVisible = await logoutBtn.isVisible();
      console.log(`   Logout button visible after menu click: ${isLogoutVisible}`);
      
      if (isLogoutVisible) {
        console.log('4. Attempting to click logout button...');
        await logoutBtn.click();
        await page.waitForTimeout(2000);
        
        const currentUrl = page.url();
        console.log(`   Current URL after logout: ${currentUrl}`);
        
        if (currentUrl.includes('/login')) {
          console.log('   ✓ Logout successful!');
        } else {
          console.log('   ⚠ Logout may have failed');
        }
      } else {
        console.log('4. Logout button still not visible, trying force click...');
        try {
          await logoutBtn.click({ force: true });
          await page.waitForTimeout(2000);
          console.log(`   Force click completed, URL: ${page.url()}`);
        } catch (error) {
          console.log(`   Force click failed: ${error.message}`);
        }
      }
    }
    
    // Also test mobile logout button
    console.log('5. Testing mobile logout button...');
    const mobileLogoutBtn = page.locator('#mobile-logout-btn');
    const hasMobileLogout = await mobileLogoutBtn.count() > 0;
    console.log(`   Mobile logout button exists: ${hasMobileLogout}`);
    
    if (hasMobileLogout) {
      const isMobileLogoutVisible = await mobileLogoutBtn.isVisible();
      console.log(`   Mobile logout button visible: ${isMobileLogoutVisible}`);
      
      if (isMobileLogoutVisible) {
        console.log('   Attempting mobile logout...');
        await mobileLogoutBtn.click();
        await page.waitForTimeout(2000);
        console.log(`   URL after mobile logout: ${page.url()}`);
      }
    }
    
  } catch (error) {
    console.error('Test failed:', error.message);
  } finally {
    await browser.close();
  }
})();