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

/**
 * Report View E2E Tests (New UI)
 * Tests report viewing, rendering, and download functionality
 */
test.describe('Report View (New UI)', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/project/1')
    await page.waitForLoadState('networkidle')
    // Wait for content to render
    await page.waitForTimeout(1000)
  })

  test('should render HTML content in iframe preview', 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')

    // Wait for iframe to be visible
    const iframe = page.locator('iframe[srcdoc]')
    await expect(iframe).toBeVisible({ timeout: 10000 })
  })

  test('should render Markdown content with proper formatting', 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 is rendered (not raw markdown)
    // The header should be rendered as h1
    const header = page.locator('h1:has-text("日报标题")')
    await expect(header).toBeVisible({ timeout: 10000 })
  })

  test('should show download button for PPTX reports', 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 button is visible (new UI has single download button for all types)
    const downloadBtn = page.locator('button:has-text("下载")')
    await expect(downloadBtn).toBeVisible({ timeout: 10000 })
  })

  test('should show report name in preview header when report is selected', 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 report name appears in preview header
    await expect(page.locator('h3:has-text("2026-05-22 日报.html")').first()).toBeVisible({ timeout: 10000 })
  })

  test('should show report date and size in preview header', 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 date and size appear
    await expect(page.locator('text=2026-05-22').first()).toBeVisible({ timeout: 5000 })
    await expect(page.locator('text=15KB').first()).toBeVisible({ timeout: 5000 })
  })

  test('should have download button for all report types', 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')
    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })

    // Click on MD report
    await page.click('text=2026-05-21 日报.md')
    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })

    // Click on PPTX report
    await page.click('text=2026-05-20 周报.pptx')
    await expect(page.locator('button:has-text("下载")').first()).toBeVisible({ timeout: 5000 })
  })

  test('should navigate between reports smoothly', async ({ page }) => {
    // Wait for project to load
    await expect(page.locator('h2').first()).toBeVisible({ timeout: 15000 })

    // Select first report
    await page.click('text=2026-05-22 日报.html')
    await expect(page.locator('h3:has-text("2026-05-22 日报.html")').first()).toBeVisible({ timeout: 5000 })

    // Select second report
    await page.click('text=2026-05-21 日报.md')
    await expect(page.locator('h3:has-text("2026-05-21 日报.md")').first()).toBeVisible({ timeout: 5000 })

    // Select third report
    await page.click('text=2026-05-20 周报.pptx')
    await expect(page.locator('h3:has-text("2026-05-20 周报.pptx")').first()).toBeVisible({ timeout: 5000 })
  })

  test('should show empty state for non-existent project', async ({ page }) => {
    // Navigate to project with no reports (project ID 999 - mock data returns empty)
    await page.goto('/project/999')
    await page.waitForLoadState('networkidle')

    // Should show the project detail page with "项目 999" header
    await expect(page.locator('h2:has-text("项目 999")')).toBeVisible({ timeout: 15000 })
    // With no reports, should show empty state in list
    await expect(page.locator('text=暂无报告').first()).toBeVisible({ timeout: 5000 })
    // Should show empty state in preview
    await expect(page.locator('text=选择一份报告以预览')).toBeVisible({ timeout: 5000 })
  })
})