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

test.describe('Smoke Tests', () => {
  test('application loads successfully', async ({ page }) => {
    await page.goto('/');
    
    // Should either show login page or dashboard
    const hasLogin = await page.locator('text=Sign in to your account').isVisible();
    const hasDashboard = await page.locator('text=Dashboard').isVisible();
    
    expect(hasLogin || hasDashboard).toBeTruthy();
    
    await page.screenshot({ 
      path: 'screenshots/smoke_application_loads.png',
      fullPage: true
    });
  });

  test('events page loads successfully after authentication', async ({ page }) => {
    // Login first
    await page.goto('/login');
    await page.click('[data-testid="demo-user-sarah-admin"]');
    await page.click('button[type="submit"]');
    await page.waitForURL(/\/(dashboard|$)/, { timeout: 10000 });
    
    // Now visit events page
    await page.goto('/events');
    
    // Should show events page content
    await expect(page.locator('text=Events')).toBeVisible();
    
    await page.screenshot({ 
      path: 'screenshots/smoke_events_page_loads.png',
      fullPage: true
    });
  });

  test('login page elements are present', async ({ page }) => {
    await page.goto('/login');
    
    // Check for key elements
    await expect(page.locator('h1')).toContainText('Black Canyon Tickets');
    await expect(page.locator('input[name="email"]')).toBeVisible();
    await expect(page.locator('input[name="password"]')).toBeVisible();
    await expect(page.locator('button[type="submit"]')).toBeVisible();
    
    // Check for demo accounts section
    await expect(page.locator('h3:has-text("Demo Accounts")')).toBeVisible();
    await expect(page.locator('[data-testid="demo-user-sarah-admin"]')).toBeVisible();
    
    await page.screenshot({ 
      path: 'screenshots/smoke_login_elements.png',
      fullPage: true
    });
  });

  test('theme toggle works', async ({ page }) => {
    await page.goto('/login');
    
    // Theme toggle is only available on authenticated pages
    // Login first to test theme toggle
    await page.click('[data-testid="demo-user-sarah-admin"]');
    await page.click('button[type="submit"]');
    await page.waitForURL(/\/(dashboard|$)/, { timeout: 10000 });
    
    // Look for theme toggle button with correct aria-label
    const themeButton = page.locator('button[aria-label*="Switch to"]').first();
    
    if (await themeButton.isVisible()) {
      await themeButton.click();
      await page.waitForTimeout(500);
      
      await page.screenshot({ 
        path: 'screenshots/smoke_theme_toggle.png',
        fullPage: true
      });
    } else {
      console.log('Theme toggle not found - may need to be implemented');
    }
  });

  test('basic authentication flow works', async ({ page }) => {
    await page.goto('/login');
    
    // Use demo account - click the Sarah Admin demo button
    await page.click('[data-testid="demo-user-sarah-admin"]');
    
    // Verify form is filled
    await expect(page.locator('input[name="email"]')).toHaveValue('admin@example.com');
    await expect(page.locator('input[name="password"]')).toHaveValue('demo123');
    
    // Submit form
    await page.click('button[type="submit"]');
    
    // Wait for navigation
    await page.waitForURL(/\/(dashboard|$)/, { timeout: 10000 });
    
    // Should show user info in header user menu button
    await expect(page.locator('[data-testid="user-menu-button"]')).toBeVisible();
    await expect(page.locator('[data-testid="user-menu-button"]:has-text("Sarah Admin")')).toBeVisible();
    
    await page.screenshot({ 
      path: 'screenshots/smoke_auth_success.png',
      fullPage: true
    });
  });

  test('responsive layout works', async ({ page }) => {
    // Test mobile layout
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/login');
    
    await page.screenshot({ 
      path: 'screenshots/smoke_mobile_layout.png',
      fullPage: true
    });
    
    // Test desktop layout
    await page.setViewportSize({ width: 1280, height: 720 });
    await page.reload();
    
    await page.screenshot({ 
      path: 'screenshots/smoke_desktop_layout.png',
      fullPage: true
    });
  });
});