import { chromium } from '@playwright/test'

/**
 * /table-test 探针 v12 —— 收尾：横向滚动的 class 抖动到底由谁驱动（只读诊断）。
 *
 * 已知：横向滚动时 tbody 无节点增删，但每帧有 class 写入，样本显示
 * 固定列的 `fixed-cell--active` 在反复翻转。
 *
 * 本版把三种候选驱动因素分别切开：
 *   ① fixed-col-shadow（页面显式开了 true）
 *   ② 固定列 sticky 补丁（G3Table 自加的 position/z-index）
 *   ③ 横向虚拟滚动（本页 22 列 < 30，应当是关的 —— 顺带验证）
 *
 * 做法：直接在**内存里**改 G3Table 的 props（不改仓库文件），分别测
 * class 写入/帧 与 帧率，交替多轮。
 */

const URL_BASE = process.env.PROBE_URL || 'http://127.0.0.1:5090'
const MENU_CODE = 'menu.table_test'

const median = (a) => {
  const s = [...a].filter((x) => x != null).sort((x, y) => x - y)
  return s.length ? s[s.length >> 1] : null
}
const r1 = (n) => (n == null ? null : +Number(n).toFixed(1))

const browser = await chromium.launch({ headless: false })
const context = await browser.newContext({ viewport: { width: 1600, height: 900 } })
await context.route('**/api/data/loaddata', async (route) => {
  let viewName = ''
  try {
    viewName = JSON.parse(route.request().postData() || '').view_name || ''
  } catch {
    /* ignore */
  }
  const response = await route.fetch()
  if (viewName !== 's_power' && viewName !== 's_user_power') return route.fulfill({ response })
  let json
  try {
    json = await response.json()
  } catch {
    return route.fulfill({ response })
  }
  const rows = Array.isArray(json?.data) ? json.data : []
  if (viewName === 's_power') {
    if (!rows.some((r) => r.b_id === MENU_CODE)) rows.push({ b_id: MENU_CODE, b_canuse: 1 })
  } else if (!rows.some((r) => r.b_power_id === MENU_CODE)) {
    rows.push({ b_user_id: 'demo_zhangwei', b_power_id: MENU_CODE, b_canuse: 1 })
  }
  json.data = rows
  await route.fulfill({
    response,
    body: JSON.stringify(json),
    headers: { ...response.headers(), 'content-type': 'application/json' },
  })
})
const page = await context.newPage()
page.on('pageerror', (e) => console.log('[pageerror]', String(e).slice(0, 200)))
await page.goto(`${URL_BASE}/table-test`, { waitUntil: 'domcontentloaded' })
await page.waitForSelector('.stk-table', { timeout: 90000 })
await page.waitForTimeout(3000)

/* 先确认本页的虚拟滚动开关状态 */
const cfg = await page.evaluate(() => {
  const t = document.querySelector('.stk-table')
  return {
    cls: t.className,
    virtualXOn: t.className.includes('vt-x-on'),
    virtualOn: t.className.includes('vt-on'),
    tds: document.querySelectorAll('.stk-tbody-main td').length,
    fixedCells: document.querySelectorAll('.stk-tbody-main td.fixed-cell').length,
  }
})
console.log('表格配置:', JSON.stringify(cfg))

/* 拿到 G3Table 组件实例，便于在内存里切 prop */
const hasInst = await page.evaluate(() => {
  const root = document.querySelector('.g3-table')
  let i = root?.__vueParentComponent
  let hops = 0
  while (i && hops < 6) {
    if (i.type?.__name === 'G3Table' || i.type?.name === 'G3Table') {
      window.__g3 = i
      return true
    }
    i = i.parent
    hops += 1
  }
  // 退一步：host 元素本身
  window.__g3 = root?.__vueParentComponent || null
  return !!window.__g3
})
console.log('找到 G3Table 实例:', hasInst)

/**
 * 横向滚动测量：帧率 + class 写入次数 + 是否有节点增删。
 * 不复位 scrollLeft（避免「回绕到 0」污染 class 抖动统计），改为在区间内往返。
 */
