import { chromium } from '@playwright/test'

/**
 * /table-test 探针 v8 —— 可靠 A/B + 类名抖动取证（只读诊断）。
 *
 * v5 的 CSS A/B 数值自相矛盾（同一项时好时坏），原因是单轮测量方差极大。
 * 本版改为**交替、多轮、取中位**：BASE, VAR, BASE, VAR, BASE, VAR —— 这样
 * 温度/GC/后台负载等慢变因素在两组间被平摊，差值才可信。
 *
 * 同时取三样硬证据：
 *   ① 横向滚动时 td 的 class 到底从什么变成什么（类名抖动取证）
 *   ② 每帧的 RecalcStyleCount / LayoutCount（用 CDP 计数器，不受帧率方差影响）
 *   ③ 单次点击的 trace 归因（首次 / 换行 / 同格 / 换列）
 */

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

async function makePage() {
  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(`${BASE_URL}/table-test`, { waitUntil: 'domcontentloaded' })
  await page.waitForSelector('.stk-table', { timeout: 90000 })
  await page.waitForTimeout(3000)
  return { browser, context, page }
}

/** 一次滚动测量：返回帧间隔统计 + CDP 计数器增量 */
async function scrollMeasure(page, context, { axis = 'y', steps = 90, px = 60 } = {}) {
  const client = await context.newCDPSession(page)
  await client.send('Performance.enable')
  const readCounters = async () => {
    const m = await client.send('Performance.getMetrics')
    const o = {}
    for (const x of m.metrics) o[x.name] = x.value
    return o
  }
  const before = await readCounters()
  const frames = await page.evaluate(
    async ({ axis, steps, px }) => {
      const cont = document.querySelector('.stk-table')
      cont.scrollTop = 0
      cont.scrollLeft = 0
      await new Promise((r) => requestAnimationFrame(r))
      const out = []
      let last = performance.now()
      let stop = false
      const tick = () => {
        const now = performance.now()
        out.push(now - last)
        last = now
        if (!stop) requestAnimationFrame(tick)
      }
      requestAnimationFrame(tick)
      for (let i = 0; i < steps; i += 1) {
        await new Promise((r) => requestAnimationFrame(r))
        if (axis === 'y') {
          const max = cont.scrollHeight - cont.clientHeight
          cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + px)
        } else {
          const max = cont.scrollWidth - cont.clientWidth
          cont.scrollLeft = cont.scrollLeft >= max - 1 ? 0 : Math.min(max, cont.scrollLeft + px)
        }
      }
      stop = true
      return out
    },
    { axis, steps, px },
  )
  const after = await readCounters()
  await client.detach()

  const d = (k) => +((after[k] ?? 0) - (before[k] ?? 0)).toFixed(2)
  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),
    avgMs: +avg.toFixed(1),
    p50: +q(0.5).toFixed(1),
    p95: +q(0.95).toFixed(1),
    frames: frames.length,
    recalcStyle: d('RecalcStyleCount'),
    layoutCount: d('LayoutCount'),
    styleMs: d('RecalcStyleDuration'),
    layoutMs: d('LayoutDuration'),
    taskMs: d('TaskDuration'),
    scriptMs: d('ScriptDuration'),
    perFrame: {
      styleMs: +(d('RecalcStyleDuration') / frames.length * 1000).toFixed(2),
      layoutMs: +(d('LayoutDuration') / frames.length * 1000).toFixed(2),
      taskMs: +(d('TaskDuration') / frames.length * 1000).toFixed(2),
      scriptMs: +(d('ScriptDuration') / frames.length * 1000).toFixed(2),
    },
  }
}

const median = (arr) => {
  const s = [...arr].sort((a, b) => a - b)
  return s[Math.floor(s.length / 2)]
}

console.log('================= 打开页面 =================')
const { browser, context, page } = await makePage()

/* ============================================================
 * ① 横向滚动时到底哪些 class 在抖
 * ============================================================ */
