/**
 * Test to verify TicketsTab component fix
 */

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

test('Verify TicketsTab component renders after fix', async ({ page }) => {
  const consoleMessages = [];
  
  // Capture console messages
  page.on('console', msg => {
    const text = msg.text();
    consoleMessages.push(text);
    
    if (text.includes('TICKETS TAB') || text.includes('TICKETING ACCESS TAB')) {
      console.log(`🔍 [COMPONENT] ${text}`);
    }
  });

  console.log('🚀 Testing TicketsTab fix...');

  // Navigate to login page and login manually
  await page.goto('http://localhost:3000/login');
  await page.waitForLoadState('networkidle');
  
  // Fill login form
  await page.fill('input[type="email"]', 'tyler@zest.is');
  await page.fill('input[type="password"]', 'Test123!');
  await page.click('button[type="submit"]');
  
  // Wait for redirect
  try {
    await page.waitForURL('**/dashboard', { timeout: 10000 });
    console.log('✅ Successfully logged in');
  } catch (error) {
    console.log('❌ Login failed or timeout');
    return;
  }

  // Find and navigate to event management
  await page.waitForTimeout(2000);
  const eventLinks = await page.locator('a[href*="/events/"][href*="/manage"]').all();
  
  if (eventLinks.length === 0) {
    console.log('❌ No events found to test');
    return;
  }

  const eventHref = await eventLinks[0].getAttribute('href');
  console.log(`🎯 Navigating to: ${eventHref}`);
  
  await page.goto(`http://localhost:3000${eventHref}`);
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(3000);

  // Check for TicketsTab console messages
  const ticketsTabMessages = consoleMessages.filter(msg => msg.includes('TICKETS TAB'));
  const ticketingAccessMessages = consoleMessages.filter(msg => msg.includes('TICKETING ACCESS TAB'));
  
  console.log('\n📊 RESULTS:');
  console.log(`TicketingAccessTab messages: ${ticketingAccessMessages.length}`);
  console.log(`TicketsTab messages: ${ticketsTabMessages.length}`);
  
  if (ticketsTabMessages.length > 0) {
    console.log('✅ SUCCESS: TicketsTab is now rendering!');
    ticketsTabMessages.forEach(msg => console.log(`  - ${msg}`));
  } else {
    console.log('❌ FAILED: TicketsTab still not rendering');
  }
  
  // Look for the ticket creation button
  const createButton = page.locator('text="Add Ticket Type"').or(page.locator('text="Create Your First Ticket Type"'));
  const buttonVisible = await createButton.isVisible();
  
  console.log(`\n🔘 Ticket creation button visible: ${buttonVisible}`);
  
  if (buttonVisible) {
    console.log('🎉 SUCCESS: Ticket creation button is now visible!');
  }

  await page.waitForTimeout(3000);
});