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

test.describe('Simple Button Test', () => {
  test('should test buttons with dev server', async ({ page }) => {
    console.log('Testing buttons on dev server...');
    
    // Navigate to the manage page that's actually being accessed
    await page.goto('http://localhost:3001/events/d89dd7ec-01b3-4b89-a52e-b08afaf7661d/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(3000); // Give time for React components to load
    
    // Take screenshot
    await page.screenshot({ path: 'manage-page-dev.png', fullPage: true });
    console.log('Manage page screenshot saved');
    
    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);
    
    if (currentUrl.includes('/login')) {
      console.log('Still redirected to login - authentication required');
      return;
    }
    
    // Check for our simple embed test component
    const simpleTestCheck = await page.evaluate(() => {
      return {
        hasReact: typeof React !== 'undefined',
        hasReactDOM: typeof ReactDOM !== 'undefined',
        simpleEmbedFunction: typeof window.openEmbedModal === 'function',
        astroIslands: document.querySelectorAll('astro-island').length,
        embedButton: !!document.getElementById('embed-code-btn'),
        allButtons: document.querySelectorAll('button').length,
        buttonTexts: Array.from(document.querySelectorAll('button')).map(b => b.textContent?.trim()).filter(t => t),
        consoleMessages: []
      };
    });
    
    console.log('Page analysis:', JSON.stringify(simpleTestCheck, null, 2));
    
    // Look specifically for the embed button
    const embedButton = page.locator('#embed-code-btn');
    const embedExists = await embedButton.count();
    console.log(`Embed button exists: ${embedExists > 0}`);
    
    if (embedExists > 0) {
      console.log('Testing embed button...');
      
      // Set up dialog handler for the alert
      page.on('dialog', async dialog => {
        console.log('Alert dialog appeared:', dialog.message());
        await dialog.accept();
      });
      
      // Click the embed button
      await embedButton.click();
      await page.waitForTimeout(2000);
      
      console.log('Embed button clicked');
      
      // Check if window.openEmbedModal exists after click
      const afterClick = await page.evaluate(() => {
        return {
          openEmbedModalExists: typeof window.openEmbedModal === 'function',
          windowKeys: Object.keys(window).filter(k => k.includes('embed')),
        };
      });
      
      console.log('After click analysis:', afterClick);
    }
    
    // Look for ticket pricing buttons
    const ticketButtons = page.locator('button').filter({ hasText: /Add Ticket|Create.*Ticket/i });
    const ticketButtonCount = await ticketButtons.count();
    console.log(`Ticket pricing buttons found: ${ticketButtonCount}`);
    
    if (ticketButtonCount > 0) {
      console.log('Testing ticket button...');
      await ticketButtons.first().click();
      await page.waitForTimeout(1000);
      
      // Look for modal or any response
      const modalCheck = await page.evaluate(() => {
        const modals = document.querySelectorAll('[role="dialog"], .modal, [data-testid*="modal"]');
        return {
          modalCount: modals.length,
          modalInfo: Array.from(modals).map(m => ({
            id: m.id,
            className: m.className,
            visible: !m.hidden && m.style.display !== 'none'
          }))
        };
      });
      
      console.log('Modal check after ticket button:', modalCheck);
      
      await page.screenshot({ path: 'after-ticket-button-dev.png', fullPage: true });
    }
    
    // Check for any JavaScript errors
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
      }
    });
    
    console.log('JavaScript errors:', errors);
  });
});