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

test.describe('Dashboard E2E - Comprehensive', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:5173/')
    await page.waitForLoadState('networkidle')
  })

  test('displays all dashboard elements', async ({ page }) => {
    // Check main heading
    await expect(page.locator('h1, h2, h3, h4').first()).toBeVisible()
    
    // Check for statistics cards
    const statsCards = page.locator('.MuiPaper-root, .MuiCard-root')
    await expect(statsCards.first()).toBeVisible()
    
    // Check for resource usage displays
    await expect(page.locator('text=/CPU|Memory|Storage/i')).toBeVisible()
  })

  test('navigates to all pages from dashboard', async ({ page }) => {
    const pages = [
      { name: 'Servers', url: /servers/ },
      { name: 'Templates', url: /templates/ },
      { name: 'Scaling', url: /scaling/ },
      { name: 'Providers', url: /providers/ }
    ]

    for (const pageData of pages) {
      await page.click(`text=${pageData.name}`)
      await page.waitForTimeout(500)
      await expect(page).toHaveURL(pageData.url)
      
      // Navigate back to dashboard
      await page.click('text=Dashboard')
      await page.waitForTimeout(500)
    }
  })

  test('displays cluster statistics', async ({ page }) => {
    await expect(page.locator('text=/servers/i')).toBeVisible()
    await expect(page.locator('text=/\d+/')).toBeVisible() // Numbers for stats
  })

  test('shows responsive design', async ({ page }) => {
    // Test mobile view
    await page.setViewportSize({ width: 375, height: 667 })
    await page.waitForTimeout(500)
    
    // Should still show main content
    await expect(page.locator('h1, h2, h3, h4').first()).toBeVisible()
    
    // Test desktop view
    await page.setViewportSize({ width: 1920, height: 1080 })
    await page.waitForTimeout(500)
    
    await expect(page.locator('h1, h2, h3, h4').first()).toBeVisible()
  })
})