import { chromium } from '@playwright/test'

/**
 * /table-test 性能探针 v3（只读诊断，不改业务代码）。
 *
 * v2 的教训：滚动了 `.stk-table` 的**父节点**（.g3-table），那个元素并不滚动
 * （scrollHeight == clientHeight），于是「假滚动」+ 99.6% idle。
 * 真正的滚动容器是 `.stk-table` 自身（style.less 里它带 overflow: auto）。
 * 本版先在页面里**探测出真正可滚动的元素**再测量，不靠猜。
 */

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

const browser = await chromium.launch()
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, 300)))

await page.goto(`${BASE}/table-test`, { waitUntil: 'domcontentloaded' })
await page.waitForSelector('.stk-table', { timeout: 90000 })
await page.waitForTimeout(3000)

/* ---------- 0. 找出真正滚动的元素 ---------- */
const containers = await page.evaluate(() => {
  const out = []
  const walk = (el, depth = 0) => {
    if (depth > 14) return
    const cs = getComputedStyle(el)
    const oy = cs.overflowY
    const ox = cs.overflowX
    const scrollableY = /auto|scroll/.test(oy) && el.scrollHeight > el.clientHeight + 4
    const scrollableX = /auto|scroll/.test(ox) && el.scrollWidth > el.clientWidth + 4
    if (scrollableY || scrollableX) {
      out.push({
        tag: el.tagName,
        cls: (el.className || '').toString().slice(0, 70),
        oy,
        ox,
        scrollableY,
        scrollableX,
        scrollH: el.scrollHeight,
        clientH: el.clientHeight,
        scrollW: el.scrollWidth,
        clientW: el.clientWidth,
      })
    }
    for (const c of el.children) walk(c, depth + 1)
  }
  walk(document.body)
  return out
})
console.log('=== 可滚动元素 ===')
console.log(JSON.stringify(containers, null, 2))

const info = await page.evaluate(() => ({
  bodyRows: document.querySelectorAll('.stk-tbody-main tr').length,
  tds: document.querySelectorAll('.stk-tbody-main td').length,
  editorRoots: document.querySelectorAll('.g3-table__cell-editor-root').length,
  displaySpans: document.querySelectorAll('.g3-table__cell-display').length,
  selects: document.querySelectorAll('.g3-select').length,
  inputs: document.querySelectorAll('.g3-input').length,
  innerCls: document.querySelector('.stk-table')?.className,
}))
console.log('=== DOM ===', JSON.stringify(info))

/* ---------- 1. 帧率测量：真正驱动滚动 ---------- */
async function measureScroll({ axis = 'y', steps = 150, px = 60, label = '' } = {}) {
  const res = await page.evaluate(
    async ({ axis, steps, px }) => {
      // 找到真正能滚的容器
      let cont = document.querySelector('.stk-table')
      const canScroll = (el, a) =>
        a === 'y' ? el.scrollHeight > el.clientHeight + 4 : el.scrollWidth > el.clientWidth + 4
      if (!canScroll(cont, axis)) {
        const all = [...document.querySelectorAll('*')]
        cont = all.find((el) => canScroll(el, axis))
      }
      if (!cont) return { error: 'no scrollable container' }

      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)

      const sync = []
      for (let i = 0; i < steps; i += 1) {
        await new Promise((r) => requestAnimationFrame(r))
        const t0 = performance.now()
        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)
        }
        sync.push(performance.now() - t0)
      }
      stop = true

      const sorted = [...frames].sort((a, b) => a - b)
      const avg = frames.reduce((a, b) => a + b, 0) / frames.length
      const q = (arr, p) => arr[Math.min(arr.length - 1, Math.floor(arr.length * p))]
      return {
        cont: cont.className?.toString().slice(0, 40),
        frames: frames.length,
        fps: +(1000 / avg).toFixed(1),
        avgMs: +avg.toFixed(2),
        p50: +q(sorted, 0.5).toFixed(2),
        p95: +q(sorted, 0.95).toFixed(2),
        p99: +q(sorted, 0.99).toFixed(2),
        max: +sorted[sorted.length - 1].toFixed(2),
        over16: frames.filter((f) => f > 16.7).length,
        over33: frames.filter((f) => f > 33).length,
        over50: frames.filter((f) => f > 50).length,
        syncAvg: +(sync.reduce((a, b) => a + b, 0) / sync.length).toFixed(2),
        syncP95: +q([...sync].sort((a, b) => a - b), 0.95).toFixed(2),
      }
    },
    { axis, steps, px },
  )
  console.log(`滚动[${label}] ${JSON.stringify(res)}`)
  return res
}

