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

test.describe('Button Functionality with Auth Bypass', () => {
  test('should test buttons with direct component access', async ({ page }) => {
    console.log('Testing button functionality...');
    
    // Navigate directly to manage page and check what happens
    await page.goto('http://localhost:3000/events/test/manage');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    const currentUrl = page.url();
    console.log(`Current URL: ${currentUrl}`);
    
    // Take screenshot
    await page.screenshot({ path: 'manage-page-debug.png', fullPage: true });
    
    // Check what's actually loaded on the page
    const pageContent = await page.evaluate(() => {
      return {
        title: document.title,
        hasReactScript: !!document.querySelector('script[src*="react"]'),
        hasAstroScript: !!document.querySelector('script[src*="astro"]'),
        hasEmbedModalWrapper: !!document.querySelector('embed-modal-wrapper'),
        reactRoots: document.querySelectorAll('[data-reactroot]').length,
        allScripts: Array.from(document.querySelectorAll('script[src]')).map(s => s.src.split('/').pop()),
        embedButton: !!document.getElementById('embed-code-btn'),
        hasClientLoad: !!document.querySelector('[data-astro-cid]'),
        bodyHTML: document.body.innerHTML.substring(0, 1000) // First 1000 chars
      };
    });
    
    console.log('Page analysis:', JSON.stringify(pageContent, null, 2));
    
    // Check for console errors during page load
    const errors = [];
    page.on('console', msg => {
      if (msg.type() === 'error') {
        errors.push(msg.text());
        console.log('Console error:', msg.text());
      }
    });
    
    page.on('pageerror', error => {
      errors.push(error.message);
      console.log('Page error:', error.message);
    });
    
    // Try to directly access a manage page that might not require auth
    await page.goto('http://localhost:3000/dashboard');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    console.log('Dashboard URL:', page.url());
    await page.screenshot({ path: 'dashboard-debug.png', fullPage: true });
    
    // Check if we can access any page that has buttons
    await page.goto('http://localhost:3000/');
    await page.waitForLoadState('networkidle');
    await page.waitForTimeout(2000);
    
    console.log('Homepage URL:', page.url());
    await page.screenshot({ path: 'homepage-debug.png', fullPage: true });
    
    // Look for any buttons on homepage
    const homeButtons = await page.locator('button').count();
    console.log(`Homepage buttons found: ${homeButtons}`);
    
    if (homeButtons > 0) {
      const buttonTexts = await page.locator('button').allTextContents();
      console.log('Homepage button texts:', buttonTexts);
    }
    
    // Check for React components on homepage
    const homeReactInfo = await page.evaluate(() => {
      return {
        reactElements: document.querySelectorAll('[data-reactroot], [data-react-class]').length,
        clientLoadElements: document.querySelectorAll('[client\\:load]').length,
        astroIslands: document.querySelectorAll('astro-island').length,
        embedModalWrapper: !!document.querySelector('embed-modal-wrapper')
      };
    });
    
    console.log('Homepage React info:', homeReactInfo);
    
    console.log('All errors found:', errors);
  });
  
  test('should check specific component loading issues', async ({ page }) => {
    console.log('Checking component loading...');
    
    // Navigate to homepage first
    await page.goto('http://localhost:3000/');
    await page.waitForLoadState('networkidle');
    
    // Wait for potential React hydration
    await page.waitForTimeout(5000);
    
    // Check if React is loaded
    const reactStatus = await page.evaluate(() => {
      return {
        hasReact: typeof React !== 'undefined',
        hasReactDOM: typeof ReactDOM !== 'undefined',
        windowKeys: Object.keys(window).filter(key => key.toLowerCase().includes('react')),
        astroIslands: Array.from(document.querySelectorAll('astro-island')).map(island => ({
          component: island.getAttribute('component-export'),
          clientDirective: island.getAttribute('client'),
          props: island.getAttribute('props')
        }))
      };
    });
    
    console.log('React status:', JSON.stringify(reactStatus, null, 2));
    
    // Try to manually test if we can create the embed modal
    const manualTest = await page.evaluate(() => {
      // Try to simulate what should happen when embed button is clicked
      const embedBtn = document.getElementById('embed-code-btn');
      if (embedBtn) {
        console.log('Found embed button');
        return {
          embedButtonExists: true,
          hasClickListener: embedBtn.onclick !== null,
          buttonHTML: embedBtn.outerHTML
        };
      }
      return { embedButtonExists: false };
    });
    
    console.log('Manual embed test:', manualTest);
  });
});