import { chromium } from '@playwright/test'

/**
 * /table-test 性能探针 v4 —— 归因实验（只读诊断，不改业务代码）。
 *
 * v3 已确认：静止 61 FPS，纵向滚动 ~13 FPS。本版要回答「74ms/帧花在哪」，
 * 用**受控对照**而不是继续猜：
 *
 *   A 现状                     基线
 *   B 去掉 validate/precision   → 常驻 customCell 的列少 4 个
 *   C 去掉全部 editor           → 一个 customCell 都不挂（性能上限参考）
 *   D 数据量 10 / 100 / 1000    → 判断开销是 O(可见格) 还是 O(总行数)
 *
 * 说明：B/C 是在**探针浏览器里**原地改内存中的列定义，用于归因；不改仓库代码。
 */

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

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

/** 滚动测量：真正驱动 .stk-table 的 scrollTop */
async function scrollFps(page, { axis = 'y', steps = 140, px = 60 } = {}) {
  return page.evaluate(
    async ({ axis, steps, px }) => {
      const cont = document.querySelector('.stk-table')
      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 {
        fps: +(1000 / avg).toFixed(1),
        avgMs: +avg.toFixed(2),
        p95Ms: +q(sorted, 0.95).toFixed(2),
        maxMs: +sorted[sorted.length - 1].toFixed(2),
        syncMs: +(sync.reduce((a, b) => a + b, 0) / sync.length).toFixed(2),
      }
    },
    { axis, steps, px },
  )
}

/** 取 G3Table 实例（.g3-table 的宿主组件） */
const GET_INST = `(() => {
  const el = document.querySelector('.g3-table')
  let inst = el && (el.__vueParentComponent || el.__vue_vnode?.component)
  if (!inst) return null
  // 有时拿到的是父布局，向上找带 columns 的那个
  let cur = inst, hop = 0
  while (cur && hop < 8) {
    const ss = cur.setupState
    if (ss && (ss.columns || ss.rows)) return cur
    cur = cur.parent; hop++
  }
  return inst
})()`

async function domInfo(page) {
  return page.evaluate(() => ({
    bodyRows: document.querySelectorAll('.stk-tbody-main tr').length,
    tds: document.querySelectorAll('.stk-tbody-main td').length,
    cellWrappers: document.querySelectorAll('.stk-tbody-main td > .table-cell-wrapper').length,
    displaySpans: document.querySelectorAll('.g3-table__cell-display').length,
    editorRoots: document.querySelectorAll('.g3-table__cell-editor-root').length,
  }))
}

/* ============================================================
 * 实验 A：现状基线
 * ============================================================ */
console.log('\n########## A. 现状基线（1000 行）##########')
{
  const { browser, page } = await makePage()
  console.log('DOM:', JSON.stringify(await domInfo(page)))
  console.log('纵向滚动:', JSON.stringify(await scrollFps(page, { axis: 'y' })))
  console.log('横向滚动:', JSON.stringify(await scrollFps(page, { axis: 'x', steps: 100, px: 80 })))
  await browser.close()
}

/* ============================================================
 * 实验 B/C：削减 customCell（同页内原地改列定义）
 * ============================================================ */
