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

const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
const read = (rel) => readFileSync(path.join(root, rel), 'utf8')

test('custom tab bar renders the liquid-glass overlay layers', () => {
  const source = read('src/custom-tab-bar/index.tsx')
  assert.match(source, /tab-bar-caustic/)
  assert.match(source, /tab-bar-rim/)
})

test('custom tab bar uses bright glass material and the silver rim', () => {
  const css = read('src/custom-tab-bar/index.scss')
  assert.match(css, /background: rgba\(255, 255, 255, 0\.24\)/)
  assert.match(css, /background: rgba\(25, 25, 25, 0\.24\)/)
  assert.match(css, /backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
  assert.match(css, /-webkit-backdrop-filter: blur\(32px\) saturate\(1\.7\) brightness\(1\.05\)/)
  assert.match(css, /mask-composite: exclude/)
  assert.match(css, /linear-gradient\(\s*135deg/)
})

test('global back buttons use the liquid-glass gradient and inner shading', () => {
  const css = read('src/app.scss')
  assert.match(css, /background: linear-gradient\(\s*135deg/)
  assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
  assert.match(css, /\.theme-dark \.back-btn/)
})

test('scroll top back button matches the global liquid-glass back style', () => {
  const css = read('src/components/ScrollTopMask/index.scss')
  assert.match(css, /background: linear-gradient\(\s*135deg/)
  assert.match(css, /backdrop-filter: blur\(24px\) saturate\(1\.7\) brightness\(1\.05\)/)
})

test('app sets page background before first render without a blinking full fade', () => {
  const appSource = read('src/app.tsx')
  const appCss = read('src/app.scss')
  assert.match(appSource, /componentWillMount/)
  assert.doesNotMatch(appCss, /animation:\s*page-fade-in/)
})

test('delegates initial background to themeLocation instead of hardcoding light', () => {
  const config = read('src/app.config.ts')
  assert.match(config, /themeLocation:\s*'theme\.json'/)
  assert.doesNotMatch(config, /navigationBarBackgroundColor:\s*'#faf7f2'/)
  assert.doesNotMatch(config, /backgroundColorTop:\s*'#faf7f2'/)
})

test('polls the system theme while following the system', () => {
  const ctx = read('src/context/ThemeContext.tsx')
  assert.match(ctx, /setInterval/)
  assert.match(ctx, /getAppBaseInfo\(\)/)
})