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

test('Event Creation Wizard Next Button Works', async ({ page }) => {
  // Navigate to the application
  await page.goto('http://localhost:5173');
  
  // Wait for login page to load
  await page.waitForLoadState('networkidle');
  
  // Login as admin to access event creation
  await page.click('[data-testid="demo-user-sarah-admin"]');
  await page.click('button[type="submit"]');
  await page.waitForURL(/\/(dashboard|$)/, { timeout: 10000 });
  
  // Wait for dashboard to load
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);
  
  // Click Create New Event button
  await page.click('button:has-text("Create New Event")');
  
  // Wait for the modal to appear
  await expect(page.locator('h2:has-text("Create New Event")')).toBeVisible();
  await expect(page.locator('text=Step 1 of 3: Event Details')).toBeVisible();
  
  // Check that Next button is initially disabled
  const nextButton = page.locator('button:has-text("Next")');
  await expect(nextButton).toBeDisabled();
  
  // Check required fields validation message appears
  await expect(page.locator('text=Required fields:')).toBeVisible();
  
  // Fill in the required fields one by one and test validation
  
  // 1. Fill in title - Next should still be disabled
  await page.fill('input[placeholder="Enter event title"]', 'Test Event');
  await expect(nextButton).toBeDisabled();
  
  // 2. Fill in description - Next should still be disabled  
  await page.fill('textarea[placeholder*="Describe your event"]', 'This is a test event description');
  await expect(nextButton).toBeDisabled();
  
  // 3. Fill in date - Next should still be disabled
  await page.fill('input[type="datetime-local"]', '2024-12-25T18:00');
  await expect(nextButton).toBeDisabled();
  
  // 4. Fill in venue - Now Next should be enabled!
  await page.fill('input[placeholder="Event location"]', 'Test Venue');
  
  // Wait a moment for validation to update
  await page.waitForTimeout(100);
  
  // Next button should now be enabled
  await expect(nextButton).toBeEnabled();
  
  // The validation message should disappear
  await expect(page.locator('text=Required fields:')).not.toBeVisible();
  
  // Click Next to go to step 2
  await nextButton.click();
  
  // Check we're now on step 2
  await expect(page.locator('text=Step 2 of 3: Ticket Configuration')).toBeVisible();
  
  console.log('✅ Event Creation Wizard Next Button works correctly!');
});