import { describe, it, expect } from 'vitest'
import type { Handle, RemixNode } from '@remix-run/component'
import { dom } from '@remix-run/events'

import { render } from '../render.ts'
import { flushRenderQueue as flush } from '../reconcile.ts'
import { createManagedRegionElement } from '../frame/managed-region.ts'

describe('managed regions', () => {
  it('skips diffing inside region when parent rerenders', () => {
    let container = document.createElement('div')
    let count = 0

    function RegionOwner(this: Handle) {
      return () => {
        return (
          <div>
            <button
              data-testid="inc"
              on={dom.click(() => {
                count++
                this.render()
              })}
            >
              {count}
            </button>
            {createManagedRegionElement('test')}
          </div>
        )
      }
    }

    // Seed DOM content inside the region boundaries manually to simulate runtime-owned DOM
    render(<RegionOwner />, container)

    // Find boundaries and insert static content between them
    let start = findBoundary(container, 'test', 'start')!
    let end = findBoundary(container, 'test', 'end')!
    let staticSpan = document.createElement('span')
    staticSpan.setAttribute('data-region', 'true')
    staticSpan.textContent = 'STATIC'
    start.parentNode!.insertBefore(staticSpan, end)

    // Click to trigger parent rerender
    let button = container.querySelector('[data-testid="inc"]') as HTMLButtonElement
    button.click()
    flush()

    // Assert region content was preserved
    expect(container.querySelector('[data-region="true"]')?.textContent).toBe('STATIC')
  })
})

function findBoundary(container: HTMLElement, id: string, suffix: 'start' | 'end'): Comment | null {
  let walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT)
  let node: Comment | null
  let target = `RMX:${id}:${suffix}`
  while ((node = walker.nextNode() as Comment | null)) {
    if (node && node.nodeType === 8 && node.data === target) return node
  }
  return null
}