import { chromium } from '@playwright/test'

/**
 * /table-test 探针 v10 —— 决定性归因（只读诊断，不改仓库代码）。
 *
 * 三个关键实验：
 *
 * ① 冻结克隆对照（最关键）
 *    把当前 `.stk-table` 的 outerHTML 克隆一份、塞进同样尺寸的容器，然后滚**克隆**。
 *    克隆不受 Vue 管理 —— 滚动它不触发任何 JS 重渲染。
 *      · 克隆也慢  → 瓶颈在浏览器侧（样式/布局/绘制/合成）
 *      · 克隆很快  → 瓶颈在 Vue/库的 JS 重渲染
 *
 * ② LoAF 完整字段（含 forcedStyleAndLayoutDuration / invoker / 暂停时长）
 *
 * ③ 数据量对照再确认：100 行（虚拟滚动关闭，无逐帧 DOM 改动）vs 1000 行（虚拟开启）
 *
 * ④ errorCount：一次真实「编辑提交」会额外付多少主线程时间
 */

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].sort((x, y) => x - y)
  return s.length ? s[Math.floor(s.length / 2)] : null
}
const r1 = (n) => (n == null ? null : +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)

/** 通用滚动驱动：对指定选择器（'live' | 'clone'）滚动并测帧率 */
async function drive(which, { axis = 'y', steps = 60, px = 60 } = {}) {
  return page.evaluate(
    async ({ which, axis, steps, px }) => {
      const sel = which === 'live' ? '#__probe_live .stk-table' : '#__probe_clone .stk-table'
      const cont = document.querySelector(sel)
      if (!cont) return { error: 'missing ' + sel }
      cont.scrollTop = 0
      cont.scrollLeft = 0
      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)
      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
      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),
        scrollH: cont.scrollHeight,
        clientH: cont.clientHeight,
        scrollW: cont.scrollWidth,
        clientW: cont.clientWidth,
      }
    },
    { which, axis, steps, px },
  )
}

/* ============================================================
 * ① 冻结克隆对照
 * ============================================================ */
console.log('################ ① 冻结克隆对照 ################')

const setup = await page.evaluate(() => {
  const live = document.querySelector('.stk-table')
  if (!live) return { error: 'no live table' }
  const r = live.getBoundingClientRect()

  // 给 live 包一个稳定 id 便于选择
  live.id = '__probe_live_inner'
  if (!live.parentElement.id) live.parentElement.id = '__probe_live'

  // 克隆整棵子树（含 530 个 td / 全部 class），放进同样尺寸的容器
  const clone = live.cloneNode(true)
  clone.id = '__probe_clone_inner'
  clone.removeAttribute('data-v-app')

  const holder = document.createElement('div')
  holder.id = '__probe_clone'
  holder.style.cssText = `position:fixed;left:0;top:0;width:${r.width}px;height:${r.height}px;z-index:99999;background:#fff;`
  holder.appendChild(clone)
  document.body.appendChild(holder)

  return {
    width: r.width,
    height: r.height,
    liveSel: '#__probe_live .stk-table',
    cloneSel: '#__probe_clone .stk-table',
    liveTds: live.querySelectorAll('tbody td').length,
    cloneTds: clone.querySelectorAll('tbody td').length,
  }
})
console.log('克隆搭建:', JSON.stringify(setup))

// 隐藏克隆时先测 live（避免克隆覆盖带来的合成差异）
await page.evaluate(() => {
  const h = document.querySelector('#__probe_clone')
  if (h) h.style.visibility = 'hidden'
})
await page.waitForTimeout(300)

const liveY = []
for (let i = 0; i < 3; i += 1) liveY.push(await drive('live', { axis: 'y', steps: 55, px: 60 }))
await page.evaluate(() => {
  const h = document.querySelector('#__probe_clone')
  if (h) h.remove()
})
console.log('live（Vue 管理，虚拟滚动逐帧改 DOM）纵向 ×3:', JSON.stringify(liveY.map((r) => r.fps)))

