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

test.describe('Button Functionality Tests', () => {
  test('should test ticket pricing buttons', async ({ page }) => {
    console.log('Starting button functionality test...');
    
    // Navigate to a manage page (assuming there's a test event)
    // First, let's try to login and then go to manage page
    await page.goto('http://localhost:3000/login-new');
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of login page
    await page.screenshot({ path: 'login-page.png', fullPage: true });
    console.log('Login page screenshot saved');
    
    // Check if we can find any buttons on the current page
    const buttons = await page.locator('button').count();
    console.log(`Found ${buttons} buttons on login page`);
    
    // Try to navigate directly to manage page (might redirect if not authenticated)
    await page.goto('http://localhost:3000/events/test/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000); // Wait for any React components to load
    
    // Take screenshot of manage page
    await page.screenshot({ path: 'manage-page.png', fullPage: true });
    console.log('Manage page screenshot saved');
    
    // Check if we're redirected to login
    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);
    
    if (currentUrl.includes('/login')) {
      console.log('Redirected to login - need authentication');
      return;
    }
    
    // Look for ticket pricing buttons
    const addTicketButton = page.locator('button').filter({ hasText: 'Add Ticket Type' });
    const createFirstTicketButton = page.locator('button').filter({ hasText: 'Create Your First Ticket Type' });
    const embedButton = page.locator('button#embed-code-btn');
    
    console.log('Checking for ticket buttons...');
    
    // Count all buttons on manage page
    const allButtons = await page.locator('button').count();
    console.log(`Found ${allButtons} total buttons on manage page`);
    
    // Get all button texts
    const buttonTexts = await page.locator('button').allTextContents();
    console.log('Button texts found:', buttonTexts);
    
    // Test embed button
    const embedButtonExists = await embedButton.count();
    console.log(`Embed button exists: ${embedButtonExists > 0}`);
    
    if (embedButtonExists > 0) {
      console.log('Testing embed button click...');
      
      // Click embed button and check for modal
      await embedButton.click();
      await page.waitForTimeout(1000);
      
      // Look for embed modal
      const modal = page.locator('[data-testid="embed-modal"], .modal, [role="dialog"]');
      const modalExists = await modal.count();
      console.log(`Modal appeared after embed button click: ${modalExists > 0}`);
      
      // Take screenshot after button click
      await page.screenshot({ path: 'after-embed-click.png', fullPage: true });
      console.log('Screenshot after embed button click saved');
      
      // Check console errors
      const consoleMessages = [];
      page.on('console', msg => {
        if (msg.type() === 'error') {
          consoleMessages.push(msg.text());
        }
      });
      
      console.log('Console errors:', consoleMessages);
    }
    
    // Test ticket pricing buttons if they exist
    const addTicketExists = await addTicketButton.count();
    console.log(`Add Ticket Type button exists: ${addTicketExists > 0}`);
    
    if (addTicketExists > 0) {
      console.log('Testing Add Ticket Type button...');
      await addTicketButton.first().click();
      await page.waitForTimeout(1000);
      
      // Look for ticket modal
      const ticketModal = page.locator('[data-testid="ticket-modal"], .modal, [role="dialog"]');
      const ticketModalExists = await ticketModal.count();
      console.log(`Ticket modal appeared: ${ticketModalExists > 0}`);
      
      await page.screenshot({ path: 'after-ticket-button-click.png', fullPage: true });
      console.log('Screenshot after ticket button click saved');
    }
    
    // Also test "Create Your First Ticket Type" button
    const createFirstExists = await createFirstTicketButton.count();
    console.log(`Create First Ticket button exists: ${createFirstExists > 0}`);
    
    if (createFirstExists > 0) {
      console.log('Testing Create Your First Ticket Type button...');
      await createFirstTicketButton.click();
      await page.waitForTimeout(1000);
      
      await page.screenshot({ path: 'after-create-first-ticket-click.png', fullPage: true });
      console.log('Screenshot after create first ticket click saved');
    }
  });
  
  test('should check for JavaScript errors', async ({ page }) => {
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });
    
    page.on('pageerror', error => {
      errors.push(error.message);
    });
    
    await page.goto('http://localhost:3000/events/test/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000); // Wait for all JS to load
    
    console.log('JavaScript errors found:', errors);
    
    // Try to access window.openEmbedModal
    const hasOpenEmbedModal = await page.evaluate(() => {
      return typeof window.openEmbedModal === 'function';
    });
    
    console.log('window.openEmbedModal function exists:', hasOpenEmbedModal);
    
    // Check if React components are mounted
    const reactComponents = await page.evaluate(() => {
      const components = [];
      const elements = document.querySelectorAll('[data-reactroot], [data-react-class]');
      components.push(`React elements found: ${elements.length}`);
      
      // Check for our specific components
      const embedWrapper = document.querySelector('embed-modal-wrapper, [class*="EmbedModal"]');
      components.push(`EmbedModalWrapper found: ${!!embedWrapper}`);
      
      return components;
    });
    
    console.log('React component status:', reactComponents);
  });
});