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

async function testCreateEventButton() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  // Listen for console errors
  page.on('console', msg => {
    if (msg.type() === 'error' || msg.type() === 'warning') {
      console.log(`Browser ${msg.type()}: ${msg.text()}`);
    }
  });
  
  // Listen for page errors
  page.on('pageerror', error => {
    console.log('Page error:', error.message);
  });

  console.log('Testing Create New Event button...');

  try {
    // Navigate to the login page
    await page.goto('http://localhost:5174/login');
    
    // Clear any persisted wizard state
    await page.evaluate(() => {
      localStorage.removeItem('wizard-store');
      sessionStorage.clear();
    });
    console.log('✓ Navigated to login page and cleared storage');

    // Login as admin - use correct selectors
    await page.fill('input[type="email"]', 'admin@example.com');
    await page.fill('input[type="password"]', 'demo123');
    console.log('✓ Filled login credentials');

    await page.click('[data-testid="loginBtn"]');
    console.log('✓ Clicked login button');

    // Wait for dashboard to load
    await page.waitForTimeout(3000); // Give it time to navigate
    
    // Check if we're on dashboard
    if (page.url().includes('/dashboard')) {
      console.log('✓ Successfully logged in and navigated to dashboard');
    } else {
      console.log(`! Current URL: ${page.url()}`);
    }

    // Take a screenshot of the dashboard
    await page.screenshot({ path: 'dashboard-before-click.png', fullPage: true });
    console.log('✓ Took screenshot of dashboard');

    // Look for the Create New Event button
    const createButton = page.locator('button:has-text("Create New Event")');
    
    // Check if the button exists
    if (await createButton.count() === 0) {
      console.log('❌ Create New Event button not found!');
      await browser.close();
      return;
    }
    
    console.log('✓ Found Create New Event button');
    
    // Check if button is visible and enabled
    await expect(createButton).toBeVisible();
    await expect(createButton).toBeEnabled();
    console.log('✓ Button is visible and enabled');

    // Click the Create New Event button
    console.log('About to click Create New Event button...');
    await createButton.click();
    console.log('✓ Clicked Create New Event button');

    // Wait a bit longer to see if anything happens
    await page.waitForTimeout(5000);
    console.log('✓ Waited 5 seconds after button click');

    // Look for the modal
    const modal = page.locator('[role="dialog"], .modal, [data-testid*="modal-content"]');
    try {
      await modal.waitFor({ state: 'visible', timeout: 2000 });
      console.log('✓ Event creation modal appeared');
    } catch (error) {
      console.log('! Modal did not appear within 2 seconds');
      
      // Check if there are any visible modals at all
      const allModals = page.locator('[role="dialog"], .modal, [class*="modal"]');
      const modalCount = await allModals.count();
      console.log(`Found ${modalCount} potential modal elements`);
      
      if (modalCount > 0) {
        for (let i = 0; i < modalCount; i++) {
          const modalElement = allModals.nth(i);
          const isVisible = await modalElement.isVisible();
          const classes = await modalElement.getAttribute('class');
          console.log(`Modal ${i}: visible=${isVisible}, classes="${classes}"`);
        }
      }
      
      // Check if the handleCreateEvent function is actually being called
      const result = await page.evaluate(() => {
        return document.body.innerHTML.includes('showCreateWizard');
      });
      console.log(`Found showCreateWizard in DOM: ${result}`);
      
      throw error;
    }

    // Take a screenshot of the modal
    await page.screenshot({ path: 'event-creation-modal.png', fullPage: true });
    console.log('✓ Took screenshot of modal');

    // Check if the modal contains expected content
    const modalTitle = page.locator('h2:has-text("Create New Event")');
    if (await modalTitle.isVisible()) {
      console.log('✓ Modal has correct title');
    } else {
      console.log('❌ Modal title not found');
    }

    console.log('\n✅ Test completed successfully! The Create New Event button works.');
    
  } catch (error) {
    console.error('❌ Test failed:', error.message);
    
    // Take error screenshot
    await page.screenshot({ path: 'error-state.png', fullPage: true });
    console.log('✓ Took error screenshot');
    
    // Check current URL and page content
    console.log('Current URL:', page.url());
    
    // Check for any error messages on the page
    const errorMessages = await page.locator('[role="alert"], .alert-error, [data-testid*="error"]').allTextContents();
    if (errorMessages.length > 0) {
      console.log('Error messages found:', errorMessages);
    }
  } finally {
    await browser.close();
  }
}

// Add expect function
global.expect = (actual) => ({
  toBeVisible: async () => {
    if (!(await actual.isVisible())) {
      throw new Error('Element is not visible');
    }
  },
  toBeEnabled: async () => {
    if (await actual.isDisabled()) {
      throw new Error('Element is disabled');
    }
  }
});

testCreateEventButton();