/* --- 重建克隆：A) 原样克隆（含 sticky / 渐变 / class） --- */
async function cloneTest(label, mutateCss) {
  await page.evaluate((css) => {
    document.querySelector('#__probe_clone')?.remove()
    const live = document.querySelector('#__probe_live .stk-table') || document.querySelector('.stk-table')
    const r = live.getBoundingClientRect()
    const clone = live.cloneNode(true)
    clone.removeAttribute('id')
    const holder = document.createElement('div')
    holder.id = '__probe_clone'
    holder.style.cssText = `position:fixed;left:0;top:0;width:${r.width}px;height:${r.height}px;z-index:99999;background:#fff;`
    // 绝对定位的 mask：把 live 盖住（量的是可见区域的真实光栅化成本）
    holder.appendChild(clone)
    document.body.appendChild(holder)
    if (css) {
      const s = document.createElement('style')
      s.dataset.clone = '1'
      s.textContent = css
      document.head.appendChild(s)
    }
  }, mutateCss || '')
  await page.waitForTimeout(500)
  const runs = []
  for (let i = 0; i < 3; i += 1) runs.push(await drive('clone', { axis: 'y', steps: 55, px: 60 }))
  const runsX = []
  for (let i = 0; i < 2; i += 1) runsX.push(await drive('clone', { axis: 'x', steps: 45, px: 80 }))
  console.log(
    `${label}\n   纵 ${runs.map((r) => r.fps).join('/')} fps (中位 ${r1(median(runs.map((r) => r.fps)))}) | 横 ${runsX.map((r) => r.fps).join('/')} fps (中位 ${r1(median(runsX.map((r) => r.fps)))})`,
  )
  await page.evaluate(() => {
    document.querySelectorAll('style[data-clone]').forEach((s) => s.remove())
    document.querySelector('#__probe_clone')?.remove()
  })
  await page.waitForTimeout(200)
  return { y: r1(median(runs.map((r) => r.fps))), x: r1(median(runsX.map((r) => r.fps))) }
}

console.log('\n--- 克隆（无 Vue 参与，纯浏览器滚动同一份 DOM）---')
const cloneResult = await cloneTest('A) 原样克隆')
await cloneTest(
  'B) 克隆 + 去掉固定列 sticky',
  `#__probe_clone td.fixed-cell, #__probe_clone th.fixed-cell { position: static !important; }`,
)
await cloneTest(
  'C) 克隆 + 去掉单元格背景渐变（格线）',
  `#__probe_clone td, #__probe_clone th { background-image: none !important; }`,
)
await cloneTest(
  'D) 克隆 + 去掉 sticky 与全部 box-shadow',
  `#__probe_clone td.fixed-cell, #__probe_clone th.fixed-cell { position: static !important; }
   #__probe_clone td, #__probe_clone th, #__probe_clone tr { box-shadow: none !important; }`,
)

/* ============================================================
 * ② LoAF 完整字段
 * ============================================================ */