async function measureX({ steps = 40, px = 80 } = {}) {
  const ok = await page.evaluate(() => !!document.querySelector('.stk-table'))
  if (!ok) return { fps: null }
  return page.evaluate(
    async ({ steps, px }) => {
      const cont = document.querySelector('.stk-table')
      const tbody = document.querySelector('.stk-tbody-main')
      let attr = 0
      let child = 0
      const classes = {}
      const obs = new MutationObserver((recs) => {
        for (const m of recs) {
          if (m.type === 'attributes') {
            attr += 1
            const c = m.target.getAttribute?.('class') || ''
            // 只记「关键状态类」的分布
            for (const k of ['fixed-cell--active', 'fixed-cell--shadow', 'fixed-cell--border-left']) {
              if (c.includes(k)) classes[k] = (classes[k] || 0) + 1
            }
          } else if (m.type === 'childList') {
            child += m.addedNodes.length + m.removedNodes.length
          }
        }
      })
      obs.observe(tbody, { childList: true, subtree: true, attributes: true })

      // 从当前 scrollLeft 出发，在 [lo, hi] 区间内往返，绝不回到 0
      const max = cont.scrollWidth - cont.clientWidth
      const lo = Math.round(max * 0.2)
      const hi = Math.round(max * 0.9)
      if (cont.scrollLeft < lo || cont.scrollLeft > hi) cont.scrollLeft = Math.round(max * 0.5)
      await new Promise((r) => requestAnimationFrame(r))

      const frames = []
      let last = performance.now()
      let stop = false
      const tick = () => {
        const now = performance.now()
        frames.push(now - last)
        last = now
        if (!stop) requestAnimationFrame(tick)
      }
      requestAnimationFrame(tick)

      let dir = 1
      for (let i = 0; i < steps; i += 1) {
        await new Promise((r) => requestAnimationFrame(r))
        cont.scrollLeft += dir * px
        if (cont.scrollLeft >= hi) dir = -1
        else if (cont.scrollLeft <= lo) dir = 1
      }
      stop = true
      await new Promise((r) => setTimeout(r, 80))
      obs.disconnect()

      const sorted = [...frames].sort((a, b) => a - b)
      const avg = frames.reduce((a, b) => a + b, 0) / frames.length
      const q = (p) => sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * p))]
      return {
        fps: +(1000 / avg).toFixed(1),
        avg: +avg.toFixed(1),
        p95: +q(0.95).toFixed(1),
        attrPerFrame: +(attr / steps).toFixed(2),
        childPerFrame: +(child / steps).toFixed(2),
        stateClassHits: classes,
      }
    },
    { steps, px },
  )
}

/* ---- 基线 ---- */
console.log('\n--- 基线（fixedColShadow=true，sticky 补丁开）---')
const base = []
for (let i = 0; i < 3; i += 1) base.push(await measureX())
console.log(JSON.stringify(base, null, 2))
console.log(`基线中位: ${r1(median(base.map((b) => b.fps)))}fps, ${r1(median(base.map((b) => b.attrPerFrame)))} attr/帧`)

/* ---- 关掉 fixedColShadow ---- */
console.log('\n--- 关闭 fixedColShadow（内存改 prop）---')
await page.evaluate(() => {
  const t = document.querySelector('.g3-table')
  // 直接改 props 对象上的值（Vue 3 props 是 shallowReactive，可写但会告警）
  const inst = window.__g3
  if (inst?.props) inst.props.fixedColShadow = false
  else if (t?.__vueParentComponent?.props) t.__vueParentComponent.props.fixedColShadow = false
})
await page.waitForTimeout(800)
// 用 CSS 关掉阴影类作为等价对照（不改 prop 也能验证「阴影类」是否是驱动因素）
const shadowOff = []
for (let i = 0; i < 3; i += 1) shadowOff.push(await measureX())
console.log(JSON.stringify(shadowOff, null, 2))

/* ---- 用 CSS 强制固定列恒 sticky 已由组件补丁提供；这里测「去掉补丁」 ---- */
console.log('\n--- 用 ?g3-fixed-patch=off 重新载入（去掉 sticky 补丁）---')
await page.goto(`${URL_BASE}/table-test?g3-fixed-patch=off`, { waitUntil: 'domcontentloaded' })
await page.waitForSelector('.stk-table', { timeout: 90000 })
await page.waitForTimeout(2500)
const patchOff = []
for (let i = 0; i < 3; i += 1) patchOff.push(await measureX())
console.log(JSON.stringify(patchOff, null, 2))
const patchCls = await page.evaluate(() => document.querySelector('.g3-table')?.className)
console.log('root class:', patchCls)

/* ---- 回到默认，测「把 sticky 全部关掉」的纯对照 ---- */
await page.goto(`${URL_BASE}/table-test`, { waitUntil: 'domcontentloaded' })
await page.waitForSelector('.stk-table', { timeout: 90000 })
await page.waitForTimeout(2500)
await page.evaluate(() => {
  const s = document.createElement('style')
  s.dataset.probe = '1'
  s.textContent = `.stk-table td.fixed-cell, .stk-table th.fixed-cell { position: static !important; z-index: auto !important; }`
  document.head.appendChild(s)
})
await page.waitForTimeout(700)
const noSticky = []
for (let i = 0; i < 3; i += 1) noSticky.push(await measureX())
console.log('\n--- 去掉全部固定列 sticky ---')
console.log(JSON.stringify(noSticky, null, 2))

/* ================= 汇总 ================= */
console.log('\n================ 汇总（横向滚动）================')
const line = (label, runs) =>
  console.log(
    `${label.padEnd(28)} ${String(r1(median(runs.map((r) => r.fps)))).padStart(5)}fps | ${String(r1(median(runs.map((r) => r.attrPerFrame)))).padStart(5)} class写/帧 | ${String(r1(median(runs.map((r) => r.childPerFrame)))).padStart(5)} 节点/帧`,
  )
console.log('配置'.padEnd(26) + '  帧率  | class写入     | 节点增删')
line('fixedColShadow=true(默认)', base)
line('fixedColShadow 关(内存改)', shadowOff)
line('无 sticky 补丁(URL 开关)', patchOff)
line('固定列全部 static', noSticky)

await browser.close()