const fs = require('fs')
const path = require('path')
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

const connect = async () => {
  const pages = await (await fetch('http://127.0.0.1:9222/json/list')).json()
  const page = pages.find((item) => item.type === 'page' && item.url.includes('localhost:5173'))
  if (!page) throw new Error('Chrome debugging has no localhost:5173 page')
  const socket = new WebSocket(page.webSocketDebuggerUrl)
  await new Promise((resolve, reject) => { socket.addEventListener('open', resolve, { once: true }); socket.addEventListener('error', reject, { once: true }) })
  let id = 0
  const pending = new Map()
  socket.addEventListener('message', (event) => { const message = JSON.parse(event.data); const request = pending.get(message.id); if (!request) return; pending.delete(message.id); message.error ? request.reject(new Error(message.error.message)) : request.resolve(message.result) })
  return { socket, send: (method, params = {}) => new Promise((resolve, reject) => { id += 1; pending.set(id, { resolve, reject }); socket.send(JSON.stringify({ id, method, params })) }) }
}

const valueOf = async (send, expression) => (await send('Runtime.evaluate', { expression, returnByValue: true })).result?.value
const waitFor = async (send, expression, message) => { for (let attempt = 0; attempt < 40; attempt += 1) { if (await valueOf(send, expression)) return; await sleep(100) } throw new Error(message) }
const url = 'http://localhost:5173/#/pages/genealogy/g06-search-genealogies'
const open = async (send) => { await send('Page.navigate', { url }); await waitFor(send, `location.href === ${JSON.stringify(url)}`, 'Chrome did not navigate to G06'); await send('Page.reload'); await waitFor(send, "Boolean(document.querySelector('.search-initial'))", 'G06 initial state did not render') }
const search = async (send, value) => { const ok = await valueOf(send, `(() => { const input = document.querySelector('.search-input input'); const action = document.querySelector('.search-action'); if (!input || !action) return false; input.value = ${JSON.stringify(value)}; input.dispatchEvent(new Event('input', { bubbles: true })); action.click(); return true })()`); if (!ok) throw new Error('G06 search controls did not render') }
const capture = async (send, output) => { await sleep(350); const screenshot = await send('Page.captureScreenshot', { format: 'png', fromSurface: true, captureBeyondViewport: false }); fs.mkdirSync(path.dirname(output), { recursive: true }); fs.writeFileSync(output, Buffer.from(screenshot.data, 'base64')) }

const run = async () => {
  const { socket, send } = await connect()
  try {
    await send('Page.enable'); await send('Runtime.enable'); await send('Emulation.setDeviceMetricsOverride', { width: 360, height: 800, deviceScaleFactor: 1, mobile: true, screenWidth: 360, screenHeight: 800 })
    await open(send); await search(send, '汤'); await waitFor(send, "Boolean(document.querySelector('.search-results .genealogy-card'))", 'G06 selected results state did not render'); await capture(send, 'docs/design/screens/runtime/2026-07-14/G06-selected-strip-final-results-360x800.png')
    await open(send); await search(send, '不存在的家谱'); await waitFor(send, "Boolean(document.querySelector('.search-empty'))", 'G06 selected empty state did not render'); await capture(send, 'docs/design/screens/runtime/2026-07-14/G06-selected-strip-final-empty-360x800.png')
    process.stdout.write('G06-SELECTED-STRIP-CAPTURES PASS\n')
  } finally { try { await send('Emulation.clearDeviceMetricsOverride') } catch (_) {}; socket.close() }
}
run().catch((error) => { process.stderr.write(`${error.stack || error.message}\n`); process.exit(1) })