console.log('\n################ ② LoAF 完整字段（纵向滚动）################')
const loaf = await page.evaluate(async () => {
  const cont = document.querySelector('#__probe_live .stk-table') || document.querySelector('.stk-table')
  cont.scrollTop = 0
  await new Promise((r) => requestAnimationFrame(r))
  const entries = []
  const obs = new PerformanceObserver((l) => {
    for (const e of l.getEntries()) entries.push(e)
  })
  obs.observe({ type: 'long-animation-frame', buffered: false })
  for (let i = 0; i < 45; i += 1) {
    await new Promise((r) => requestAnimationFrame(r))
    const max = cont.scrollHeight - cont.clientHeight
    cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + 60)
  }
  await new Promise((r) => setTimeout(r, 250))
  obs.disconnect()

  const scripts = []
  const frames = []
  for (const e of entries) {
    frames.push({
      duration: +e.duration.toFixed(1),
      blocking: +(e.blockingDuration || 0).toFixed(1),
      renderStart: +(e.renderStart || 0).toFixed(1),
      styleLayoutStart: +(e.styleAndLayoutStart || 0).toFixed(1),
      scripts: (e.scripts || []).map((s) => ({
        name: s.name,
        entryType: s.entryType,
        invoker: s.invoker,
        invokerType: s.invokerType,
        duration: +s.duration.toFixed(1),
        forcedStyleAndLayout:
          s.forcedStyleAndLayoutDuration != null ? +s.forcedStyleAndLayoutDuration.toFixed(1) : undefined,
        pause: s.pauseDuration != null ? +s.pauseDuration.toFixed(1) : undefined,
        url: (s.sourceURL || '').split('/').slice(-1)[0].split('?')[0],
        fn: s.sourceFunctionName,
        pos: s.sourceCharPosition,
      })),
    })
    for (const s of e.scripts || []) scripts.push(s)
  }
  // 按脚本来源汇总
  const byKey = new Map()
  for (const s of scripts) {
    const key = `${s.name || s.invoker} | ${(s.sourceURL || '').split('/').slice(-1)[0].split('?')[0]} | fn=${s.sourceFunctionName || '-'} | pos=${s.sourceCharPosition} | invokerType=${s.invokerType}`
    const cur = byKey.get(key) || { total: 0, n: 0, forced: 0, pause: 0 }
    cur.total += s.duration
    cur.n += 1
    cur.forced += s.forcedStyleAndLayoutDuration || 0
    cur.pause += s.pauseDuration || 0
    byKey.set(key, cur)
  }
  return {
    loafCount: frames.length,
    totalLoafMs: +frames.reduce((a, f) => a + f.duration, 0).toFixed(0),
    totalBlockingMs: +frames.reduce((a, f) => a + f.blocking, 0).toFixed(0),
    sampleFrames: frames.slice(0, 3),
    scriptSources: [...byKey.entries()]
      .map(([k, v]) => ({
        key: k,
        totalMs: +v.total.toFixed(1),
        calls: v.n,
        forcedStyleLayoutMs: +v.forced.toFixed(1),
        pauseMs: +v.pause.toFixed(1),
      }))
      .sort((a, b) => b.totalMs - a.totalMs)
      .slice(0, 8),
  }
})
console.log(JSON.stringify(loaf, null, 2))

/* ============================================================
 * ③ 数据量对照（确认「逐帧 DOM 改动」是否为主因）
 * ============================================================ */
console.log('\n################ ③ 数据量对照：虚拟滚动开/关 ################')
for (const n of [10, 100, 1000]) {
  await page.selectOption('.booking__select', String(n))
  await page.waitForTimeout(2200)
  const info = await page.evaluate(() => {
    const t = document.querySelector('.stk-table')
    return {
      cls: t.className.includes('vt-on') ? 'vt-on(虚拟开启)' : 'vt-off(全量渲染)',
      trs: document.querySelectorAll('.stk-tbody-main tr').length,
      tds: document.querySelectorAll('.stk-tbody-main td').length,
      scrollH: t.scrollHeight,
      clientH: t.clientHeight,
    }
  })
  // 逐帧 DOM 改动计数
  const churn = await page.evaluate(async () => {
    const tbody = document.querySelector('.stk-tbody-main')
    const cont = document.querySelector('.stk-table')
    let child = 0
    let attrs = 0
    const obs = new MutationObserver((recs) => {
      for (const m of recs) {
        if (m.type === 'childList') child += m.addedNodes.length + m.removedNodes.length
        else if (m.type === 'attributes') attrs += 1
      }
    })
    obs.observe(tbody, { childList: true, subtree: true, attributes: true })
    const F = 40
    for (let i = 0; i < F; i += 1) {
      await new Promise((r) => requestAnimationFrame(r))
      const max = cont.scrollHeight - cont.clientHeight
      cont.scrollTop = cont.scrollTop >= max - 1 ? 0 : Math.min(max, cont.scrollTop + 60)
    }
    await new Promise((r) => setTimeout(r, 60))
    obs.disconnect()
    return { childPerFrame: +(child / F).toFixed(1), attrPerFrame: +(attrs / F).toFixed(1) }
  })
  const y = await drive('live', { axis: 'y', steps: 50, px: 60 })
  const x = await drive('live', { axis: 'x', steps: 40, px: 80 })
  console.log(
    `${String(n).padStart(5)} 行 ${info.cls.padEnd(16)} tr=${String(info.trs).padStart(3)} td=${String(info.tds).padStart(4)} | 逐帧 节点${String(churn.childPerFrame).padStart(5)} 属性${String(churn.attrPerFrame).padStart(5)} | 纵 ${String(y.fps).padStart(5)}fps | 横 ${String(x.fps).padStart(5)}fps`,
  )
}

