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

/**
 * 验证行高修复：编辑前后行高必须都等于 rowHeight（32px）。
 * 这是当初就该有、却一直缺失的断言 —— 组件里有防此问题的意图（height: var(--row-height)），
 * 但从没有任何测试验证它真的生效。
 */
test('编辑前后行高保持 32px', async ({ page }) => {
  await page.goto('/ocean/booking')
  await page.waitForTimeout(2000)

  const measure = () =>
    page.evaluate(() => {
      const root = document.querySelector('.g3-table') as HTMLElement
      const rows = Array.from(root.querySelectorAll('.stk-tbody-main tr')).filter(
        (r) => !(r as HTMLElement).className.includes('padding-top'),
      ) as HTMLElement[]
      const h = (el?: HTMLElement | null) =>
        el ? Math.round(el.getBoundingClientRect().height * 100) / 100 : null
      const editing = rows[0]
      const tdEditor = editing?.querySelector(
        'td:has(> .g3-table__cell-editor-root)',
      ) as HTMLElement | null
      const er = tdEditor?.firstElementChild as HTMLElement | null
      return {
        rowHeights: rows.slice(0, 4).map((r) => h(r)),
        editorTd: h(tdEditor),
        editorRoot: h(er),
        editorTdPad: tdEditor ? getComputedStyle(tdEditor).padding : null,
        rowHeightVar: getComputedStyle(root.querySelector('.stk-table') as HTMLElement)
          .getPropertyValue('--row-height')
          .trim(),
      }
    })

  const before = await measure()
  console.log('BEFORE: ' + JSON.stringify(before))

  const cell = page.locator('.stk-tbody-main tr:not(.padding-top-tr)').first().locator('td').nth(2)
  await cell.click()
  await page.waitForTimeout(700)

  const during = await measure()
  console.log('DURING: ' + JSON.stringify(during))

  // 退出编辑
  await page.keyboard.press('Escape')
  await page.waitForTimeout(600)
  const after = await measure()
  console.log('AFTER:  ' + JSON.stringify(after))

  // 核心断言：三态行高一致，且等于 --row-height
  expect(before.rowHeights[0]).toBe(32)
  expect(during.rowHeights[0]).toBe(32) // ← 修复前是 42
  expect(after.rowHeights[0]).toBe(32)

  // 同行其它行不受影响
  expect(during.rowHeights[1]).toBe(32)

  // 编辑器确实存在（确认真的进入了编辑态，而不是断言空过）
  const editorCount = await page.evaluate(
    () => document.querySelectorAll('.g3-table__cell-editor-root').length,
  )
  console.log('EDITOR COUNT (退出后应为 0): ' + editorCount)
})