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

/**
 * 复现用户报的问题：
 *   编辑态里的 Select，点选项后**不立即**生效；要点别处才更新。
 *   「select 消失了，但框里的数据没变」。
 *
 * 严格控制步骤，每步都记录 DOM 实际内容与 row 数据。
 */
test('reproduce: select value not applied immediately', async ({ page }) => {
  const logs: string[] = []
  page.on('pageerror', (e) => logs.push('pageerror: ' + e.message))
  page.on('console', (m) => {
    if (m.type() === 'error' || m.type() === 'warning') logs.push('[' + m.type() + '] ' + m.text().slice(0, 200))
  })

  await page.goto('/ocean/booking')
  await page.waitForTimeout(2000)

  const rowState = () =>
    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 tr = rows[0]
      // 起运港列（pol）—— 用 data-col-key 精确定位
      const polTd = tr?.querySelector('td[data-col-key="pol"]') as HTMLElement | null
      const editor = polTd?.querySelector('.g3-select') as HTMLElement | null
      const displayText = polTd?.textContent?.trim() ?? null
      // 触发器里显示的文字
      const triggerInput = editor?.querySelector('input') as HTMLInputElement | null
      return {
        rowKey: tr?.getAttribute('data-row-key'),
        polTdText: displayText,
        hasSelectEditor: !!editor,
        triggerValue: triggerInput?.value ?? null,
        // 展示态（非编辑）的文本
        displaySpan: polTd?.querySelector('.g3-table__cell-display')?.textContent ?? null,
      }
    })

  console.log('1) 初始:            ' + JSON.stringify(await rowState()))

  // 点起运港单元格进入编辑
  const polCell = page.locator('.stk-tbody-main tr:not(.padding-top-tr)').first().locator('td[data-col-key="pol"]')
  await polCell.click()
  await page.waitForTimeout(600)
  console.log('2) 进入编辑后:      ' + JSON.stringify(await rowState()))

  // 打开下拉
  const selectRoot = polCell.locator('.g3-select')
  await selectRoot.click()
  await page.waitForTimeout(500)

  const dropdownInfo = await page.evaluate(() => {
    const panels = Array.from(document.querySelectorAll('.g3-select__dropdown, [role="listbox"], .g3-popover'))
    return {
      panelCount: panels.length,
      options: panels.length
        ? Array.from(panels[panels.length - 1].querySelectorAll('[role="option"], li, .g3-select__option')).map((o) =>
            (o.textContent || '').trim().slice(0, 12),
          )
        : [],
    }
  })
  console.log('3) 下拉内容:        ' + JSON.stringify(dropdownInfo))

  // 点「宁波」
  const option = page.locator('[role="option"], .g3-select__option').filter({ hasText: '宁波' }).first()
  const optCount = await option.count()
  console.log('4) 找到「宁波」选项数: ' + optCount)
  if (optCount > 0) {
    await option.click()
    await page.waitForTimeout(700)
    console.log('5) 点完选项后:      ' + JSON.stringify(await rowState()))
    console.log('   （期望 pol 立即变成 CNNGB / 宁波）')

    // 再点空白处
    await page.locator('.booking__title').click()
    await page.waitForTimeout(700)
    console.log('6) 点空白处后:      ' + JSON.stringify(await rowState()))
  }

  console.log('ERRORS: ' + JSON.stringify(logs.slice(0, 8), null, 2))
  expect(true).toBe(true)
})