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

test.describe('CodeForge - Core Functionality', () => {
  test.beforeEach(async ({ page }) => {
    test.setTimeout(30000)
    await page.goto('/', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(2000)
  })

  test('should load the application successfully', async ({ page }) => {
    await expect(page.locator('body')).toBeVisible()
  })

  test('should display main navigation', async ({ page }) => {
    const tabList = page.locator('[role="tablist"]').first()
    await expect(tabList).toBeVisible({ timeout: 10000 })
  })

  test('should switch between tabs', async ({ page }) => {
    const tabs = page.locator('button[role="tab"]')
    const tabCount = await tabs.count()
    
    if (tabCount > 1) {
      await tabs.nth(1).click()
      await page.waitForTimeout(500)
      await expect(page.locator('[role="tabpanel"]:visible')).toBeVisible()
    }
  })
})

test.describe('CodeForge - Code Editor', () => {
  test('should display Monaco editor', async ({ page }) => {
    test.setTimeout(45000)
    await page.goto('/', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(2000)
    
    const codeEditorTab = page.locator('button[role="tab"]').filter({ hasText: /Code Editor/i }).first()
    if (await codeEditorTab.isVisible({ timeout: 5000 })) {
      await codeEditorTab.click()
      await page.waitForTimeout(3000)
      
      const monacoEditor = page.locator('.monaco-editor').first()
      await expect(monacoEditor).toBeVisible({ timeout: 20000 })
    }
  })
})

test.describe('CodeForge - Responsive Design', () => {
  test('should work on mobile viewport', async ({ page }) => {
    test.setTimeout(30000)
    await page.setViewportSize({ width: 375, height: 667 })
    await page.goto('/', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(2000)
    
    await expect(page.locator('body')).toBeVisible()
  })

  test('should work on tablet viewport', async ({ page }) => {
    test.setTimeout(30000)
    await page.setViewportSize({ width: 768, height: 1024 })
    await page.goto('/', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(2000)
    
    await expect(page.locator('body')).toBeVisible()
  })
})