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

async function testAdminNavigation() {
  console.log('🧪 Testing admin navigation link...');
  
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 1000
  });
  
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 }
  });
  
  const page = await context.newPage();
  
  // Enable console logging
  page.on('console', msg => console.log(`[PAGE] ${msg.text()}`));
  page.on('pageerror', err => console.error(`[PAGE ERROR] ${err}`));
  
  try {
    // First login
    console.log('\n🔑 Step 1: Logging in...');
    await page.goto('http://localhost:3000/login-new', { waitUntil: 'networkidle' });
    
    await page.fill('#email', 'tmartinez@gmail.com');
    await page.fill('#password', 'Skittles@420');
    await page.click('button[type="submit"]');
    
    // Wait for login to complete
    await page.waitForTimeout(5000);
    console.log(`After login: ${page.url()}`);
    
    // Check if we're on dashboard
    if (!page.url().includes('/dashboard')) {
      console.log('❌ Login failed, not on dashboard');
      return;
    }
    
    console.log('✅ Successfully logged in');
    
    // Test navigation dropdown
    console.log('\n👤 Step 2: Testing user menu...');
    
    // Click user menu button
    await page.click('#user-menu-btn');
    await page.waitForTimeout(1000);
    
    // Take screenshot of dropdown
    await page.screenshot({ path: 'user-dropdown.png' });
    console.log('Screenshot saved: user-dropdown.png');
    
    // Check if admin menu item is visible
    const adminMenuItem = await page.$('#admin-menu-item');
    const adminMenuVisible = adminMenuItem && !(await adminMenuItem.evaluate(el => el.classList.contains('hidden')));
    
    console.log(`Admin menu item exists: ${!!adminMenuItem}`);
    console.log(`Admin menu item visible: ${adminMenuVisible}`);
    
    if (adminMenuVisible) {
      console.log('✅ Admin menu items are visible');
      
      // Check if admin dashboard link exists
      const adminDashboardLink = await page.$('a[href="/admin/dashboard"]');
      console.log(`Admin dashboard link exists: ${!!adminDashboardLink}`);
      
      if (adminDashboardLink) {
        console.log('✅ Admin dashboard link found in menu');
        
        // Click the admin dashboard link
        console.log('\n🎯 Step 3: Clicking admin dashboard link...');
        await adminDashboardLink.click();
        await page.waitForTimeout(3000);
        
        console.log(`Navigated to: ${page.url()}`);
        if (page.url().includes('/admin/dashboard')) {
          console.log('✅ Successfully navigated to admin dashboard via menu');
          await page.screenshot({ path: 'admin-dashboard-from-menu.png' });
        } else {
          console.log('❌ Failed to navigate to admin dashboard');
        }
      } else {
        console.log('❌ Admin dashboard link not found in menu');
      }
    } else {
      console.log('❌ Admin menu items are not visible');
      console.log('Checking for admin badge...');
      
      const adminBadge = await page.$('#admin-badge');
      const adminBadgeVisible = adminBadge && !(await adminBadge.evaluate(el => el.classList.contains('hidden')));
      console.log(`Admin badge visible: ${adminBadgeVisible}`);
    }
    
  } catch (error) {
    console.error('❌ Test failed:', error);
    await page.screenshot({ path: 'nav-test-error.png' });
  } finally {
    await browser.close();
  }
}

testAdminNavigation().catch(console.error);