const { test, expect } = require('@playwright/test');

test.describe('Calendar Page Diagnosis', () => {
  test('should open calendar page and take screenshot', async ({ page }) => {
    console.log('Opening calendar page...');
    
    // Navigate to calendar page
    await page.goto('http://localhost:3000/calendar');
    
    // Wait for page to load
    await page.waitForLoadState('networkidle');
    
    // Take a full page screenshot
    await page.screenshot({ 
      path: 'calendar-diagnosis.png', 
      fullPage: true 
    });
    
    console.log('Screenshot saved as calendar-diagnosis.png');
    
    // Get page title
    const title = await page.title();
    console.log('Page title:', title);
    
    // Check if navigation is present
    const navigation = await page.$('nav');
    console.log('Navigation present:', navigation !== null);
    
    // Look for Create Event button/link
    const createEventLinks = await page.$$('a[href="/events/new"]');
    console.log('Create Event links found:', createEventLinks.length);
    
    // Look for any manage links
    const manageLinks = await page.$$('a[href*="manage"]');
    console.log('Manage links found:', manageLinks.length);
    
    // Check if user dropdown exists
    const userDropdown = await page.$('#user-dropdown');
    console.log('User dropdown present:', userDropdown !== null);
    
    // Check if user menu button exists
    const userMenuBtn = await page.$('#user-menu-btn');
    console.log('User menu button present:', userMenuBtn !== null);
    
    // If user menu exists, click it to see dropdown
    if (userMenuBtn) {
      console.log('Clicking user menu button...');
      await userMenuBtn.click();
      
      // Wait a bit for dropdown to appear
      await page.waitForTimeout(500);
      
      // Take another screenshot with dropdown open
      await page.screenshot({ 
        path: 'calendar-diagnosis-dropdown.png', 
        fullPage: true 
      });
      
      console.log('Dropdown screenshot saved as calendar-diagnosis-dropdown.png');
      
      // Check what links are in the dropdown
      const dropdownLinks = await page.$$('#user-dropdown a');
      console.log('Dropdown links found:', dropdownLinks.length);
      
      for (let i = 0; i < dropdownLinks.length; i++) {
        const link = dropdownLinks[i];
        const href = await link.getAttribute('href');
        const text = await link.textContent();
        console.log(`Dropdown link ${i + 1}: "${text}" -> ${href}`);
      }
    }
    
    // Get current URL to confirm where we are
    const currentUrl = page.url();
    console.log('Current URL:', currentUrl);
    
    // Check console errors
    const consoleMessages = [];
    page.on('console', msg => {
      consoleMessages.push(`${msg.type()}: ${msg.text()}`);
    });
    
    // Check for any JavaScript errors
    const errors = [];
    page.on('pageerror', error => {
      errors.push(error.message);
    });
    
    // Refresh page to catch any console messages
    await page.reload();
    await page.waitForLoadState('networkidle');
    
    console.log('Console messages:', consoleMessages);
    console.log('JavaScript errors:', errors);
    
    // Check if authentication is working
    try {
      const response = await page.evaluate(() => {
        return fetch('/api/auth/user').then(r => r.json());
      });
      console.log('Auth status:', response);
    } catch (error) {
      console.log('Auth check failed:', error.message);
    }
  });
});