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

test.describe('Seat Map Demo', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/seat-map-demo');
  });

  test('loads seat map demo page', async ({ page }) => {
    // Wait for main heading
    await expect(page.getByRole('heading', { name: 'Seat Map Demo' })).toBeVisible();
    
    // Check description
    await expect(page.getByText('Interactive seat selection system for premium events')).toBeVisible();
    
    // Check event selection section
    await expect(page.getByRole('heading', { name: 'Select an Event' })).toBeVisible();
  });

  test('displays events with seat map support', async ({ page }) => {
    // Should show events that support seat maps
    await expect(page.getByText('Autumn Gala & Silent Auction')).toBeVisible();
    await expect(page.getByText('Contemporary Dance Showcase')).toBeVisible();
    
    // Check venue types are displayed
    await expect(page.getByText('Banquet Tables')).toBeVisible();
    await expect(page.getByText('Theater Seating')).toBeVisible();
    
    // Check select buttons
    await expect(page.getByRole('button', { name: 'Select Seats' }).first()).toBeVisible();
  });

  test('navigates to seat selection for ballroom event', async ({ page }) => {
    // Click on the first event (Autumn Gala - Banquet Tables)
    await page.getByRole('button', { name: 'Select Seats' }).first().click();
    
    // Should navigate to seat selection step
    await expect(page.getByText('Autumn Gala & Silent Auction')).toBeVisible();
    await expect(page.getByText('Banquet Tables')).toBeVisible();
    
    // Should show back button
    await expect(page.getByRole('button', { name: 'Back to Events' })).toBeVisible();
    
    // Should show seat map legend
    await expect(page.getByText('Seat Map Legend')).toBeVisible();
    await expect(page.getByText('Availability')).toBeVisible();
  });

  test('navigates to seat selection for theater event', async ({ page }) => {
    // Click on the theater event (Contemporary Dance Showcase)
    await page.getByRole('button', { name: 'Select Seats' }).nth(1).click();
    
    // Should show theater-specific elements
    await expect(page.getByText('Contemporary Dance Showcase')).toBeVisible();
    await expect(page.getByText('Theater Seating')).toBeVisible();
    
    // Check for seat map controls
    await expect(page.getByText('Display Options')).toBeVisible();
  });

  test('shows selection summary and controls', async ({ page }) => {
    // Navigate to seat selection
    await page.getByRole('button', { name: 'Select Seats' }).first().click();
    
    // Should show selection summary at bottom
    await expect(page.getByText('0 selected')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Clear Selection' })).toBeDisabled();
    await expect(page.getByRole('button', { name: 'Continue to Checkout' })).toBeDisabled();
  });

  test('can navigate back to event selection', async ({ page }) => {
    // Navigate to seat selection
    await page.getByRole('button', { name: 'Select Seats' }).first().click();
    
    // Click back button
    await page.getByRole('button', { name: 'Back to Events' }).click();
    
    // Should return to event selection
    await expect(page.getByRole('heading', { name: 'Select an Event' })).toBeVisible();
    await expect(page.getByText('Choose an event that supports assigned seating')).toBeVisible();
  });

  test('displays seat map legend with statistics', async ({ page }) => {
    // Navigate to seat selection
    await page.getByRole('button', { name: 'Select Seats' }).first().click();
    
    // Wait for seat map to load
    await page.waitForTimeout(2000);
    
    // Check legend components
    await expect(page.getByText('Seat Map Legend')).toBeVisible();
    await expect(page.getByText('total seats')).toBeVisible();
    await expect(page.getByText('available')).toBeVisible();
    
    // Check availability status items
    await expect(page.getByText('Available')).toBeVisible();
    await expect(page.getByText('Sold')).toBeVisible();
  });

  test('has responsive design elements', async ({ page }) => {
    // Test mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    
    await expect(page.getByRole('heading', { name: 'Seat Map Demo' })).toBeVisible();
    
    // Events should stack on mobile
    const eventCards = page.locator('[class*="grid"]').filter({ hasText: 'Autumn Gala' });
    await expect(eventCards).toBeVisible();
  });

  test('shows loading states and error handling', async ({ page }) => {
    // Navigate to seat selection
    await page.getByRole('button', { name: 'Select Seats' }).first().click();
    
    // Should show loading state briefly
    // Note: In a real test, we might want to mock slow network conditions
    
    // Eventually shows content
    await expect(page.getByText('Seat Map Legend')).toBeVisible({ timeout: 10000 });
  });

  test('seat map canvas renders correctly', async ({ page }) => {
    // Navigate to theater event for seat map
    await page.getByRole('button', { name: 'Select Seats' }).nth(1).click();
    
    // Wait for seat map to initialize
    await page.waitForTimeout(3000);
    
    // Should show SVG seat map canvas
    const canvas = page.locator('svg');
    await expect(canvas).toBeVisible();
    
    // Should show zoom controls
    await expect(page.getByRole('button').filter({ hasText: 'ZoomIn' })).toBeVisible();
    await expect(page.getByRole('button').filter({ hasText: 'ZoomOut' })).toBeVisible();
  });
});