import assert from 'node:assert/strict'
import test from 'node:test'
import { build } from 'vite'
import { pathToFileURL } from 'node:url'
import path from 'node:path'
import React from 'react'
import { renderToStaticMarkup } from 'react-dom/server'

await build({ configFile: false, logLevel: 'silent', build: { outDir: '_local/theme-verification-test', emptyOutDir: false, lib: { entry: 'src/theme/verification-state.tsx', formats: ['es'], fileName: 'module' }, rolldownOptions: { external: id => !id.startsWith('.') && !path.isAbsolute(id) } } })
const { waitForThemeState, VerificationStyles } = await import(pathToFileURL(path.resolve('_local/theme-verification-test/module.js')).href)

test('Theme verification waits for the actual state, including asynchronous updates', async () => {
  let ready = false, probes = 0
  queueMicrotask(() => { ready = true })
  await waitForThemeState(() => { probes++; return ready }, 'asynchronous Theme')
  assert.ok(ready && probes >= 2)
})

test('Theme verification fails with a diagnostic when the state never becomes ready', async () => {
  await assert.rejects(waitForThemeState(() => false, 'missing checked color'), /Theme state did not settle: missing checked color/)
})

test('Settled-target styles are limited to verification scope and define no Theme values', () => {
  const css = renderToStaticMarkup(React.createElement(VerificationStyles)).replace(/<\/?style>/g, '')
  assert.ok(css.split('{')[0].split(',').every(selector => selector.trim().startsWith('[data-hm-theme-verification]')))
  assert.match(css, /transition-duration: 0s/)
  assert.match(css, /transition-delay: 0s/)
  assert.doesNotMatch(css, /background|color:|--hm-|:root/)
})