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

// iOS Safari zooms the page when a focused control computes under 16px, so `app.css` raises three
// tokens — `--field-size`, `--field-ident-size`, `--field-find-size` — on a touch-primary device, and
// every typed control in the app takes its size from one of them.
//
// That is a claim about *every* `<input>`, `<textarea>` and `<select>` in eleven components, and both
// halves of it are silently breakable from a distance: an inline `style="font-size:12.5px"` beats any
// author rule, and a descendant selector with two classes in it out-ranks `input.ti`. Both had
// happened. Neither is visible from the stylesheet, and nothing about a new field with a mono style
// on it says it has just opted out. So the two ends are read back out of the source and compared,
// the way `rail-bounds` and `rail-focus-ring` do for the pairs they hold together.
//
// This lives in the node tests rather than in vitest because it reads files: `src/` is a browser
// project with no `node:*` types, and the assertion is about what is *written* rather than about what
// a mounted component does.

const src = resolve(dirname(fileURLToPath(import.meta.url)), '..', 'src')
const read = (name) => readFileSync(resolve(src, name), 'utf8')

const FLOOR = 16

/** Every `.svelte` under `src/`, so a new component cannot be added outside this test's reach. */
function components(directory = src, found = []) {
  for (const entry of readdirSync(directory, { withFileTypes: true })) {
    const path = join(directory, entry.name)
    if (entry.isDirectory()) components(path, found)
    else if (entry.name.endsWith('.svelte')) found.push(path)
  }
  return found
}

const TYPED = new Set(['input', 'textarea', 'select'])
const VOID = new Set(['input', 'br', 'hr', 'img', 'meta', 'link', 'source', 'area', 'col', 'wbr'])

/**
 * The markup's elements, in order, each with the classes of the elements it is inside — enough to
 * answer "would `.field input` match this?" without a browser.
 *
 * Deliberately small: `<script>`, `<style>` and comments are blanked first (TypeScript is full of `<`
 * and `>` that are not tags) — blanked rather than cut, so the line a complaint names is the line in
 * the file. Attribute scanning tracks quotes and `{…}` depth so an arrow function's `=>` does not end
 * a tag early, and Svelte's block syntax is ignored because `{#if}` does not nest elements.
 */
function* elements(source) {
  const blank = (match) => match.replace(/[^\n]/g, ' ')
  const markup = source
    .replace(/<script[\s\S]*?<\/script>/g, blank)
    .replace(/<style[\s\S]*?<\/style>/g, blank)
    .replace(/<!--[\s\S]*?-->/g, blank)
  const stack = []
  let index = 0
  while (index < markup.length) {
    const open = markup.indexOf('<', index)
    if (open < 0) break
    const named = /^(\/?)([a-zA-Z][\w:-]*)/.exec(markup.slice(open + 1))
    if (!named) {
      index = open + 1
      continue
    }
    let end = open + 1 + named[0].length
    let quote = ''
    let depth = 0
    while (end < markup.length) {
      const character = markup[end]
      if (quote) {
        if (character === quote) quote = ''
      } else if (character === '"' || character === "'") quote = character
      else if (character === '{') depth += 1
      else if (character === '}') depth -= 1
      else if (character === '>' && depth === 0) break
      end += 1
    }
    const tag = named[2].toLowerCase()
    const text = markup.slice(open, end + 1)
    if (named[1]) {
      const at = stack.map((element) => element.tag).lastIndexOf(tag)
      if (at >= 0) stack.length = at
    } else {
      const classes = (/\sclass="([^"]*)"/.exec(text)?.[1] ?? '')
        .split(/\s+/)
        .filter((name) => name && !name.includes('{'))
      const element = {
        tag,
        text,
        classes,
        line: markup.slice(0, open).split('\n').length,
        inside: stack.map((parent) => parent.classes).flat(),
      }
      if (TYPED.has(tag)) yield element
      if (!VOID.has(tag) && !/\/\s*>$/.test(text)) stack.push(element)
    }
    index = end + 1
  }
}

/**
 * What the stylesheet offers a typed control, and how a control in the markup takes it. Each entry is
 * checked against `app.css` below, so this list cannot claim a selector the sheet does not have.
 */
const COVERAGE = [
  { selector: 'textarea.ta', takes: (it) => it.tag === 'textarea' && it.classes.includes('ta') },
  { selector: 'input.ti', takes: (it) => it.tag === 'input' && it.classes.includes('ti') },
  { selector: 'select.sl', takes: (it) => it.tag === 'select' && it.classes.includes('sl') },
  {
    selector: '.md textarea.md-plain',
    takes: (it) => it.tag === 'textarea' && it.classes.includes('md-plain'),
  },
  { selector: '.find input', takes: (it) => it.tag === 'input' && it.inside.includes('find') },
  { selector: '.field input', takes: (it) => it.tag === 'input' && it.inside.includes('field') },
]

