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

test.describe('Ticket Pricing Buttons Test', () => {
  test('should test ticket pricing buttons functionality', async ({ page }) => {
    console.log('Testing ticket pricing buttons...');
    
    // Try to navigate to a manage page
    await page.goto('http://localhost:3001/events/d89dd7ec-01b3-4b89-a52e-b08afaf7661d/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);
    
    if (currentUrl.includes('/login')) {
      console.log('Authentication required - trying to login first or bypass');
      
      // Let's try to access the home page and see if we can find any accessible pages
      await page.goto('http://localhost:3001/');
      await page.waitForLoadState('networkidle');
      
      // Take screenshot of homepage
      await page.screenshot({ path: 'homepage-access.png', fullPage: true });
      
      // Try to find any manage links or test events
      const links = await page.locator('a[href*="/events/"]').count();
      console.log(`Found ${links} event links on homepage`);
      
      if (links > 0) {
        const eventLinks = await page.locator('a[href*="/events/"]').all();
        for (let i = 0; i < Math.min(3, eventLinks.length); i++) {
          const href = await eventLinks[i].getAttribute('href');
          console.log(`Found event link: ${href}`);
        }
      }
      
      return; // Skip the rest if we can't access manage page
    }
    
    // If we made it here, we have access to the manage page
    await page.screenshot({ path: 'manage-page-accessible.png', fullPage: true });
    
    // Wait for React components to load
    await page.waitForTimeout(5000);
    
    // Check for ticket-related buttons specifically
    console.log('Looking for ticket pricing buttons...');
    
    // Check if the tickets tab is visible/active
    const ticketsTab = page.locator('button, [role="tab"]').filter({ hasText: /tickets/i });
    const ticketsTabCount = await ticketsTab.count();
    console.log(`Tickets tab found: ${ticketsTabCount > 0}`);
    
    if (ticketsTabCount > 0) {
      console.log('Clicking tickets tab...');
      await ticketsTab.first().click();
      await page.waitForTimeout(2000);
    }
    
    // Look for "Add Ticket Type" button
    const addTicketButton = page.locator('button').filter({ hasText: /Add Ticket Type/i });
    const addTicketCount = await addTicketButton.count();
    console.log(`"Add Ticket Type" buttons found: ${addTicketCount}`);
    
    // Look for "Create Your First Ticket Type" button
    const createFirstTicketButton = page.locator('button').filter({ hasText: /Create.*First.*Ticket/i });
    const createFirstCount = await createFirstTicketButton.count();
    console.log(`"Create Your First Ticket Type" buttons found: ${createFirstCount}`);
    
    // Get all button texts to see what's available
    const allButtons = await page.locator('button').all();
    const buttonTexts = [];
    for (const button of allButtons) {
      const text = await button.textContent();
      if (text && text.trim()) {
        buttonTexts.push(text.trim());
      }
    }
    console.log('All button texts found:', buttonTexts);
    
    // Check for React component mounting
    const reactInfo = await page.evaluate(() => {
      return {
        astroIslands: document.querySelectorAll('astro-island').length,
        reactElements: document.querySelectorAll('[data-reactroot], [data-react-class]').length,
        ticketComponents: document.querySelectorAll('[class*="Ticket"], [id*="ticket"]').length,
        modalElements: document.querySelectorAll('[role="dialog"], .modal, [data-testid*="modal"]').length,
        hasWindowOpenEmbedModal: typeof window.openEmbedModal === 'function'
      };
    });
    
    console.log('React component info:', reactInfo);
    
    // Test the "Add Ticket Type" button if it exists
    if (addTicketCount > 0) {
      console.log('Testing "Add Ticket Type" button...');
      
      // Set up console monitoring
      const consoleMessages = [];
      page.on('console', msg => {
        consoleMessages.push(`${msg.type()}: ${msg.text()}`);
      });
      
      await addTicketButton.first().click();
      await page.waitForTimeout(2000);
      
      // Check for modal after click
      const modalAfterAdd = await page.evaluate(() => {
        const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="Modal"]');
        return {
          modalCount: modals.length,
          modalsVisible: Array.from(modals).filter(m => 
            !m.hidden && 
            m.style.display !== 'none' && 
            m.offsetParent !== null
          ).length
        };
      });
      
      console.log('Modal status after "Add Ticket Type" click:', modalAfterAdd);
      console.log('Console messages during click:', consoleMessages);
      
      await page.screenshot({ path: 'after-add-ticket-click.png', fullPage: true });
    }
    
    // Test the "Create Your First Ticket Type" button if it exists
    if (createFirstCount > 0) {
      console.log('Testing "Create Your First Ticket Type" button...');
      
      await createFirstTicketButton.first().click();
      await page.waitForTimeout(2000);
      
      const modalAfterCreate = await page.evaluate(() => {
        const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="Modal"]');
        return {
          modalCount: modals.length,
          modalsVisible: Array.from(modals).filter(m => 
            !m.hidden && 
            m.style.display !== 'none' && 
            m.offsetParent !== null
          ).length
        };
      });
      
      console.log('Modal status after "Create Your First Ticket Type" click:', modalAfterCreate);
      
      await page.screenshot({ path: 'after-create-first-ticket-click.png', fullPage: true });
    }
    
    // Check for any JavaScript errors
    const pageErrors = [];
    page.on('pageerror', error => {
      pageErrors.push(error.message);
    });
    
    console.log('Page errors found:', pageErrors);
    
    // Final check - try to find any ticket-related React components
    const ticketComponentCheck = await page.evaluate(() => {
      // Look for specific ticket component indicators
      const indicators = {
        ticketTabsComponent: !!document.querySelector('[class*="TicketsTab"]'),
        ticketTypeModal: !!document.querySelector('[class*="TicketTypeModal"]'),
        ticketManagement: !!document.querySelector('[class*="ticket"], [class*="Ticket"]'),
        hasTicketTypes: !!document.querySelector('[data-testid*="ticket"], [id*="ticket"]')
      };
      
      return indicators;
    });
    
    console.log('Ticket component indicators:', ticketComponentCheck);
  });
});