const test = require('node:test')
const assert = require('node:assert/strict')
const fs = require('node:fs')
const path = require('node:path')

const root = path.resolve(__dirname, '..', '..')

function read(relative) {
  return fs.readFileSync(path.join(root, relative), 'utf8')
}

test('dual asset cards use an independent equal-height grid row', () => {
  const css = read('assets/css/routes/user-center/credits.css')
  const profile = read('inc/helpers/user-center-renderers/profile-credits.php')

  assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?grid-template-columns:\s*repeat\(2,\s*minmax\(0,\s*1fr\)\);[\s\S]*?grid-template-rows:\s*auto;/)
  assert.match(css, /\.uc-assets-row\s*\{[\s\S]*?margin-bottom:\s*10px;/)
  assert.match(css, /\.uc-assets-row--dual\s*\{[\s\S]*?gap:\s*10px;/)
  assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*\{[\s\S]*?display:\s*contents;/)
  assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:first-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*1;/)
  assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col:last-child\s*>\s*\.uc-asset-card[\s\S]*?grid-column:\s*2;/)
  assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-asset-card\s*\{[\s\S]*?grid-row:\s*1;/)
  assert.match(css, /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*>\s*\.uc-card-pass\s*\{[\s\S]*?grid-row:\s*2;/)
  assert.match(css, /\.uc-asset-card\s*\{[\s\S]*?display:\s*flex;[\s\S]*?flex-direction:\s*column;/)
  assert.match(css, /\.uc-asset-card__link\s*\{[\s\S]*?margin-top:\s*auto;/)
  assert.match(css, /\.uc-asset-card__foot\s*\{[\s\S]*?margin-top:\s*auto;/)
  assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-wallet\.php[\s\S]*?<\/div>/)
  assert.match(profile, /<div class="uc-assets-col">[\s\S]*?credits-balance\.php[\s\S]*?<\/div>/)
})

test('dual asset layout returns to a single-column flex flow on mobile', () => {
  const css = read('assets/css/routes/user-center/credits.css')
  const mobile = css.match(/@media \(max-width: 767px\) \{([\s\S]*?)\n\}/)

  assert.ok(mobile, 'credits CSS must define a mobile breakpoint')
  assert.match(mobile[1], /grid-template-columns:\s*1fr;/)
  assert.match(mobile[1], /grid-template-rows:\s*none;/)
  assert.match(mobile[1], /\.uc-assets-row--dual\s*>\s*\.uc-assets-col\s*\{[\s\S]*?display:\s*flex;/)
  assert.match(mobile[1], /grid-column:\s*auto;/)
  assert.match(mobile[1], /grid-row:\s*auto;/)
})

test('removed asset card selectors do not return in loaded user-center styles', () => {
  const cssFiles = [
    'assets/css/routes/user-center/credits.css',
    'assets/css/routes/user-center/responsive.css',
    'assets/css/frontend/credits.css',
  ]
  const source = cssFiles.map(read).join('\n')

  assert.doesNotMatch(source, /\.uc-balance-card(?:[\s:{]|__)/)
  assert.doesNotMatch(source, /\.credits-card(?:[\s:{]|__)/)
  assert.doesNotMatch(source, /\.uc-assets-row\.uc-asset-card\.aksrt-panel/)
  assert.doesNotMatch(source, /\.uc-asset-tabs\.aksrt-panel/)
  assert.doesNotMatch(source, /\.uc-asset-card__foot\s+button/)
})