/**
 * The two exemptions, and the one reason behind both: nothing is typed into them, so there is no
 * caret for Safari to zoom to. A file picker is off screen and pressed by the link beside it
 * (`MarkdownEditor`); a checkbox is a box, and its label is prose sized like the prose around it
 * (`PrivateDisclosure`). Anything with a caret stays in `COVERAGE` above.
 */
const exempt = (element) =>
  element.classes.includes('md-file') || /\stype="(checkbox|radio)"/.test(element.text)

/** Every declaration block in the sheet, at-rules included, as `{ prelude, body }`. */
function* rules(css) {
  const source = css.replace(/\/\*[\s\S]*?\*\//g, '')
  const open = []
  let prelude = 0
  for (let index = 0; index < source.length; index += 1) {
    if (source[index] === '{') {
      open.push({ prelude: source.slice(prelude, index).trim(), body: index + 1 })
      prelude = index + 1
    } else if (source[index] === '}') {
      const block = open.pop()
      if (block) yield { prelude: block.prelude, body: source.slice(block.body, index) }
      prelude = index + 1
    }
  }
}

/** A selector that reaches something somebody types into. */
const typedSelector = (prelude) =>
  !prelude.startsWith('@') &&
  (/(^|[\s,>+~])(input|textarea|select)(?![\w-])/.test(prelude) ||
    /\.(ti|ta|sl|md-plain|md-host|cm-content)(?![\w-])/.test(prelude) ||
    /\.(find|field)\s+input/.test(prelude))

describe('the touch font-size floor', () => {
  const css = read('app.css')

  it('raises every field token on a touch-primary device', () => {
    const tokens = [...css.matchAll(/(--field[\w-]*): ([\d.]+)px/g)]
    const declared = new Set(tokens.map((token) => token[1]))
    assert.ok(declared.size >= 3, 'app.css no longer states the field sizes as tokens')

    const floor = [...rules(css)].find(
      (rule) => rule.prelude === '@media (hover: none) and (pointer: coarse)',
    )
    assert.ok(floor, 'the touch floor block is gone')
    for (const name of declared) {
      const raised = new RegExp(`${name}: ([\\d.]+)px`).exec(floor.body)
      assert.ok(raised, `${name} is not raised by the touch floor`)
      assert.ok(
        Number(raised[1]) >= FLOOR,
        `${name} is ${raised[1]}px on a touch device, under the ${FLOOR}px Safari zooms below`,
      )
    }
  })

  it('is the only place a typed control is given a size', () => {
    for (const rule of rules(css)) {
      if (!typedSelector(rule.prelude)) continue
      for (const [, value] of rule.body.matchAll(/(?:^|[;{]|\n)\s*font(?:-size)?:\s*([^;}]+)/g)) {
        const size = value.trim()
        assert.ok(
          size === 'inherit' || size.includes('var(--field'),
          `\`${rule.prelude}\` sets \`${size}\`, which the touch floor cannot raise`,
        )
      }
    }
  })

  it('is not out-ranked by a size written on the element itself', () => {
    for (const path of components()) {
      for (const element of elements(readFileSync(path, 'utf8'))) {
        const inline = /\sstyle="([^"]*)"/.exec(element.text)?.[1] ?? ''
        assert.ok(
          !/font(-size)?:/.test(inline),
          `${relative(src, path)}:${element.line} sizes itself inline, which beats every rule in app.css`,
        )
      }
    }
  })

  it('reaches every typed control in the app', () => {
    const seen = new Set()
    for (const path of components()) {
      for (const element of elements(readFileSync(path, 'utf8'))) {
        if (exempt(element)) continue
        const taken = COVERAGE.find((entry) => entry.takes(element))
        assert.ok(
          taken,
          `${relative(src, path)}:${element.line} is a <${element.tag}> no field selector reaches, ` +
            'so it keeps the inherited size and zooms the page on focus',
        )
        seen.add(taken.selector)
      }
    }
    // And each of those selectors is really in the sheet, sized from a token: the list above is a
    // reading of `app.css`, not a second opinion about it.
    for (const { selector } of COVERAGE) {
      const rule = [...rules(css)].find((entry) =>
        entry.prelude.split(',').some((part) => part.trim() === selector),
      )
      assert.ok(rule, `app.css no longer has a \`${selector}\` rule for this test to stand on`)
      assert.match(rule.body, /font-size: var\(--field/)
    }
  })

  it('reaches the markdown editor, which draws its own text', () => {
    // CodeMirror is themed from JavaScript, so its size is the one that cannot be seen in the sheet
    // at all — and its `.cm-content` is contenteditable, which Safari zooms exactly like an input.
    const editor = read('lib/editor.ts')
    assert.match(editor, /fontSize: 'var\(--field-size\)'/)
    assert.doesNotMatch(editor, /fontSize: '[\d.]+px'/)
  })
})