import assert from 'node:assert/strict'
import { readFileSync } from 'node:fs'
import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { describe, it } from 'node:test'

const css = readFileSync(
  resolve(dirname(fileURLToPath(import.meta.url)), '..', 'src', 'app.css'),
  'utf8',
)

describe('the mobile space picker', () => {
  const start = css.indexOf('@media (max-width: 560px)')
  const end = css.indexOf('@media (prefers-reduced-motion: reduce)', start)
  const narrow = start >= 0 && end > start ? css.slice(start, end) : ''

  it('becomes a top-aligned, edge-to-edge scrolling sheet', () => {
    assert.match(narrow, /\.scrim:has\(\.picker\)\s*\{[^}]*place-items:\s*start stretch;[^}]*padding:\s*0;/s)
    assert.match(narrow, /\.scrim \.picker\s*\{[^}]*width:\s*100%;[^}]*min-height:\s*100dvh;/s)
    assert.match(narrow, /\.scrim \.picker\s*\{[^}]*border-radius:\s*0;[^}]*box-shadow:\s*none;/s)
    assert.match(narrow, /\.scrim \.picker\s*\{[^}]*env\(safe-area-inset-top\)[^}]*env\(safe-area-inset-bottom\)/s)
  })

  it('keeps all text-entry tokens at the mobile editing floor', () => {
    for (const token of ['--field-size', '--field-ident-size', '--field-find-size']) {
      assert.match(narrow, new RegExp(`${token}: 16px`))
    }
  })
})