console.log('\n########## B/C. 削减常驻 customCell 的影响 ##########')
{
  const { browser, page } = await makePage()
  console.log('基线:', JSON.stringify(await scrollFps(page, { axis: 'y' })))

  // B：去掉所有 validate / validateWarning / precision → 少 4 列常驻 customCell
  const bRes = await page.evaluate((getInstSrc) => {
    const inst = eval(getInstSrc)
    if (!inst) return { error: 'no instance' }
    const cols = inst.setupState.columns
    const arr = cols?.value ?? cols
    let n = 0
    for (const c of arr) {
      if (!c.editor) continue
      if (c.editor.validate) { c.editor.validate = undefined; n++ }
      if (c.editor.validateWarning) { c.editor.validateWarning = undefined; n++ }
      if (c.editor.precision !== undefined) { c.editor.precision = undefined; n++ }
    }
    return { stripped: n, total: arr.length }
  }, GET_INST)
  console.log('B 去掉校验/精度:', JSON.stringify(bRes))
  await page.waitForTimeout(1500)
  console.log('B DOM:', JSON.stringify(await domInfo(page)))
  console.log('B 纵向滚动:', JSON.stringify(await scrollFps(page, { axis: 'y' })))

  // C：去掉全部 editor → 零 customCell（性能上限）
  const cRes = await page.evaluate((getInstSrc) => {
    const inst = eval(getInstSrc)
    if (!inst) return { error: 'no instance' }
    const cols = inst.setupState.columns
    const arr = cols?.value ?? cols
    let n = 0
    for (const c of arr) {
      if (c.editor) { delete c.editor; n++ }
    }
    return { removed: n, total: arr.length }
  }, GET_INST)
  console.log('C 移除全部 editor:', JSON.stringify(cRes))
  await page.waitForTimeout(2000)
  console.log('C DOM:', JSON.stringify(await domInfo(page)))
  console.log('C 纵向滚动:', JSON.stringify(await scrollFps(page, { axis: 'y' })))
  console.log('C 横向滚动:', JSON.stringify(await scrollFps(page, { axis: 'x', steps: 100, px: 80 })))

  await browser.close()
}

/* ============================================================
 * 实验 D：数据量（用页面自带的下拉）
 * ============================================================ */
console.log('\n########## D. 数据量 → 帧率（判断 O(n) 还是 O(可见)）##########')
{
  const { browser, page } = await makePage()
  for (const n of [10, 100, 1000, 5000]) {
    await page.selectOption('.booking__select', String(n))
    await page.waitForTimeout(2500)
    const info = await domInfo(page)
    const y = await scrollFps(page, { axis: 'y', steps: 120, px: 60 })
    const x = await scrollFps(page, { axis: 'x', steps: 80, px: 80 })
    console.log(
      `${String(n).padStart(5)} 行 | 行DOM=${String(info.bodyRows).padStart(3)} td=${String(info.tds).padStart(4)} span=${String(info.displaySpans).padStart(4)} | 纵 ${String(y.fps).padStart(5)}fps (${y.avgMs}ms) | 横 ${String(x.fps).padStart(5)}fps (${x.avgMs}ms)`,
    )
  }
  await browser.close()
}

/* ============================================================
 * 实验 E：固定列 sticky 补丁 A/B（组件支持的 URL 开关）
 * ============================================================ */
console.log('\n########## E. 固定列 sticky 补丁 A/B ##########')
{
  for (const q of ['', '?g3-fixed-patch=off']) {
    const { browser, page } = await makePage(q)
    const y = await scrollFps(page, { axis: 'y', steps: 120, px: 60 })
    const x = await scrollFps(page, { axis: 'x', steps: 80, px: 80 })
    console.log(`patch${q ? ' OFF' : ' ON '} | 纵 ${y.fps}fps (${y.avgMs}ms) | 横 ${x.fps}fps (${x.avgMs}ms)`)
    await browser.close()
  }
}

/* ============================================================
 * 实验 F：滚动期间的长任务 & 每帧样式重算
 * ============================================================ */
console.log('\n########## F. 滚动期间长任务 ##########')
{
  const { browser, page } = await makePage()
  const res = await page.evaluate(async () => {
    const tasks = []
    const obs = new PerformanceObserver((list) => {
      for (const e of list.getEntries()) tasks.push(+e.duration.toFixed(1))
    })
    try {
      obs.observe({ entryTypes: ['longtask'] })
    } catch {
      return { unsupported: true }
    }
    const cont = document.querySelector('.stk-table')
    for (let i = 0; i < 90; i += 1) {
      await new Promise((r) => requestAnimationFrame(r))
      cont.scrollTop = (cont.scrollTop + 60) % (cont.scrollHeight - cont.clientHeight)
    }
    await new Promise((r) => setTimeout(r, 300))
    obs.disconnect()
    return {
      count: tasks.length,
      avg: +(tasks.reduce((a, b) => a + b, 0) / (tasks.length || 1)).toFixed(1),
      max: tasks.length ? Math.max(...tasks) : 0,
      sample: tasks.slice(0, 12),
    }
  })
  console.log('长任务(>50ms):', JSON.stringify(res))
  await browser.close()
}