console.log('\n=========== ① 横向滚动：类名抖动取证 ===========')
const churn = await page.evaluate(async () => {
  const cont = document.querySelector('.stk-table')
  cont.scrollLeft = 0
  await new Promise((r) => requestAnimationFrame(r))

  // 记录某个 td 的 class 变化序列
  const td = document.querySelector('.stk-tbody-main td.fixed-cell')
  const seq = []
  const attrCount = {}
  let total = 0
  const obs = new MutationObserver((recs) => {
    for (const m of recs) {
      if (m.type !== 'attributes') continue
      total += 1
      const t = m.target
      attrCount[m.attributeName] = (attrCount[m.attributeName] || 0) + 1
      if (t === td && m.attributeName === 'class') {
        const v = t.getAttribute('class') || ''
        if (seq[seq.length - 1] !== v) seq.push(v)
      }
    }
  })
  obs.observe(document.querySelector('.stk-tbody-main'), {
    attributes: true,
    subtree: true,
    attributeOldValue: true,
  })

  const FRAMES = 40
  for (let i = 0; i < FRAMES; i += 1) {
    await new Promise((r) => requestAnimationFrame(r))
    const max = cont.scrollWidth - cont.clientWidth
    cont.scrollLeft = cont.scrollLeft >= max - 1 ? 0 : Math.min(max, cont.scrollLeft + 80)
  }
  await new Promise((r) => setTimeout(r, 100))
  obs.disconnect()

  // 统计有多少个不同的 td 被改了 class
  return {
    FRAMES,
    totalAttrWrites: total,
    perFrame: +(total / FRAMES).toFixed(1),
    attrNames: attrCount,
    sampleTdClassSeq: seq.slice(0, 10),
    fixedCellCount: document.querySelectorAll('.stk-tbody-main td.fixed-cell').length,
    tdCount: document.querySelectorAll('.stk-tbody-main td').length,
  }
})
console.log(JSON.stringify(churn, null, 2))

/* ============================================================
 * ② 交替 A/B：用 CDP 计数器（不受帧率方差影响）
 * ============================================================ */
const VARIANTS = {
  'V0 基线（不动 CSS）': '',
  'V1 去 td/th 背景渐变（格线）': `.stk-table td, .stk-table th { background-image: none !important; }`,
  'V2 去 sticky 固定列': `.stk-table td.fixed-cell, .stk-table th.fixed-cell { position: static !important; }`,
  'V3 去全部 :has() 规则（重写为不匹配）': `
    .g3-table td:has(> .g3-table__cell-editor-root.is-cell-editing),
    .g3-table td:has(> .g3-table__cell-editor-root.is-editor-error),
    .g3-table td:has(> .g3-table__cell-display.is-editor-error),
    .g3-table td:has(> .g3-table__cell-editor-root.is-editor-warning),
    .g3-table td:has(> .g3-table__cell-display.is-editor-warning),
    .g3-table td:has(> .g3-table__cell-display.g3-table__cell-readonly) { background-color: inherit !important; box-shadow: none !important; }`,
  'V4 去 box-shadow（含 100vmax 叠色）': `.stk-table td, .stk-table th, .stk-table tr { box-shadow: none !important; }`,
  'V5 去文字溢出省略': `.stk-table .table-cell-wrapper { text-overflow: clip !important; overflow: visible !important; }`,
  'V6 V1+V2+V4 组合': `
    .stk-table td, .stk-table th { background-image: none !important; box-shadow: none !important; }
    .stk-table td.fixed-cell, .stk-table th.fixed-cell { position: static !important; }`,
}

async function applyVariant(css) {
  await page.evaluate((c) => {
    document.querySelectorAll('style[data-probe]').forEach((s) => s.remove())
    if (!c) return
    const s = document.createElement('style')
    s.dataset.probe = '1'
    s.textContent = c
    document.head.appendChild(s)
  }, css)
  await page.waitForTimeout(600)
}

console.log('\n=========== ② 交替 A/B（横向滚动，CDP 计数器）===========')
console.log('每格显示：fps / 每帧 样式重算ms + 布局ms + 主线程任务ms')

