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

test('Debug ticket creation buttons', async ({ page }) => {
  console.log('Starting ticket button debug test...');
  
  // Navigate to login page first
  await page.goto('http://localhost:3000/login-new');
  
  // Fill in login form
  await page.fill('#email', 'tyler@zest.is');
  await page.fill('#password', 'Test123!');
  await page.click('button[type="submit"]');
  
  // Wait for redirect to dashboard
  await page.waitForURL('**/dashboard*');
  console.log('Successfully logged in');
  
  // Look for an event to manage
  const eventLinks = await page.locator('a[href*="/events/"][href*="/manage"]').all();
  if (eventLinks.length === 0) {
    console.log('No events found on dashboard');
    return;
  }
  
  // Click the first event manage link
  await eventLinks[0].click();
  console.log('Navigated to event management page');
  
  // Wait for the event management page to load
  await page.waitForSelector('[data-testid="event-management"], .glass-card, h2:has-text("Ticket Types")');
  
  // Check if we're on the tickets tab by default
  const ticketsTabActive = await page.locator('button:has-text("Ticket Types")').first();
  if (await ticketsTabActive.isVisible()) {
    await ticketsTabActive.click();
    console.log('Clicked on Tickets tab');
  }
  
  // Wait a moment for React to render
  await page.waitForTimeout(1000);
  
  // Look for ticket creation buttons
  const createFirstButton = page.locator('button:has-text("Create Your First Ticket Type")');
  const addTicketButton = page.locator('button:has-text("Add Ticket Type")');
  
  console.log('Checking button visibility...');
  console.log('Create first button visible:', await createFirstButton.isVisible());
  console.log('Add ticket button visible:', await addTicketButton.isVisible());
  
  // Check if any ticket types exist
  const ticketCards = await page.locator('.glass-card').count();
  console.log('Number of ticket cards found:', ticketCards);
  
  // Try to click the appropriate button
  let buttonToClick = null;
  if (await createFirstButton.isVisible()) {
    buttonToClick = createFirstButton;
    console.log('Will click "Create Your First Ticket Type" button');
  } else if (await addTicketButton.isVisible()) {
    buttonToClick = addTicketButton;
    console.log('Will click "Add Ticket Type" button');
  }
  
  if (buttonToClick) {
    console.log('Setting up console message listener...');
    
    // Listen for console messages to see if the handler is called
    page.on('console', msg => {
      console.log('Browser console:', msg.text());
    });
    
    // Listen for JavaScript errors
    page.on('pageerror', err => {
      console.log('JavaScript error:', err.message);
    });
    
    console.log('Clicking button...');
    await buttonToClick.click();
    
    // Wait for modal to appear
    await page.waitForTimeout(2000);
    
    // Check if modal appeared
    const modal = page.locator('[data-testid="ticket-type-modal"], .fixed.inset-0, div:has-text("Create Ticket Type")');
    const modalVisible = await modal.isVisible();
    console.log('Modal visible after click:', modalVisible);
    
    if (modalVisible) {
      console.log('✅ Button click worked! Modal appeared.');
    } else {
      console.log('❌ Button click failed - no modal appeared');
      
      // Debug: Check for any error messages
      const errorMessages = await page.locator('.error, .alert, [role="alert"]').allTextContents();
      if (errorMessages.length > 0) {
        console.log('Error messages found:', errorMessages);
      }
      
      // Debug: Check if showModal state changed
      const showModalState = await page.evaluate(() => {
        // Try to access React state (this might not work)
        return window.showModal || 'unknown';
      });
      console.log('showModal state:', showModalState);
    }
  } else {
    console.log('❌ No ticket creation buttons found');
  }
  
  // Take a screenshot for debugging
  await page.screenshot({ path: 'debug-ticket-buttons.png', fullPage: true });
  console.log('Screenshot saved as debug-ticket-buttons.png');
});