import { chromium } from 'playwright-core'

const BASE = 'http://localhost:5082'
const browser = await chromium.launch({
  headless: true,
  executablePath: `${process.env.LOCALAPPDATA}\\ms-playwright\\chromium-1232\\chrome-win64\\chrome.exe`,
})
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } })

await page.addInitScript(() => {
  sessionStorage.setItem('fms-login', JSON.stringify({ loginInfo: { token: 'dev-token', user: { id: 1, name: 'dev', account: 'g3soft' } } }))
  localStorage.setItem('fms-user', JSON.stringify({ userInfo: { orgId: 'G3HD', account: 'g3soft' } }))
})
await page.route('**/api/**', async (route) => {
  const req = route.request()
  const url = req.url()
  let body = {}
  try { body = req.postDataJSON() || {} } catch {}
  if (url.includes('/data/loaddata')) {
    const rows = body.view_name === 's_module' ? [{ b_id: 1, b_code: 'b_port', b_name: '港口管理' }] :
      body.view_name === 'bf_files_cateid' ? [{ b_id: '10', b_name: '合同文件' }] : []
    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: rows }) })
  }
  if (url.includes('/data/page')) {
    const files = Array.from({ length: 4 }, (_, i) => ({
      subid: String(1000 + i), father: '1001', mx_moduleid: '1', mx_cate_id: '10',
      mx_filename: `文件-${i + 1}.pdf`, mx_filesize: (i + 1) * 1024 * 1024,
      mx_fileext: 'pdf', mx_mapfilename: '',
    }))
    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: { rows: files, total: files.length } }) })
  }
  return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ code: 0, data: null }) })
})

await page.goto(`${BASE}/file-demo`, { waitUntil: 'networkidle', timeout: 30000 })
await page.waitForTimeout(3500)

// ---- Issue 1+2: inner splitter panels & bars ----
const splitterInfo = await page.evaluate(() => {
  const ff = document.querySelector('.ff-splitter')
  if (!ff) return { error: 'no .ff-splitter' }
  const rect = ff.getBoundingClientRect()
  const panels = Array.from(ff.querySelectorAll(':scope > .fms-splitter-panel')).map((el) => ({
    w: Math.round(el.getBoundingClientRect().width),
    style: el.getAttribute('style') || '(none)',
    cs: getComputedStyle(el).flex,
  }))
  const bars = Array.from(ff.querySelectorAll(':scope > .fms-splitter-bar')).map((el) => ({
    w: Math.round(el.getBoundingClientRect().width),
    cs: getComputedStyle(el).width,
    visible: el.getBoundingClientRect().width > 0,
  }))
  return { containerW: Math.round(rect.width), panels, bars }
})

// ---- Issue 1: tree panel width ----
const treeInfo = await page.evaluate(() => {
  const tree = document.querySelector('.ff-splitter .tree, .ff-splitter .fms-tree, .ff-splitter [class*="tree"]')
  return tree ? { cls: tree.className, w: Math.round(tree.getBoundingClientRect().width) } : null
})

// ---- Issue 3: grid card footers ----
const gridInfo = await page.evaluate(() => {
  const cards = Array.from(document.querySelectorAll('.fcard'))
  return {
    count: cards.length,
    footers: cards.slice(0, 2).map((card) => {
      const footer = card.querySelector('.fcard__footer')
      const btns = footer ? Array.from(footer.querySelectorAll('.button')).map((b) => Math.round(b.getBoundingClientRect().width)) : []
      return { footerW: footer ? Math.round(footer.getBoundingClientRect().width) : null, btns }
    }),
  }
})

// ---- Drag test on inner bar ----
let dragResult = null
try {
  const bar = await page.locator('.ff-splitter > .fms-splitter-bar').first()
  const bb = await bar.boundingBox()
  if (bb) {
    const before = await page.evaluate(() => {
      const ps = Array.from(document.querySelectorAll('.ff-splitter > .fms-splitter-panel')).map((el) => Math.round(el.getBoundingClientRect().width))
      return ps
    })
    await page.mouse.move(bb.x + bb.width / 2, bb.y + bb.height / 2)
    await page.mouse.down()
    await page.mouse.move(bb.x + bb.width / 2 + 60, bb.y + bb.height / 2, { steps: 12 })
    await page.mouse.up()
    await page.waitForTimeout(500)
    const after = await page.evaluate(() => {
      const ps = Array.from(document.querySelectorAll('.ff-splitter > .fms-splitter-panel')).map((el) => Math.round(el.getBoundingClientRect().width))
      return ps
    })
    dragResult = { before, after }
  }
} catch (e) {
  dragResult = { error: String(e) }
}

console.log(JSON.stringify({ splitterInfo, treeInfo, gridInfo, dragResult }, null, 2))
await page.screenshot({ path: '.playwright-cli/fmsfile-verified.png' })
await browser.close()