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

test.describe('Ticket Buttons with Authentication', () => {
  test('should login and test ticket pricing buttons', async ({ page }) => {
    console.log('Testing ticket buttons with authentication...');
    
    // First, go to login page
    await page.goto('http://localhost:3001/login-new');
    await page.waitForLoadState('networkidle');
    
    // Take screenshot of login page
    await page.screenshot({ path: 'login-before-auth.png', fullPage: true });
    
    // Fill in login credentials
    console.log('Filling login form...');
    await page.fill('input[type="email"], input[name="email"]', 'tmartinez@gmail.com');
    await page.fill('input[type="password"], input[name="password"]', 'TestPassword123!');
    
    // Submit login form
    await page.click('button[type="submit"], button:has-text("Sign In"), button:has-text("Login")');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000);
    
    console.log('Login submitted, current URL:', page.url());
    
    // Check if we're logged in successfully
    if (page.url().includes('/login')) {
      console.log('Still on login page - checking for errors');
      await page.screenshot({ path: 'login-failed.png', fullPage: true });
      
      // Look for error messages
      const errorMsg = await page.locator('.error, [class*="error"], [role="alert"]').textContent().catch(() => null);
      console.log('Login error message:', errorMsg);
      
      return; // Exit if login failed
    }
    
    console.log('Login successful! Now navigating to manage page...');
    
    // Navigate to the manage page
    await page.goto('http://localhost:3001/events/d89dd7ec-01b3-4b89-a52e-b08afaf7661d/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(5000); // Wait for React components to load
    
    await page.screenshot({ path: 'manage-page-authenticated.png', fullPage: true });
    
    console.log('Manage page loaded, current URL:', page.url());
    
    // Click on Ticket Types tab specifically
    const ticketTypesTab = page.locator('button').filter({ hasText: /Ticket Types/i });
    const ticketTypesCount = await ticketTypesTab.count();
    console.log(`Ticket Types tab found: ${ticketTypesCount > 0}`);
    
    if (ticketTypesCount > 0) {
      console.log('Clicking Ticket Types tab...');
      await ticketTypesTab.first().click();
      await page.waitForTimeout(5000); // Wait longer for React component to load
      await page.screenshot({ path: 'ticket-types-tab-active.png', fullPage: true });
      
      // Wait for any loading states to complete
      await page.waitForFunction(() => {
        // Wait for either a loading indicator to disappear or ticket content to appear
        return !document.querySelector('[data-loading="true"]') || 
               document.querySelector('[class*="ticket"]') ||
               document.querySelector('button[contains(., "Add Ticket")]');
      }, { timeout: 10000 }).catch(() => {
        console.log('Timeout waiting for ticket content to load');
      });
      
      await page.screenshot({ path: 'after-ticket-types-load.png', fullPage: true });
    }
    
    // Now look for ticket pricing buttons
    console.log('Looking for ticket pricing buttons...');
    
    // Get all buttons and their text
    const allButtons = await page.locator('button').all();
    const buttonInfo = [];
    for (const button of allButtons) {
      const text = await button.textContent();
      const isVisible = await button.isVisible();
      const isEnabled = await button.isEnabled();
      if (text && text.trim()) {
        buttonInfo.push({
          text: text.trim(),
          visible: isVisible,
          enabled: isEnabled
        });
      }
    }
    
    console.log('All buttons found:', buttonInfo);
    
    // Look specifically for ticket buttons
    const addTicketButton = page.locator('button').filter({ hasText: /Add Ticket Type/i });
    const createFirstButton = page.locator('button').filter({ hasText: /Create.*First.*Ticket/i });
    
    const addTicketCount = await addTicketButton.count();
    const createFirstCount = await createFirstButton.count();
    
    console.log(`"Add Ticket Type" buttons: ${addTicketCount}`);
    console.log(`"Create Your First Ticket Type" buttons: ${createFirstCount}`);
    
    // Test the Add Ticket Type button
    if (addTicketCount > 0) {
      console.log('Testing "Add Ticket Type" button...');
      
      // Check if button is visible and enabled
      const isVisible = await addTicketButton.first().isVisible();
      const isEnabled = await addTicketButton.first().isEnabled();
      console.log(`Add Ticket button - Visible: ${isVisible}, Enabled: ${isEnabled}`);
      
      if (isVisible && isEnabled) {
        // Set up console message monitoring for ALL console messages
        const consoleMessages = [];
        page.on('console', msg => {
          consoleMessages.push(`${msg.type()}: ${msg.text()}`);
          console.log(`CONSOLE ${msg.type()}: ${msg.text()}`);
        });
        
        // Click the button
        await addTicketButton.first().click();
        await page.waitForTimeout(2000);
        
        // Check for modal
        const modalCheck = await page.evaluate(() => {
          const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="Modal"], [data-testid*="modal"]');
          const visibleModals = Array.from(modals).filter(m => {
            const style = window.getComputedStyle(m);
            return style.display !== 'none' && style.visibility !== 'hidden' && m.offsetParent !== null;
          });
          
          return {
            totalModals: modals.length,
            visibleModals: visibleModals.length,
            modalElements: Array.from(modals).map(m => ({
              tagName: m.tagName,
              id: m.id,
              className: m.className,
              isVisible: m.offsetParent !== null
            }))
          };
        });
        
        console.log('Modal check after Add Ticket Type click:', modalCheck);
        console.log('Console messages:', consoleMessages);
        
        await page.screenshot({ path: 'after-add-ticket-click-authenticated.png', fullPage: true });
      }
    }
    
    // Test the Create Your First Ticket Type button
    if (createFirstCount > 0) {
      console.log('Testing "Create Your First Ticket Type" button...');
      
      const isVisible = await createFirstButton.first().isVisible();
      const isEnabled = await createFirstButton.first().isEnabled();
      console.log(`Create First Ticket button - Visible: ${isVisible}, Enabled: ${isEnabled}`);
      
      if (isVisible && isEnabled) {
        await createFirstButton.first().click();
        await page.waitForTimeout(2000);
        
        const modalCheck = await page.evaluate(() => {
          const modals = document.querySelectorAll('[role="dialog"], .modal, [class*="Modal"], [data-testid*="modal"]');
          return {
            totalModals: modals.length,
            visibleModals: Array.from(modals).filter(m => m.offsetParent !== null).length
          };
        });
        
        console.log('Modal check after Create First Ticket click:', modalCheck);
        await page.screenshot({ path: 'after-create-first-authenticated.png', fullPage: true });
      }
    }
    
    // Check if the TicketTypeModal component is actually loaded
    const componentCheck = await page.evaluate(() => {
      return {
        astroIslands: document.querySelectorAll('astro-island').length,
        ticketComponents: document.querySelectorAll('[class*="Ticket"]').length,
        reactComponents: document.querySelectorAll('[data-reactroot]').length,
        ticketTypeModalElements: document.querySelectorAll('[class*="TicketTypeModal"], [id*="ticket-modal"]').length
      };
    });
    
    console.log('Component analysis:', componentCheck);
  });
});