// The isomorphic handshake: server-render a view to a string, parse it
// into the document the way a browser would, then mount() the same app —
// the server DOM must be adopted (same element references), handlers must
// come alive, and a tampered server render must produce a console warning.

import { test, before } from 'node:test'
import assert from 'node:assert'
import { Window } from 'happy-dom'

let choo, browserHtml, serverString

before(async () => {
  // Server side first, before any window exists — exactly like production,
  // and toString() enforces it.
  ;({ default: choo } = await import('@choojs/core'))
  const { default: serverHtml } = await import('@choojs/html/server')
  serverString = makeApp(serverHtml).toString('/')

  const win = new Window({ url: 'http://localhost/' })
  globalThis.window = win
  globalThis.document = win.document
  globalThis.requestAnimationFrame = win.requestAnimationFrame.bind(win)
  ;({ default: browserHtml } = await import('@choojs/html/browser'))
})

const tick = (ms = 30) => new Promise((resolve) => setTimeout(resolve, ms))

// One view definition, parameterized by renderer — mirrors how the import
// map serves browser.js to the browser and server.js to Node.
function makeApp (html) {
  const app = choo()
  app.use((state, emitter) => {
    state.count = state.count || 0
    emitter.on('increment', (n) => {
      state.count += n
      emitter.emit('render')
    })
  })
  app.route('/', (state, emit) => html`
    <div class="app">
      <h1>count is ${state.count}</h1>
      <button onclick=${() => emit('increment', 1)}>Increment</button>
    </div>
  `)
  return app
}

test('mount adopts server-rendered DOM and brings it alive', async () => {
  document.body.innerHTML = serverString
  const serverEl = document.querySelector('.app')
  const serverH1 = serverEl.querySelector('h1')

  const warnings = []
  const warn = console.warn
  console.warn = (msg) => warnings.push(msg)

  const app = makeApp(browserHtml)
  app.mount('.app')
  await tick()

  console.warn = warn

  assert.strictEqual(document.querySelector('.app'), serverEl, 'server root adopted, not replaced')
  assert.strictEqual(serverEl.querySelector('h1'), serverH1, 'server child adopted, not replaced')
  assert.deepStrictEqual(warnings, [], 'identical markup produced no mismatch warnings')

  serverEl.querySelector('button').click()
  await tick()
  assert.strictEqual(serverH1.textContent, 'count is 1', 'adopted DOM is live')
})

test('a tampered server render produces one mismatch warning, client wins', async () => {
  document.body.innerHTML = serverString.replace('count is 0', 'count is 999')

  const warnings = []
  const warn = console.warn
  console.warn = (msg) => warnings.push(msg)

  const app = makeApp(browserHtml)
  app.mount('.app')
  await tick()

  console.warn = warn

  assert.strictEqual(warnings.length, 1, 'exactly one warning')
  assert.match(warnings[0], /server and client markup differ/)
  assert.match(warnings[0], /count is 999/)
  assert.strictEqual(
    document.querySelector('h1').textContent,
    'count is 0',
    'client render won'
  )
})