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

test.describe('运势分析功能E2E测试', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/#/pages/fortune/index')
    await page.waitForLoadState('networkidle')
    await page.waitForTimeout(1000)
  })

  test.describe('TC-FORTUNE-001: 运势页面结构', () => {
    test('应该显示运势标签页', async ({ page }) => {
      const tabs = page.locator('[data-test="fortune-tabs"]')
      await expect(tabs).toBeVisible()
    })

    test('应该显示日运和月运标签', async ({ page }) => {
      // 使用 data-test 或类名定位
      const tabs = page.locator('[data-test="fortune-tabs"]')
      await expect(tabs).toBeVisible()

      const tabElements = page.locator('.tab')
      const count = await tabElements.count()
      expect(count).toBeGreaterThanOrEqual(2)
    })

    test('默认应该选中日运标签', async ({ page }) => {
      const tabs = page.locator('[data-test="fortune-tabs"]')
      await expect(tabs).toBeVisible()

      // 日运标签默认应该 active
      const firstTab = page.locator('.tab').first()
      const tabClass = await firstTab.getAttribute('class')
      expect(tabClass).toContain('active')
    })
  })

  test.describe('TC-FORTUNE-002: 标签切换', () => {
    test('应该能够切换标签', async ({ page }) => {
      const tabs = page.locator('.tab')
      const count = await tabs.count()
      expect(count).toBeGreaterThanOrEqual(2)

      // 点击第二个tab（月运）
      await tabs.nth(1).click({ force: true })
      await page.waitForTimeout(500)

      // 验证第二个tab获取active样式
      const secondTabClass = await tabs.nth(1).getAttribute('class')
      expect(secondTabClass).toContain('active')
    })
  })

  test.describe('TC-FORTUNE-003: 无排盘数据提示', () => {
    test('未排盘时应该显示提示信息', async ({ page }) => {
      // 检查是否有排盘提示（当无紫微排盘数据时显示）
      const noChartHint = page.locator('.no-chart-hint')
      const isVisible = await noChartHint.isVisible().catch(() => false)
      if (isVisible) {
        await expect(noChartHint).toBeVisible()
        const hintText = page.locator('.hint-text')
        await expect(hintText).toBeVisible()
      } else {
        // 无提示时测试页面基本结构
        const tabs = page.locator('[data-test="fortune-tabs"]')
        await expect(tabs).toBeVisible()
      }
    })
  })

  test.describe('TC-FORTUNE-004: 日期选择', () => {
    test('日运页面应该显示日期选择器', async ({ page }) => {
      const datePicker = page.locator('.date-picker').first()
      await expect(datePicker).toBeVisible()
    })

    test('月运页面应该显示月份选择器', async ({ page }) => {
      // 切换到月运tab
      const tabs = page.locator('.tab')
      if ((await tabs.count()) >= 2) {
        await tabs.nth(1).click({ force: true })
        await page.waitForTimeout(500)
      }

      const datePicker = page.locator('.date-picker').first()
      await expect(datePicker).toBeVisible()
    })
  })

  test.describe('TC-FORTUNE-005: 响应式设计', () => {
    test('移动端应该正常显示', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 })
      await page.reload()
      await page.waitForLoadState('networkidle')
      await page.waitForTimeout(1000)

      const tabs = page.locator('[data-test="fortune-tabs"]')
      await expect(tabs).toBeVisible()
    })

    test('桌面端应该正常显示', async ({ page }) => {
      await page.setViewportSize({ width: 1920, height: 1080 })
      await page.reload()
      await page.waitForLoadState('networkidle')
      await page.waitForTimeout(1000)

      const tabs = page.locator('[data-test="fortune-tabs"]')
      await expect(tabs).toBeVisible()
    })
  })
})