/* ---------- 2. 点击延迟 ---------- */
async function measureClick({ label = '' } = {}) {
  const res = await page.evaluate(async () => {
    const cont = document.querySelector('.stk-table')
    cont.scrollTop = 0
    await new Promise((r) => requestAnimationFrame(r))
    const trs = [...document.querySelectorAll('.stk-tbody-main tr')].slice(1, 13)
    const out = []
    for (const tr of trs) {
      const tds = [...tr.querySelectorAll('td')]
      const td = tds[6]
      if (!td) continue
      const r = td.getBoundingClientRect()
      if (r.top < 40 || r.bottom > window.innerHeight) continue
      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 }),
        )
      }
      // 等到编辑器真的出现在 DOM 里（轮询 + rAF，测「用户可感知的就绪时刻」）
      let toEditor = -1
      const deadline = performance.now() + 2000
      while (performance.now() < deadline) {
        if (td.querySelector('.g3-table__cell-editor-root')) {
          toEditor = performance.now() - t0
          break
        }
        await new Promise((r) => requestAnimationFrame(r))
      }
      await new Promise((r) => setTimeout(r, 120))
      out.push(+toEditor.toFixed(2))
    }
    return out
  })
  const vals = res.filter((v) => v >= 0).sort((a, b) => a - b)
  const summary = {
    n: vals.length,
    min: vals.length ? +vals[0].toFixed(1) : null,
    median: vals.length ? +vals[Math.floor(vals.length / 2)].toFixed(1) : null,
    p95: vals.length ? +vals[Math.floor(vals.length * 0.95)].toFixed(1) : null,
    max: vals.length ? +vals[vals.length - 1].toFixed(1) : null,
    all: vals.map((v) => +v.toFixed(1)),
  }
  console.log(`点击→编辑器就绪[${label}] ${JSON.stringify(summary)}`)
  return summary
}

/* ---------- 3. CPU profile ---------- */
async function profile(label, action) {
  const client = await context.newCDPSession(page)
  await client.send('Profiler.enable')
  await client.send('Profiler.setSamplingInterval', { interval: 150 })
  await client.send('Profiler.start')
  await action()
  const { profile: p } = await client.send('Profiler.stop')
  await client.detach()

  const byId = new Map(p.nodes.map((n) => [n.id, n]))
  const self = new Map()
  const total = p.samples.length || 1
  for (const id of p.samples) {
    const n = byId.get(id)
    if (!n) continue
    const cf = n.callFrame
    const file = (cf.url || '').split('/').slice(-1)[0].split('?')[0]
    const key = `${cf.functionName || '(anon)'} @ ${file}:${cf.lineNumber + 1}`
    self.set(key, (self.get(key) || 0) + 1)
  }
  console.log(`\n===== CPU 热点：${label}（总采样 ${total}）=====`)
  for (const [k, c] of [...self.entries()].sort((a, b) => b[1] - a[1]).slice(0, 28)) {
    console.log(`${((c / total) * 100).toFixed(1).padStart(5)}%  ${k}`)
  }
  return self
}

/* ---------- 执行 ---------- */
console.log('\n---------- 静止基线（无滚动）----------')
await measureScroll({ axis: 'y', steps: 60, px: 0, label: '基线-不动' })

console.log('\n---------- 纵向滚动 ---------')
await measureScroll({ axis: 'y', steps: 150, px: 60, label: 'Y' })
console.log('\n---------- 横向滚动 ---------')
await measureScroll({ axis: 'x', steps: 100, px: 80, label: 'X' })

await profile('纵向滚动', () => measureScroll({ axis: 'y', steps: 200, px: 60, label: 'Y-prof' }))

console.log('\n---------- 点击 ---------')
await measureClick({ label: '就绪态' })
await profile('点击进入编辑', () => measureClick({ label: 'prof' }))

console.log('\n---------- 编辑态下的纵向滚动 ---------')
await page.evaluate(() => {
  const td = [...document.querySelectorAll('.stk-tbody-main tr')][2]?.querySelectorAll('td')[6]
  if (!td) return
  const r = td.getBoundingClientRect()
  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: r.left + r.width / 2,
        clientY: r.top + r.height / 2,
        button: 0,
      }),
    )
  }
})
await page.waitForTimeout(500)
const ed = await page.evaluate(() => ({
  editorRoots: document.querySelectorAll('.g3-table__cell-editor-root').length,
  selects: document.querySelectorAll('.g3-select').length,
  inputs: document.querySelectorAll('.g3-input').length,
  datePickers: document.querySelectorAll('.g3-date-picker').length,
}))
console.log('编辑态 DOM:', JSON.stringify(ed))
await measureScroll({ axis: 'y', steps: 150, px: 60, label: 'Y-编辑态' })

await browser.close()