const ROUNDS = 3
for (const [label, css] of Object.entries(VARIANTS)) {
  if (label.startsWith('V0')) continue
  const baseRuns = []
  const varRuns = []
  for (let r = 0; r < ROUNDS; r += 1) {
    await applyVariant('')
    baseRuns.push(await scrollMeasure(page, context, { axis: 'x', steps: 60, px: 80 }))
    await applyVariant(css)
    varRuns.push(await scrollMeasure(page, context, { axis: 'x', steps: 60, px: 80 }))
  }
  await applyVariant('')
  const f = (runs, k) => median(runs.map((r) => r[k]))
  const pf = (runs, k) => median(runs.map((r) => r.perFrame[k]))
  console.log(
    `\n${label}\n  基线 : ${String(f(baseRuns, 'fps')).padStart(5)}fps | style ${String(pf(baseRuns, 'styleMs')).padStart(5)}ms | layout ${String(pf(baseRuns, 'layoutMs')).padStart(5)}ms | task ${String(pf(baseRuns, 'taskMs')).padStart(6)}ms`,
  )
  console.log(
    `  变体 : ${String(f(varRuns, 'fps')).padStart(5)}fps | style ${String(pf(varRuns, 'styleMs')).padStart(5)}ms | layout ${String(pf(varRuns, 'layoutMs')).padStart(5)}ms | task ${String(pf(varRuns, 'taskMs')).padStart(6)}ms`,
  )
  const dfps = +(f(varRuns, 'fps') - f(baseRuns, 'fps')).toFixed(1)
  const dstyle = +(pf(varRuns, 'styleMs') - pf(baseRuns, 'styleMs')).toFixed(2)
  const dlayout = +(pf(varRuns, 'layoutMs') - pf(baseRuns, 'layoutMs')).toFixed(2)
  const dtask = +(pf(varRuns, 'taskMs') - pf(baseRuns, 'taskMs')).toFixed(2)
  console.log(
    `  差值 : fps ${dfps > 0 ? '+' : ''}${dfps} | style ${dstyle > 0 ? '+' : ''}${dstyle}ms | layout ${dlayout > 0 ? '+' : ''}${dlayout}ms | task ${dtask > 0 ? '+' : ''}${dtask}ms`,
  )
}

/* ============================================================
 * ③ 单次点击的 trace 归因（分场景，各 3 次取中位）
 * ============================================================ */
console.log('\n=========== ③ 单次点击 trace 归因 ===========')

async function traceOne(fn) {
  const client = await context.newCDPSession(page)
  const events = []
  client.on('Tracing.dataCollected', ({ value }) => events.push(...value))
  const done = new Promise((res) => client.once('Tracing.tracingComplete', res))
  await client.send('Tracing.start', {
    categories: 'devtools.timeline,blink.user_timing',
    options: 'sampling',
    transferMode: 'ReportEvents',
  })
  await fn()
  await client.send('Tracing.end')
  await done
  await client.detach()

  // 主线程总忙（只取叶子事件，避免嵌套重复计数）
  const isLeaf = (e, all) => !all.some((o) => o !== e && o.tid === e.tid && o.ph === 'X' && o.ts <= e.ts && o.ts + o.dur >= e.ts + e.dur)
  const main = events.filter((e) => e.ph === 'X' && e.dur)
  // 选主线程 tid
  const byTid = new Map()
  for (const e of main) byTid.set(e.tid, (byTid.get(e.tid) || 0) + e.dur)
  const tid = [...byTid.entries()].sort((a, b) => b[1] - a[1])[0]?.[0]
  const mine = main.filter((e) => e.tid === tid)
  const leaves = mine.filter((e) => isLeaf(e, mine))
  const busy = leaves.reduce((a, e) => a + e.dur, 0)
  const agg = new Map()
  for (const e of leaves) agg.set(e.name, (agg.get(e.name) || 0) + e.dur)
  const top = [...agg.entries()].sort((a, b) => b[1] - a[1]).slice(0, 8)
  return { busyMs: +(busy / 1000).toFixed(1), top: top.map(([k, v]) => [k, +(v / 1000).toFixed(1)]) }
}

