const assert = require('node:assert/strict')
const fs = require('node:fs')
const ux = fs.readFileSync('src/pages/index/index.ux','utf8')
const css = ux.match(/<style>([\s\S]*?)<\/style>/)[1]
function rule(name) {
  const m = css.match(new RegExp('\\.'+name+'\\s*\\{([^}]+)\\}'))
  assert.ok(m, 'style exists: '+name)
  return Object.fromEntries(m[1].split(';').filter(s=>s.includes(':')).map(s=>s.trim().split(/:\s*/)))
}
function px(r,k) { assert.match(r[k] || '', /^\d+px$/, k); return Number(r[k].slice(0,-2)) }
const arena = require('../src/common/snake.js').ARENA
assert.equal(px(rule('seg'),'width'),arena.cell)
assert.equal(px(rule('seg'),'height'),arena.cell)
assert.equal(px(rule('food'),'width'),arena.cell)
const board=rule('board')
assert.equal(px(board,'width'),arena.radius*2)
assert.equal(px(board,'height'),arena.radius*2)
assert.equal(px(board,'left')+arena.radius,233)
assert.equal(px(board,'top')+arena.radius,233)
for(const c of arena.cells) for(const name of ['hud','footer']) {
 const r=rule(name), x=arena.offset+c.x*arena.cell,y=arena.offset+c.y*arena.cell
 assert.ok(x+arena.cell<=px(r,'left') || x>=px(r,'left')+px(r,'width') || y+arena.cell<=px(r,'top') || y>=px(r,'top')+px(r,'height'), 'legal cell never overlaps '+name)
}
for (const name of ['hud','footer','overlay']) {
  const r = rule(name), x=px(r,'left'), y=px(r,'top'), w=px(r,'width'), h=px(r,'height')
  const dy = Math.max(Math.abs(y-233), Math.abs(y+h-233))
  const chord = 2*Math.sqrt(233*233-dy*dy)
  const used = 2*Math.max(Math.abs(x-233), Math.abs(x+w-233))
  assert.ok(used <= chord-8, `${name}: ${used} > chord ${chord} minus 8px safety`)
  console.log(`${name}: y=${y}..${y+h}, width=${w}, chord=${chord.toFixed(2)}, margin=${((chord-used)/2).toFixed(2)}px`)
}
const overlay = rule('overlay'), retry = rule('retry'), modes = rule('modes'), button = rule('modeButton')
assert.ok(px(retry,'width') >= 200 && px(retry,'height') >= 56, 'large retry touch target')
assert.ok(px(button,'height') >= 44 && px(button,'width') >= 100)
assert.ok(2*px(button,'width') <= px(modes,'width'))
const total = ['overText','overSub','retry','overHint','modes'].reduce((n,k)=>n+px(rule(k),'height'),0)
assert.ok(total <= px(overlay,'height'), 'overlay children fit without clipping')
assert.ok(px(retry,'width') <= px(overlay,'width'))
assert.doesNotMatch(ux, /\}\}px/, 'style bindings already contain px: no double px')
assert.equal(JSON.parse(fs.readFileSync('src/manifest.json')).config.designWidth, 466)
console.log('ROUND LAYOUT PASS (numeric geometry, not hardware rendering)')