import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { fileURLToPath } from 'node:url'
import test from 'node:test'

const icons = [
  ['grid-one', 1],
  ['grid-four', 2],
  ['grid-nine', 3],
  ['grid-16', 4]
]

const page = readFileSync(
  new URL('../src/views/pms/video_center/haikang/index.vue', import.meta.url),
  'utf8'
)
assert.match(page, /mask:\s*var\(--split-icon\)/, 'the split icons are rendered as CSS alpha masks')
test('the SVG data URL is quoted before becoming a CSS mask URL', () => {
  const splitStyle = page.split('\n').find((line) => line.includes("'--split-icon':")) ?? ''
  assert.match(splitStyle, /'--split-icon':\s*toSplitIconUrl\(option\.icon\)/)
  assert.match(
    page,
    /function toSplitIconUrl\(icon: string\)\s*\{\s*return `url\("\$\{icon\}"\)`/,
    'unquoted Vite SVG data URLs contain quotes and invalidate the mask declaration'
  )
})

for (const [iconName, columns] of icons) {
  test(`${iconName} draws ${columns}×${columns} hollow cells instead of solid blocks`, () => {
    const iconPath = new URL(`../src/assets/icons/${iconName}.svg`, import.meta.url)
    const svg = readFileSync(fileURLToPath(iconPath), 'utf8')
    const frame = svg.match(/<rect\b[^>]*>/g) ?? []
    const dividers = svg.match(/<line\b[^>]*>/g) ?? []

    assert.equal(frame.length, 1, 'the grid needs one outlined outer frame')
    assert.match(frame[0], /\bfill="none"/, 'the panel interiors must remain transparent')
    assert.match(frame[0], /\bstroke="currentColor"/, 'the frame must be visible in the mask')
    assert.equal(dividers.length, 2 * (columns - 1), 'each row and column needs a divider')
    for (const divider of dividers) assert.match(divider, /\bstroke="currentColor"/)
    assert.doesNotMatch(svg, /<path\b/, 'filled paths turn the mask back into solid tiles')
  })
}