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

test.describe('Transcoding Dashboard', () => {
  test.beforeEach(async ({ page }) => {
    // Login
    await page.goto('http://localhost:5173/login');
    await page.fill('input[type="email"]', 'test@example.com');
    await page.fill('input[type="password"]', 'Test1234!');
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');
  });

  test('should navigate to transcoding dashboard', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    await expect(page.locator('h1')).toContainText('Transcoding Dashboard');
  });

  test('should display statistics cards', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Check all 5 stat cards
    await expect(page.locator('text=Total Jobs')).toBeVisible();
    await expect(page.locator('text=Pending')).toBeVisible();
    await expect(page.locator('text=Processing')).toBeVisible();
    await expect(page.locator('text=Completed')).toBeVisible();
    await expect(page.locator('text=Failed')).toBeVisible();
  });

  test('should open create job dialog', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Click "New Job"
    await page.click('button:has-text("New Job")');
    
    // Verify dialog opened
    await expect(page.locator('text=Create Transcoding Job')).toBeVisible();
    await expect(page.locator('select[id="track"]')).toBeVisible();
    await expect(page.locator('select[id="quality"]')).toBeVisible();
  });

  test('should create transcoding job', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Open dialog
    await page.click('button:has-text("New Job")');
    
    // Select track (if available)
    const trackSelect = page.locator('select[id="track"]');
    const options = await trackSelect.locator('option').count();
    
    if (options > 1) { // Has tracks besides placeholder
      await trackSelect.selectOption({ index: 1 });
      
      // Select quality
      await page.selectOption('select[id="quality"]', 'medium');
      
      // Submit
      await page.click('button:has-text("Submit Job")');
      
      // Verify job created
      await expect(page.locator('text=Job submitted')).toBeVisible({ timeout: 5000 });
    }
  });

  test('should display performance metrics', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Scroll to metrics section
    await page.locator('text=Performance Metrics').scrollIntoViewIfNeeded();
    
    // Check metrics are visible
    await expect(page.locator('text=Success Rate')).toBeVisible();
    await expect(page.locator('text=Avg Processing Time')).toBeVisible();
    await expect(page.locator('text=Queue Health')).toBeVisible();
  });

  test('should refresh statistics', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Click refresh button
    await page.click('button:has-text("Refresh")');
    
    // Should still show dashboard (no error)
    await expect(page.locator('h1')).toContainText('Transcoding Dashboard');
  });

  test('should display quality estimation', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    await page.click('button:has-text("New Job")');
    
    // Select different qualities and check estimation
    const qualities = ['low', 'medium', 'high', 'lossless'];
    
    for (const quality of qualities) {
      await page.selectOption('select[id="quality"]', quality);
      await expect(page.locator('text=Estimated Processing Time')).toBeVisible();
    }
  });

  test('should show job progress bars', async ({ page }) => {
    await page.goto('http://localhost:5173/transcoding');
    
    // Check if any jobs are shown
    const jobsList = page.locator('text=Recent Jobs');
    await expect(jobsList).toBeVisible();
    
    // If jobs exist, check for progress indicators
    const processingJobs = page.locator('[data-status="processing"]');
    const count = await processingJobs.count();
    
    if (count > 0) {
      // Should have progress bar
      await expect(processingJobs.first().locator('[role="progressbar"]')).toBeVisible();
    }
  });
});