import { describe, it, expect } from 'vitest'
import { renderToString } from '../ssr/render-string.ts'
import { Frame } from '../../index.ts'
import { bootstrapFrameMarkers } from '../runtime.ts'

describe('Runtime bootstrap: consume markers and establish regions', () => {
  it('records statuses and inserts boundaries around fallback/resolved content', async () => {
    let html = await renderToString(
      <div>
        <Frame src="/x" fallback={<span>Loading</span>} />
        <Frame src="/y" />
      </div>,
      {
        resolveFrame: (src) => {
          if (src === '/x') return <span>X</span>
          if (src === '/y') return <span>Y</span>
          return ''
        },
      },
    )

    let container = document.createElement('div')
    container.innerHTML = html

    // Before bootstrap there are scripts but no explicit boundaries for pending fallback
    let pendingScript = container.querySelector('script[rmx-frame]') as HTMLScriptElement
    expect(pendingScript).toBeTruthy()

    bootstrapFrameMarkers(container)

    // After bootstrap, boundaries exist for both frames
    let startComments = findAllComments(container).filter((c) =>
      /RMX:\d+(?:-[^:]+)*:start/.test(c.data),
    )
    let endComments = findAllComments(container).filter((c) =>
      /RMX:\d+(?:-[^:]+)*:end/.test(c.data),
    )
    expect(startComments.length >= 2).toBe(true)
    expect(endComments.length >= 2).toBe(true)
  })
})

function findAllComments(container: HTMLElement): Comment[] {
  let out: Comment[] = []
  let walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT)
  let node: Comment | null
  // @ts-ignore nextNode may return null
  while ((node = walker.nextNode() as Comment | null)) {
    if (node) out.push(node)
  }
  return out
}