async function clickAt(rowIdx, colIdx, settle = 300) {
  await page.waitForTimeout(settle)
  return page.evaluate(
    async ({ rowIdx, colIdx }) => {
      const tr = [...document.querySelectorAll('.stk-tbody-main tr')][rowIdx]
      if (!tr) return { error: 'no row' }
      const td = [...tr.querySelectorAll('td')][colIdx]
      if (!td) return { error: 'no td' }
      const r = td.getBoundingClientRect()
      if (r.top < 0 || r.bottom > window.innerHeight) return { error: 'offscreen' }
      const cx = r.left + r.width / 2
      const cy = r.top + r.height / 2
      const t0 = performance.now()
      for (const type of ['pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click']) {
        const Ctor = type.startsWith('pointer') ? PointerEvent : MouseEvent
        td.dispatchEvent(
          new Ctor(type, { bubbles: true, cancelable: true, clientX: cx, clientY: cy, button: 0 }),
        )
      }
      const dispatchMs = +(performance.now() - t0).toFixed(2)
      // 等两帧，让 Vue flush + 布局绘制完成
      await new Promise((r2) => requestAnimationFrame(r2))
      await new Promise((r2) => requestAnimationFrame(r2))
      return { dispatchMs, totalMs: +(performance.now() - t0).toFixed(1) }
    },
    { rowIdx, colIdx },
  )
}

async function scenario(label, fn, reps = 3) {
  const busy = []
  const detail = []
  for (let i = 0; i < reps; i += 1) {
    const t = await traceOne(fn)
    busy.push(t.busyMs)
    detail.push(t)
  }
  const allNames = new Map()
  for (const d of detail) for (const [k, v] of d.top) allNames.set(k, [...(allNames.get(k) || []), v])
  const top = [...allNames.entries()]
    .map(([k, vs]) => [k, median(vs)])
    .sort((a, b) => b[1] - a[1])
    .slice(0, 6)
  console.log(`\n${label}`)
  console.log(`  主线程忙(中位) ${median(busy)}ms   [全部: ${busy.join(', ')}]`)
  console.log(`  主要事件: ${top.map(([k, v]) => `${k}=${v}ms`).join('  ')}`)
  return { busy: median(busy), top }
}

// 重新加载，保证「首次点击」是真的首次
await page.reload({ waitUntil: 'domcontentloaded' })
await page.waitForSelector('.stk-table', { timeout: 90000 })
await page.waitForTimeout(3000)

await scenario('A. 首次点击某格（editingActive false→true，全表列重建）', () => clickAt(3, 6, 400))
await scenario('B. 换行点击（editingActive 保持 true）', () => clickAt(9, 6, 400))
await scenario('C. 反复点同一格', () => clickAt(9, 6, 250))
await scenario('D. 同行换列（换到 select 列）', () => clickAt(9, 2, 350))
await scenario('E. 点冻结列（fixed left）', () => clickAt(9, 2, 350).then(() => clickAt(9, 0, 350)))

/* ============================================================
 * ④ 汇总
 * ============================================================ */
console.log('\n=========== ④ 页面规模 ===========')
const size = await page.evaluate(() => ({
  tds: document.querySelectorAll('.stk-tbody-main td').length,
  trs: document.querySelectorAll('.stk-tbody-main tr').length,
  ths: document.querySelectorAll('thead th').length,
  stickyCells: document.querySelectorAll('.stk-tbody-main td.fixed-cell').length,
  cellsWithGradientBg: [...document.querySelectorAll('.stk-tbody-main td')].filter((td) =>
    /gradient/.test(getComputedStyle(td).backgroundImage),
  ).length,
  cellsWithShadow: [...document.querySelectorAll('.stk-tbody-main td')].filter(
    (td) => getComputedStyle(td).boxShadow !== 'none',
  ).length,
  hasRulesInSheets: [...document.styleSheets].reduce((n, s) => {
    try {
      return n + [...s.cssRules].filter((r) => r.selectorText && r.selectorText.includes(':has(')).length
    } catch {
      return n
    }
  }, 0),
  totalRules: [...document.styleSheets].reduce((n, s) => {
    try {
      return n + s.cssRules.length
    } catch {
      return n
    }
  }, 0),
}))
console.log(JSON.stringify(size, null, 2))

await browser.close()