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

/**
 * Report Upload E2E Tests (New UI)
 * Tests report upload functionality in the project detail view
 */
test.describe('Report Upload (New UI)', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate directly to a project detail page
    await page.goto('/project/1')
    await page.waitForLoadState('networkidle')
    // Wait for content to render
    await page.waitForTimeout(1000)
  })

  test('should display existing reports in the report list', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Verify HTML report appears in list
    await expect(page.locator('text=2026-05-22 日报.html')).toBeVisible({ timeout: 5000 })

    // Verify MD report appears in list
    await expect(page.locator('text=2026-05-21 日报.md')).toBeVisible({ timeout: 5000 })

    // Verify PPTX report appears in list
    await expect(page.locator('text=2026-05-20 周报.pptx')).toBeVisible({ timeout: 5000 })
  })

  test('should display report type badges in sidebar', async ({ page }) => {
    // Check that file type badges are visible
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })
    
    // File type labels should be visible
    await expect(page.locator('text=HTML').first()).toBeVisible({ timeout: 5000 })
    await expect(page.locator('text=Markdown').first()).toBeVisible({ timeout: 5000 })
    await expect(page.locator('text=PowerPoint').first()).toBeVisible({ timeout: 5000 })
  })

  test('should select and preview HTML report', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Click on HTML report
    await page.click('text=2026-05-22 日报.html')

    // Verify preview appears (HTML reports show in iframe)
    await expect(page.locator('iframe[srcdoc]')).toBeVisible({ timeout: 10000 })
  })

  test('should select and preview MD report', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Click on MD report
    await page.click('text=2026-05-21 日报.md')

    // Verify markdown content is rendered
    await expect(page.locator('text=日报标题')).toBeVisible({ timeout: 10000 })
    await expect(page.locator('text=工作内容')).toBeVisible({ timeout: 5000 })
  })

  test('should show download button for PPTX report', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Click on PPTX report
    await page.click('text=2026-05-20 周报.pptx')

    // Verify download UI appears (new UI has unified download button)
    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 10000 })
  })

  test('should show empty state when no report is selected', async ({ page }) => {
    // The page starts without a selected report
    // Empty state should be visible (select prompt)
    await expect(page.locator('text=选择一份报告以预览')).toBeVisible({ timeout: 15000 })
  })

  test('should highlight selected report in the list', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Click on a report
    await page.click('text=2026-05-22 日报.html')

    // The selected report should have different styling (we can't easily test color, but we can test it's clickable)
    // Report should remain selected
    await expect(page.locator('iframe[srcdoc]')).toBeVisible({ timeout: 10000 })
  })

  test('should show glass effect sidebar', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Check that the sidebar has glass effect class
    const sidebar = page.locator('.glass-light')
    await expect(sidebar).toBeVisible({ timeout: 5000 })
  })
})