import { chromium } from '@playwright/test'

/**
 * 路 B 验证：最后一行**永远不画**自己的底边线，底边由外框独占。
 *  —— 不加任何开关，不看容器高度，行本身永不画底边。
 *
 * 期望：任何容器高度下，底边都恰好一条线。
 * 另需确认：行与行之间的分隔线（第 1、2 行之间）不受影响。
 */
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')}`)
}

// 路 B 补丁：最后一行永不画底边（无条件），且保留 is-body-fill 的既有规则不冲突
const applyB = () =>
  page.evaluate(() => {
    const s = document.createElement('style')
    s.id = 'probe-b'
    s.textContent = `
      /* 路 B：数据区最后一行永不画自己的底边线 —— 底边永远由外框独占 */
      .g3-table.is-bordered .g3-table__inner.stk-table.bordered-v
        .stk-tbody-main tr:last-child > td {
        --bg-border-bottom: linear-gradient(transparent, transparent) !important;
      }
    `
    document.head.appendChild(s)
  })

const scanColumn = 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)
  await page.locator('[data-testid="table-wrap"]').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()
    const rows = [...wrap.querySelectorAll('.stk-tbody-main tr')]
    return {
      left: Math.round(r.left),
      top: Math.round(r.top),
      bottom: Math.round(r.bottom),
      rowBottoms: rows.map((tr) => Math.round(tr.getBoundingClientRect().bottom)),
    }
  })

  // ① 底部：外框底边
  const yB = Math.max(0, geo.bottom - 4)
  let bottomVec = 'skip'
  if (1200 - yB >= 8) {
    const px = await clipSample(geo.left + 300, yB, 1, 8)
    const dark = px.map(([r, g, b]) => (r < 246 || g < 246 || b < 246 ? 1 : 0))
    bottomVec = `${dark.join('')} (${dark.reduce((a, b) => a + b, 0)}条)`
  }

  // ② 行间分隔线：第 1 行与第 2 行之间那条，必须还在
  let innerVec = 'skip'
  if (geo.rowBottoms.length >= 2) {
    const yI = Math.max(0, geo.rowBottoms[0] - 4)
    if (1200 - yI >= 8) {
      const px = await clipSample(geo.left + 300, yI, 1, 8)
      const dark = px.map(([r, g, b]) => (r < 246 || g < 246 || b < 246 ? 1 : 0))
      innerVec = `${dark.join('')} (${dark.reduce((a, b) => a + b, 0)}条)`
    }
  }

  console.log(`${label} h=${String(h).padStart(3)}  底部: ${bottomVec.padEnd(16)}  行间: ${innerVec}`)
}

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

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

console.log('\n===== 路 B：最后一行永不画底边（无开关）=====')
await applyB()
for (const h of heights) await scanColumn('B     ', h)

await browser.close()