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

/**
 * DCS 编辑器 - 基础导航测试
 *
 * 应用使用 Hash 路由（createWebHashHistory('/dcs-web')），
 * 首次访问 Web 端默认跳转到 /canvases 画布列表页。
 */

test.describe('基础导航', () => {
  test('应用加载无错误', async ({ page }) => {
    const errors: string[] = []
    page.on('pageerror', (err) => {
      errors.push(err.message)
    })

    await page.goto('/')
    // 等待应用框架渲染完毕（路由守卫会重定向到 canvases 或 editor）
    await page.waitForLoadState('networkidle')

    // 不应产生未捕获的 JS 异常
    expect(errors).toEqual([])
  })

  test('可以导航到画布列表页', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // Web 模式下默认重定向到画布列表
    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
    // 页面标题区域应包含 "DCS图"
    await expect(page.locator('.page-title')).toContainText('DCS图')
    // 应有"添加DCS图"卡片
    await expect(page.locator('.add-card')).toBeVisible()
  })

  test('可以导航到编辑器页面', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // 通过"添加DCS图"创建一个画布并进入编辑器
    await page.locator('.add-card').click()
    // 等待创建对话框出现
    const dialog = page.locator('.el-dialog')
    await expect(dialog).toBeVisible({ timeout: 5000 })

    // 填写画布名称
    await dialog.locator('input').first().fill('测试画布')
    // 点击创建按钮
    await dialog.locator('button').filter({ hasText: '创建' }).click()

    // 等待跳转到编辑器页面
    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })
  })

  test('编辑器包含侧边栏、画布舞台和属性面板', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // 先创建画布进入编辑器
    await page.locator('.add-card').click()
    const dialog = page.locator('.el-dialog')
    await expect(dialog).toBeVisible({ timeout: 5000 })
    await dialog.locator('input').first().fill('结构测试画布')
    await dialog.locator('button').filter({ hasText: '创建' }).click()
    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })

    // 验证编辑器三大区域
    // 1. 侧边栏（工具栏 + 面板）
    await expect(page.locator('.editor-sidebar-shell')).toBeVisible()
    await expect(page.locator('.tool-rail')).toBeVisible()

    // 2. 画布舞台
    await expect(page.locator('.canvas-wrapper')).toBeVisible()

    // 3. 属性面板
    await expect(page.locator('.property-panel-shell')).toBeVisible()
  })

  test('编辑器头部可见且包含撤销重做按钮', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // 创建画布进入编辑器
    await page.locator('.add-card').click()
    const dialog = page.locator('.el-dialog')
    await expect(dialog).toBeVisible({ timeout: 5000 })
    await dialog.locator('input').first().fill('头部测试画布')
    await dialog.locator('button').filter({ hasText: '创建' }).click()
    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })

    // 编辑器头部
    await expect(page.locator('.editor-header')).toBeVisible()

    // 撤销按钮（fa-rotate-left 图标）
    const undoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-left') })
    await expect(undoBtn).toBeVisible()

    // 重做按钮（fa-rotate-right 图标）
    const redoBtn = page.locator('.editor-header .icon-btn').filter({ has: page.locator('.fa-rotate-right') })
    await expect(redoBtn).toBeVisible()
  })

  test('状态栏在编辑器中可见', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // 创建画布进入编辑器
    await page.locator('.add-card').click()
    const dialog = page.locator('.el-dialog')
    await expect(dialog).toBeVisible({ timeout: 5000 })
    await dialog.locator('input').first().fill('状态栏测试画布')
    await dialog.locator('button').filter({ hasText: '创建' }).click()
    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })

    // 状态栏
    await expect(page.locator('.editor-status-bar')).toBeVisible()
    // 状态栏应显示缩放百分比
    await expect(page.locator('.editor-status-bar .status-item')).toContainText(['%'])
  })

  test('可以通过头部 "DCS编辑器" 按钮返回画布列表', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // 先进入编辑器
    await page.locator('.add-card').click()
    const dialog = page.locator('.el-dialog')
    await expect(dialog).toBeVisible({ timeout: 5000 })
    await dialog.locator('input').first().fill('返回测试画布')
    await dialog.locator('button').filter({ hasText: '创建' }).click()
    await expect(page.locator('.dcs-editor')).toBeVisible({ timeout: 10000 })

    // 点击 "DCS编辑器" 返回画布列表
    await page.locator('.scope-btn').click()
    await expect(page.locator('.canvases-page')).toBeVisible({ timeout: 10000 })
  })
})