/* ============================================================
 * ④ errorCount：一次「编辑提交」的额外成本
 * ============================================================ */
console.log('\n################ ④ 编辑提交 → errorCount 全表校验成本 ################')
await page.selectOption('.booking__select', '1000')
await page.waitForTimeout(2200)
const commitCost = await page.evaluate(() => {
  let i = document.querySelector('.booking')?.__vueParentComponent
  while (i && !i.setupState?.rows) i = i.parent
  if (!i) return { error: 'no page instance' }
  const ss = i.setupState
  const rows = ss.rows?.value ?? ss.rows
  void ss.errorCount?.value // 预热

  // 模拟「编辑提交」：写一个响应式行字段（editors 的 commitInputDraft 就是这么做的）
  const out = []
  for (let k = 0; k < 5; k += 1) {
    const r = rows[k]
    const t0 = performance.now()
    r.remark = `${r.remark ?? ''}x`
    // 等 Vue 把 errorCount 重算 + 页面重渲染跑完
    const t1 = performance.now()
    out.push({ writeMs: +(t1 - t0).toFixed(2) })
    r.remark = String(r.remark).slice(0, -1)
  }
  return { rows: rows.length, out }
})
console.log('提交写入本身:', JSON.stringify(commitCost))

// 直接量 errorCount 重算
const recompute = await page.evaluate(() => {
  let i = document.querySelector('.booking')?.__vueParentComponent
  while (i && !i.setupState?.rows) i = i.parent
  const ss = i.setupState
  const rows = ss.rows?.value ?? ss.rows
  const out = []
  for (let k = 0; k < 3; k += 1) {
    void ss.errorCount?.value
    if (rows?.length) rows[0].freight = Number(rows[0].freight) + 0.001
    const t0 = performance.now()
    void ss.errorCount?.value
    out.push(+(performance.now() - t0).toFixed(1))
    if (rows?.length) rows[0].freight = Number(rows[0].freight) - 0.001
  }
  return { rows: rows.length, cols: (ss.columns?.value ?? ss.columns)?.length, ms: out }
})
console.log('errorCount 重算（1000 行 × 22 列）:', JSON.stringify(recompute))

// 真实点击 → 输入 → 失焦提交 的端到端
const e2e = await page.evaluate(async () => {
  const cont = document.querySelector('.stk-table')
  cont.scrollTop = 0
  await new Promise((r) => requestAnimationFrame(r))
  const tr = [...document.querySelectorAll('.stk-tbody-main tr')][2]
  // 找「备注」列（最右固定列）
  const tds = [...tr.querySelectorAll('td')]
  const td = tds[tds.length - 1]
  const r = td.getBoundingClientRect()
  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 }))
  }
  let toEditor = -1
  const deadline = performance.now() + 3000
  while (performance.now() < deadline) {
    if (td.querySelector('.g3-table__cell-editor-root')) {
      toEditor = performance.now() - t0
      break
    }
    await new Promise((r2) => requestAnimationFrame(r2))
  }
  const input = td.querySelector('input')
  if (!input) return { toEditor: +toEditor.toFixed(1), error: 'no input' }
  input.focus()
  input.value = `${input.value}z`
  input.dispatchEvent(new Event('input', { bubbles: true }))
  const t1 = performance.now()
  input.blur() // 触发 commit + errorCount 重算
  await new Promise((r2) => requestAnimationFrame(r2))
  await new Promise((r2) => setTimeout(r2, 0))
  return {
    toEditorMs: +toEditor.toFixed(1),
    commitMs: +(performance.now() - t1).toFixed(1),
  }
})
console.log('端到端（点击→编辑器 / 失焦提交）:', JSON.stringify(e2e))

await browser.close()