import { test, expect } from '@playwright/test';

test.describe('Events Index Page', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to the login page and perform authentication
    await page.goto('/login');
    
    // Wait for the login form to be visible
    await expect(page.locator('form')).toBeVisible();
    
    // Fill in login credentials (mock authentication)
    await page.fill('input[type="email"]', 'admin@blackcanyontickets.com');
    await page.fill('input[type="password"]', 'password123');
    
    // Submit the form
    await page.click('button[type="submit"]');
    
    // Wait for successful login and redirect
    await expect(page).toHaveURL('/dashboard');
  });

  test('should display events page with loading skeleton then cards', async ({ page }) => {
    // Navigate to events page
    await page.goto('/events');
    
    // Check page title and subtitle
    await expect(page.locator('h1')).toContainText('Events');
    await expect(page.locator('p')).toContainText('Manage your upcoming events');
    
    // Should see skeleton loader initially (might be brief)
    // Then should see event cards or empty state
    await expect(page.locator('[data-testid="events-container"]')).toBeVisible();
  });

  test('should show New Event button for admin users', async ({ page }) => {
    await page.goto('/events');
    
    // Admin users should see the New Event button
    await expect(page.locator('button:has-text("New Event")')).toBeVisible();
  });

  test('should display territory filter component', async ({ page }) => {
    await page.goto('/events');
    
    // Territory filter should be visible
    await expect(page.locator('[data-testid="territory-filter"]')).toBeVisible();
  });

  test('should handle empty events state', async ({ page }) => {
    await page.goto('/events');
    
    // Wait for loading to complete
    await page.waitForTimeout(1000);
    
    // Should show either events or empty state message
    const eventsContainer = page.locator('[data-testid="events-container"]');
    await expect(eventsContainer).toBeVisible();
  });

  test('should navigate to event detail when card is clicked', async ({ page }) => {
    await page.goto('/events');
    
    // Wait for any event cards to load
    await page.waitForTimeout(1000);
    
    // If there are event cards, test navigation
    const eventCards = page.locator('[data-testid="event-card"]');
    const cardCount = await eventCards.count();
    
    if (cardCount > 0) {
      // Click the first event card
      await eventCards.first().click();
      
      // Should navigate to event detail page
      await expect(page).toHaveURL(/\/events\/[^/]+$/);
    }
  });
});