import { chromium } from '@playwright/test'

/**
 * 验证方向：外框底边改用 inset box-shadow（绘制层级高于背景/格线），
 * 并去掉"按 bodyFill 摘线"的开关 —— 让外框永远赢。
 *
 * 期望：无论容器多高，底边永远只有一条线。
 */
const BASE = process.env.PROBE_URL || 'http://localhost:5200'
const browser = await chromium.launch()
const page = await browser.newPage({ viewport: { width: 1400, height: 1200 } })
await page.goto(BASE, { waitUntil: 'networkidle' })

const clipSample = async (x, y, w, h) => {
  const shot = await page.screenshot({ clip: { x, y, width: w, height: h } })
  return page.evaluate(async (dataUrl) => {
    const img = new Image()
    await new Promise((res) => {
      img.onload = res
      img.src = dataUrl
    })
    const cv = document.createElement('canvas')
    cv.width = img.width
    cv.height = img.height
    const ctx = cv.getContext('2d')
    ctx.drawImage(img, 0, 0)
    const d = ctx.getImageData(0, 0, img.width, img.height).data
    const out = []
    for (let i = 0; i < d.length; i += 4) out.push([d[i], d[i + 1], d[i + 2]])
    return out
  }, `data:image/png;base64,${shot.toString('base64')}`)
}

const applyPatched = () =>
  page.evaluate(() => {
    const style = document.createElement('style')
    style.id = 'probe-patch'
    style.textContent = `
      /* 外框改 inset box-shadow：层级高于背景与格线，重合也不会变粗 */
      .g3-table.is-bordered {
        border-color: transparent !important;
        box-shadow: inset 0 0 0 1px var(--g3-border-color, #d9d9d9) !important;
      }
      /* 同时保留圆角裁剪 */
      .g3-table.is-bordered { border-radius: var(--g3-radius-lg, 8px) !important; }
    `
    document.head.appendChild(style)
  })

const removePatched = () =>
  page.evaluate(() => {
    document.getElementById('probe-patch')?.remove()
  })

const scan = async (label, h) => {
  await page.evaluate((hh) => {
    const wrap = document.querySelector('[data-testid="table-wrap"]')
    wrap.style.height = `${hh}px`
  }, h)
  await page.waitForTimeout(450)
  const wrapLoc = page.locator('[data-testid="table-wrap"]')
  await wrapLoc.scrollIntoViewIfNeeded()
  await page.waitForTimeout(180)

  const geo = await page.evaluate(() => {
    const wrap = document.querySelector('[data-testid="table-wrap"]')
    const root = wrap.querySelector('.g3-table')
    const r = root.getBoundingClientRect()
    return { left: Math.round(r.left), bottom: Math.round(r.bottom) }
  })

  const y0 = Math.max(0, geo.bottom - 4)
  if (1200 - y0 < 8) return
  const px = await clipSample(geo.left + 300, y0, 1, 8)
  const dark = px.map(([r, g, b]) => (r < 246 || g < 246 || b < 246 ? 1 : 0))
  const count = dark.reduce((a, b) => a + b, 0)
  console.log(
    `${label} h=${String(h).padStart(3)}  ${dark.join('')}  → ${count === 1 ? '一条线 ✅' : count === 0 ? '缺线 ❌' : count + ' 条 ❌'}`,
  )
}

const heights = [400, 140, 130, 129, 128, 127, 126, 124, 120, 100, 80, 60]

console.log('===== 修复前 =====')
for (const h of heights) await scan('before', h)

console.log('\n===== 打补丁：外框改 inset box-shadow =====')
await applyPatched()
for (const h of heights) await scan('patch ', h)

await removePatched()
await browser.close()