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

import type { Props } from '../html-types.ts'
import { render } from '../render.ts'
import type { RemixNode, Handle } from '@remix-run/component'
import { flushRenderQueue as flush } from '../reconcile.ts'

describe('property vs attribute mapping', () => {
  it('sets input value via property and preserves caret on rerender', () => {
    let container = document.createElement('div')
    let text = 'hello'

    function App() {
      return <input type="text" value={text} />
    }

    let root = render(<App />, container)
    let input = container.querySelector('input') as HTMLInputElement
    expect(input.value).toBe('hello')

    // Simulate user cursor at index 3
    input.focus()
    input.setSelectionRange(3, 3)

    // Re-render with the same value, caret should remain
    root.update(<App />)
    expect(input.value).toBe('hello')
    expect(input.selectionStart).toBe(3)
    expect(input.selectionEnd).toBe(3)

    // Update value and ensure property changes
    text = 'hello!'
    root.update(<App />)
    expect(input.value).toBe('hello!')
  })

  it('toggles checkbox checked via property, independent of attribute', () => {
    let container = document.createElement('div')
    let checked = false

    function App() {
      return <input type="checkbox" checked={checked} />
    }

    let root = render(<App />, container)
    let input = container.querySelector('input') as HTMLInputElement
    expect(input.checked).toBe(false)
    expect(input.getAttribute('checked')).toBeNull()

    checked = true
    root.update(<App />)
    expect(input.checked).toBe(true)
    // Attribute may not be present; property is the source of truth
    expect(input.getAttribute('checked') === '' || input.getAttribute('checked') === null).toBe(
      true,
    )
  })

  it('updates select multiple and selectedIndex via properties', () => {
    let container = document.createElement('div')
    let multi = false
    let idx = 1

    function App() {
      return (
        <select multiple={multi} selectedIndex={idx}>
          <option>zero</option>
          <option>one</option>
          <option>two</option>
        </select>
      )
    }

    let root = render(<App />, container)
    let select = container.querySelector('select') as HTMLSelectElement
    expect(select.multiple).toBe(false)
    expect(select.selectedIndex).toBe(1)

    multi = true
    idx = 2
    root.update(<App />)
    expect(select.multiple).toBe(true)
    expect(select.selectedIndex).toBe(2)
  })

  it('keeps SVG attributes attribute-based', () => {
    let container = document.createElement('div')
    let r = 40

    function App() {
      return (
        <svg width="100" height="100">
          <circle cx="50" cy="50" r={r} />
        </svg>
      )
    }

    let root = render(<App />, container)
    let circle = container.querySelector('circle')!
    expect(circle.getAttribute('r')).toBe('40')

    r = 20
    root.update(<App />)
    expect(circle.getAttribute('r')).toBe('20')
  })

  it('reordering keyed inputs preserves typed values and submitted FormData (uncontrolled)', () => {
    let container = document.createElement('div')
    let order = ['one', 'two', 'three']

    function App() {
      return (
        <form>
          {order.map((id) => (
            <input key={id} type="text" name={id} defaultValue="" />
          ))}
        </form>
      )
    }

    // Initial mount
    let root = render(<App />, container)

    // Type into the inputs (simulate user input)
    let inputOne = container.querySelector('input[name="one"]') as HTMLInputElement
    let inputTwo = container.querySelector('input[name="two"]') as HTMLInputElement
    let inputThree = container.querySelector('input[name="three"]') as HTMLInputElement

    inputOne.value = 'alpha'
    inputTwo.value = 'beta'
    inputThree.value = 'gamma'

    // Reorder the inputs (keys remain the same, DOM nodes should move not recreate)
    order = ['three', 'one', 'two']
    root.update(<App />)

    // Visually (property) values should persist after reorder
    inputOne = container.querySelector('input[name="one"]') as HTMLInputElement
    inputTwo = container.querySelector('input[name="two"]') as HTMLInputElement
    inputThree = container.querySelector('input[name="three"]') as HTMLInputElement

    expect(inputOne.value).toBe('alpha')
    expect(inputTwo.value).toBe('beta')
    expect(inputThree.value).toBe('gamma')

    // Submitted values should reflect the current input values
    let form = container.querySelector('form') as HTMLFormElement
    let formData = new FormData(form)
    expect(formData.get('one')).toBe('alpha')
    expect(formData.get('two')).toBe('beta')
    expect(formData.get('three')).toBe('gamma')
  })

  it('reordering keyed inputs preserves typed values and submitted FormData (controlled via value prop)', () => {
    let container = document.createElement('div')
    let order = ['one', 'two', 'three']
    let values: Record<string, string> = { one: '', two: '', three: '' }

    function App() {
      return (
        <form>
          {order.map((id) => (
            <input key={id} type="text" name={id} value={values[id]} />
          ))}
        </form>
      )
    }

    // Initial mount
    let root = render(<App />, container)

    // Simulate user typing by setting values and re-rendering (controlled pattern)
    values = { one: 'alpha', two: 'beta', three: 'gamma' }
    root.update(<App />)

    // Reorder the inputs
    order = ['three', 'one', 'two']
    root.update(<App />)

    // Values should remain correct by name (as controlled props)
    let inputOne = container.querySelector('input[name="one"]') as HTMLInputElement
    let inputTwo = container.querySelector('input[name="two"]') as HTMLInputElement
    let inputThree = container.querySelector('input[name="three"]') as HTMLInputElement

    expect(inputOne.value).toBe('alpha')
    expect(inputTwo.value).toBe('beta')
    expect(inputThree.value).toBe('gamma')

    // Form submission should reflect the same values
    let form = container.querySelector('form') as HTMLFormElement
    let formData = new FormData(form)
    expect(formData.get('one')).toBe('alpha')
    expect(formData.get('two')).toBe('beta')
    expect(formData.get('three')).toBe('gamma')
  })
})

describe('innerHTML behavior', () => {
  it('innerHTML prop replaces children content', () => {
    let element = document.createElement('div')

    function App() {
      return <div innerHTML={'<strong>Bold text</strong>'}>This content should be replaced</div>
    }

    let root = render(<App />, element)

    // innerHTML should work and replace children
    expect(element.innerHTML).toContain('<strong>Bold text</strong>')
    expect(element.innerHTML).not.toContain('This content should be replaced')
    expect(element.innerHTML).toBe('<div><strong>Bold text</strong></div>')
  })

  it('innerHTML allows unescaped HTML for intentional use', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div innerHTML={'<em>Emphasized</em> and <strong>bold</strong> text'}>Replaced content</div>
      )
    }

    let root = render(<App />, element)

    expect(element.innerHTML).toContain('<em>Emphasized</em>')
    expect(element.innerHTML).toContain('<strong>bold</strong>')
    expect(element.innerHTML).not.toContain('Replaced content')
  })

  it('escapes text content safely', () => {
    let element = document.createElement('div')

    function App() {
      return <div>{"<script>alert('XSS')</script>"}</div>
    }

    let root = render(<App />, element)

    // Text content should be escaped and visible as text
    expect(element.textContent).toBe("<script>alert('XSS')</script>")
    expect(element.innerHTML).toContain('&lt;script&gt;')
  })

  it('clears innerHTML', () => {
    let element = document.createElement('div')

    function App() {
      return <div innerHTML={''}>This should be cleared</div>
    }

    let root = render(<App />, element)

    expect(element.innerHTML).toBe('<div></div>')
    expect(element.innerHTML).not.toContain('This should be cleared')
  })
})

describe('on prop normalization', () => {
  it('normalizes on prop to an array in custom components', () => {
    let element = document.createElement('div')
    let consumerClickCount = 0
    let componentClickCount = 0

    function TestButton({ on = [], ...rest }: Props<'button'>) {
      // No boilerplate needed! The type system now ensures 'on' is always an array
      return (
        <button
          {...rest}
          on={[
            // Clean event composition - just spread the array
            ...on,
            dom.click(() => {
              componentClickCount++
            }),
          ]}
        />
      )
    }

    // Test: Consumer passes single event descriptor (should work thanks to runtime normalization)
    render(
      <TestButton
        on={dom.click(() => {
          consumerClickCount++
        })}
      />,
      element,
    )

    let button = element.querySelector('button')!
    button.click()

    // Both consumer and component events should fire
    expect(consumerClickCount).toBe(1)
    expect(componentClickCount).toBe(1)
  })

  it('accepts both single and array syntax for on prop in JSX', () => {
    let element = document.createElement('div')
    let clickCount = 0
    let mousedownCount = 0

    function TestButton({ on = [], ...rest }: Props<'button'>) {
      // Clean composition without boilerplate
      return (
        <button
          {...rest}
          on={[
            ...on,
            dom.click(() => {
              clickCount++
            }),
          ]}
        />
      )
    }

    // Test array syntax
    render(
      <TestButton
        on={[
          dom.mousedown(() => {
            mousedownCount++
          }),
        ]}
      />,
      element,
    )

    let button = element.querySelector('button')!
    button.click()
    button.dispatchEvent(new MouseEvent('mousedown'))

    expect(clickCount).toBe(1)
    expect(mousedownCount).toBe(1)
  })
})

describe('style prop handling', () => {
  it('handles style string on HTML elements', () => {
    let element = document.createElement('div')

    function App() {
      return <div style="color: red; font-size: 16px;">Styled text</div>
    }

    render(<App />, element)

    let div = element.querySelector('div')!
    expect(div.style.color).toBe('red')
    expect(div.style.fontSize).toBe('16px')
  })

  it('handles style string on SVG elements', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" style="fill: blue; stroke: red;" />
        </svg>
      )
    }

    render(<App />, element)

    let circle = element.querySelector('circle')!
    // SVG elements should have style as an attribute
    expect(circle.getAttribute('style')).toBe('fill: blue; stroke: red;')
  })

  it('updates style string on HTML elements', () => {
    let element = document.createElement('div')
    let color = 'red'

    function App() {
      return <div style={`color: ${color};`}>Styled text</div>
    }

    let root = render(<App />, element)
    let div = element.querySelector('div')!
    expect(div.style.color).toBe('red')

    // Update the style
    color = 'blue'
    root.update(<App />)
    expect(div.style.color).toBe('blue')
  })

  it('updates style string on SVG elements', () => {
    let element = document.createElement('div')
    let fill = 'red'

    function App() {
      return (
        <svg width="100" height="100">
          <rect x="10" y="10" width="80" height="80" style={`fill: ${fill};`} />
        </svg>
      )
    }

    let root = render(<App />, element)
    let rect = element.querySelector('rect')!
    expect(rect.getAttribute('style')).toBe('fill: red;')

    // Update the style
    fill = 'green'
    root.update(<App />)
    expect(rect.getAttribute('style')).toBe('fill: green;')
  })

  it('removes style when set to empty string on HTML elements', () => {
    let element = document.createElement('div')
    let hasStyle = true

    function App() {
      return <div style={hasStyle ? 'color: red;' : ''}>Text</div>
    }

    let root = render(<App />, element)
    let div = element.querySelector('div')!
    expect(div.style.color).toBe('red')

    // Remove the style
    hasStyle = false
    root.update(<App />)
    expect(div.style.color).toBe('')
    expect(div.style.cssText).toBe('')
  })

  it('removes style when set to empty string on SVG elements', () => {
    let element = document.createElement('div')
    let hasStyle = true

    function App() {
      return (
        <svg width="100" height="100">
          <circle cx="50" cy="50" r="40" style={hasStyle ? 'fill: blue;' : ''} />
        </svg>
      )
    }

    let root = render(<App />, element)
    let circle = element.querySelector('circle')!
    expect(circle.getAttribute('style')).toBe('fill: blue;')

    // Remove the style
    hasStyle = false
    root.update(<App />)
    expect(circle.getAttribute('style')).toBe('')
  })

  it('handles style object on HTML elements (inline)', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div style={{ color: 'red', fontSize: '20px', backgroundColor: '#eee' }}>
          Styled with object
        </div>
      )
    }

    render(<App />, element)

    let div = element.querySelector('div')!
    // Style objects should be applied inline now
    expect(div.style.color).toBe('red')
    expect(div.style.fontSize).toBe('20px')
    // hex may be normalized by the browser
    expect(div.style.backgroundColor.length > 0).toBe(true)
  })

  it('maintains both css className and user className', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div className="user-class" css={{ color: 'blue' }}>
          Text
        </div>
      )
    }

    render(<App />, element)

    let div = element.querySelector('div')!
    // Should have both the generated className from css and user className
    expect(div.className).toMatch(/^rmx-[a-z0-9]+ user-class$/)
  })

  it('handles mixed SVG and HTML elements with styles', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div style="padding: 10px;">
          <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" style="fill: red; stroke: black;" />
          </svg>
          <div style="margin: 5px;">Inner HTML</div>
        </div>
      )
    }

    render(<App />, element)

    let outerDiv = element.querySelector('div')!
    expect(outerDiv.style.padding).toBe('10px')

    let circle = element.querySelector('circle')!
    expect(circle.getAttribute('style')).toBe('fill: red; stroke: black;')

    let innerDiv = element.querySelectorAll('div')[1]!
    expect(innerDiv.style.margin).toBe('5px')
  })
})

describe('children prop re-rendering', () => {
  it('does not re-render children for parent re-renders', () => {
    let element = document.createElement('div')
    let parentRenderCount = 0
    let childRenderCount = 0

    function Parent(this: Handle) {
      let count = 0
      return ({ children }: { children: RemixNode }) => {
        parentRenderCount++
        return (
          <div>
            <h1>Parent</h1>
            <button
              on={dom.click(() => {
                count++
                this.render()
              })}
            >
              {count}
            </button>
            {children}
          </div>
        )
      }
    }

    function Child() {
      childRenderCount++
      return <div>Child</div>
    }

    render(
      <Parent>
        <Child />
      </Parent>,
      element,
    )

    expect(parentRenderCount).toBe(1)
    expect(childRenderCount).toBe(1)

    let button = element.querySelector('button')!
    button.click()
    flush()

    expect(parentRenderCount).toBe(2)
    expect(childRenderCount).toBe(1)
  })

  it('re-renders context consumers but skips intermediate components', () => {
    let element = document.createElement('div')
    let parentRenderCount = 0
    let intermediateComponentRenderCount = 0
    let consumerRenderCount = 0

    function Parent(this: Handle<number>) {
      let count = 0
      return ({ children }: { children: RemixNode }) => {
        this.context.set(count)
        parentRenderCount++
        return (
          <div>
            <button
              on={dom.click(() => {
                count++
                this.render()
              })}
            >
              {count}
            </button>
            {children}
          </div>
        )
      }
    }

    function IntermediateComponent({ children }: { children: RemixNode }) {
      intermediateComponentRenderCount++
      return <div>IntermediateComponent {children}</div>
    }

    function Consumer(this: Handle) {
      let count = this.context.get(Parent)
      consumerRenderCount++
      return <div>Consumer: {count}</div>
    }

    render(
      <Parent>
        <IntermediateComponent>
          <Consumer />
        </IntermediateComponent>
      </Parent>,
      element,
    )

    expect(parentRenderCount).toBe(1)
    expect(intermediateComponentRenderCount).toBe(1)
    expect(consumerRenderCount).toBe(1)

    let button = element.querySelector('button')!
    button.click()
    flush()

    expect(parentRenderCount).toBe(2)
    expect(intermediateComponentRenderCount).toBe(1)
    expect(consumerRenderCount).toBe(2)
  })

  it('re-renders components in props.children if they also schedule an update in the same render', () => {
    let element = document.createElement('div')
    let parentRenderCount = 0
    let childRenderCount = 0

    let emitter = new EventTarget()

    function Parent(this: Handle<number>) {
      let count = 0

      emitter.addEventListener('update', () => {
        count++
        this.render()
      })

      return ({ children }: { children: RemixNode }) => {
        parentRenderCount++
        return <div>Parent: {children}</div>
      }
    }

    function Child(this: Handle) {
      let count = 0

      return () => {
        childRenderCount++
        emitter.addEventListener('update', () => {
          count++
          this.render()
        })
        return <div>Child</div>
      }
    }

    render(
      <Parent>
        <Child />
      </Parent>,
      element,
    )

    expect(parentRenderCount).toBe(1)
    expect(childRenderCount).toBe(1)

    emitter.dispatchEvent(new Event('update'))
    flush()

    expect(parentRenderCount).toBe(2)
    expect(childRenderCount).toBe(2)
  })

  it('handles multiple components updating from the same event with context', () => {
    let element = document.createElement('div')
    let parentRenderCount = 0
    let childRenderCount = 0
    let grandchildRenderCount = 0

    // Simulating Menu structure where multiple components respond to same event
    function MenuLike(this: Handle<{ isOpen: boolean }>) {
      let isOpen = false

      return ({ children }: { children: RemixNode }) => {
        parentRenderCount++
        this.context.set({ isOpen })

        return (
          <div
            on={dom.click(() => {
              isOpen = !isOpen
              this.render()
            })}
          >
            <span>Menu isOpen: {isOpen ? 'true' : 'false'}</span>
            {children}
          </div>
        )
      }
    }

    function MenuItemLike(this: Handle) {
      let focused = false

      return ({ children }: { children: RemixNode }) => {
        childRenderCount++
        let menuContext = this.context.get(MenuLike)

        return (
          <div
            on={dom.click(() => {
              focused = true
              this.render()
            })}
          >
            <span>
              MenuItem focused: {focused ? 'true' : 'false'}, menu open:{' '}
              {menuContext.isOpen ? 'true' : 'false'}
            </span>
            {children}
          </div>
        )
      }
    }

    function NestedItemLike(this: Handle) {
      return () => {
        grandchildRenderCount++
        let menuContext = this.context.get(MenuLike)
        return <span>Nested item, menu open: {menuContext.isOpen ? 'true' : 'false'}</span>
      }
    }

    render(
      <MenuLike>
        <MenuItemLike>
          <NestedItemLike />
        </MenuItemLike>
      </MenuLike>,
      element,
    )

    expect(parentRenderCount).toBe(1)
    expect(childRenderCount).toBe(1)
    expect(grandchildRenderCount).toBe(1)

    // Click on menu item - both Menu and MenuItem should update
    let menuItemDiv = element.querySelectorAll('div')[1]
    menuItemDiv.click()
    flush()

    // Parent updates (context provider)
    expect(parentRenderCount).toBe(2)
    // Child updates (self update)
    expect(childRenderCount).toBe(2)
    // Grandchild updates (context consumer)
    expect(grandchildRenderCount).toBe(2)

    // Verify state is correct
    expect(element.innerHTML).toContain('Menu isOpen: true')
    expect(element.innerHTML).toContain('MenuItem focused: true')
    expect(element.innerHTML).toContain('menu open: true')
  })
})

describe('text nodes', () => {
  it('should render in the right order', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div>
          <span>span content</span> text content
        </div>
      )
    }

    render(<App />, element)

    expect(element.innerHTML).toBe('<div><span>span content</span> text content</div>')
  })

  it('handles mixed text and elements correctly', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div>
          first
          <span>middle</span>
          last
        </div>
      )
    }

    render(<App />, element)
    expect(element.innerHTML).toBe('<div>first<span>middle</span>last</div>')
  })

  it('normalizes boolean children to render nothing', () => {
    let element = document.createElement('div')

    function App() {
      return (
        <div>
          {true}
          {false}a{true}b{false}c
        </div>
      )
    }

    render(<App />, element)

    expect(element.innerHTML).toBe('<div>abc</div>')
  })
})

describe('batched effects processing', () => {
  it('processes refs and events after all DOM updates in batch', () => {
    let element = document.createElement('div')
    let refCallOrder: string[] = []
    let eventCallOrder: string[] = []
    let domAtRefCall: string[] = []

    function Parent(this: Handle) {
      let count = 0
      return ({ children }: { children: RemixNode }) => {
        return (
          <div
            data-parent={`parent-${count}`}
            ref={(el) => {
              refCallOrder.push('parent-ref')
              // Capture what the DOM looks like when this ref is called
              domAtRefCall.push(element.innerHTML)
              return () => {
                refCallOrder.push('parent-ref-cleanup')
              }
            }}
            on={dom.click(() => {
              count++
              eventCallOrder.push('parent-event')
              this.render()
            })}
          >
            Parent: {count}
            {children}
          </div>
        )
      }
    }

    function Child() {
      return (
        <div
          data-child="child-element"
          ref={(el) => {
            refCallOrder.push('child-ref')
            // Capture what the DOM looks like when this ref is called
            domAtRefCall.push(element.innerHTML)
            return () => {
              refCallOrder.push('child-ref-cleanup')
            }
          }}
          on={dom.click(() => {
            eventCallOrder.push('child-event')
          })}
        >
          Child content
        </div>
      )
    }

    // Initial render
    render(
      <Parent>
        <Child />
      </Parent>,
      element,
    )

    // Both refs should be called, and DOM should be fully updated when refs are called
    // Child ref is called first due to depth-first processing
    expect(refCallOrder).toEqual(['child-ref', 'parent-ref'])
    expect(domAtRefCall.length).toBe(2)

    // When child ref was called, both parent and child should be in DOM
    expect(domAtRefCall[0]).toContain('data-parent="parent-0"')
    expect(domAtRefCall[0]).toContain('data-child="child-element"')

    // When parent ref was called, both should still be there
    expect(domAtRefCall[1]).toContain('data-parent="parent-0"')
    expect(domAtRefCall[1]).toContain('data-child="child-element"')

    // Reset tracking arrays
    refCallOrder = []
    eventCallOrder = []
    domAtRefCall = []

    // Now trigger an update that will re-render parent (which causes child to re-render via diffing)
    let parentDiv = element.querySelector('[data-parent]') as HTMLDivElement
    parentDiv.click()
    flush()

    // No new refs should be called since elements are reused
    expect(refCallOrder).toEqual([])
    expect(eventCallOrder).toEqual(['parent-event'])

    // The DOM should now show updated parent data
    expect(element.innerHTML).toContain('data-parent="parent-1"')
    expect(element.innerHTML).toContain('Parent: 1')
  })
})

describe('NEEDS_UPDATE flag handling', () => {
  it('should not ignore subsequent render calls after deduplication', () => {
    let element = document.createElement('div')
    let parentRenderCount = 0
    let childRenderCount = 0
    let childHandle: Handle | null = null

    function Parent(this: Handle) {
      let count = 0
      return ({ children }: { children: RemixNode }) => {
        parentRenderCount++
        return (
          <div>
            <button
              on={dom.click(() => {
                count++
                // Schedule parent update first
                this.render()
              })}
            >
              Parent: {count}
            </button>
            {children}
          </div>
        )
      }
    }

    function Child(this: Handle) {
      childHandle = this
      let count = 0
      return () => {
        childRenderCount++
        return (
          <div>
            <button
              on={dom.click(() => {
                count++
                this.render()
              })}
            >
              Child: {count}
            </button>
          </div>
        )
      }
    }

    render(
      <Parent>
        <Child />
      </Parent>,
      element,
    )

    expect(parentRenderCount).toBe(1)
    expect(childRenderCount).toBe(1)

    // Simulate the problematic scenario:
    // 1. Child schedules update (sets NEEDS_UPDATE flag)
    // 2. Parent schedules update before microtask flush
    // 3. Deduplication removes child task but doesn't clear NEEDS_UPDATE flag
    // 4. Parent renders, which may update child via diff
    // 5. Child's NEEDS_UPDATE flag is still set

    // Schedule child update first
    childHandle!.render()
    // Immediately schedule parent update (before microtask flush)
    let parentButton = element.querySelector('button')!
    parentButton.click()

    // Flush the queue - parent should render, child task should be deduplicated
    flush()

    expect(parentRenderCount).toBe(2)
    // Child should have rendered once more due to parent's render
    expect(childRenderCount).toBe(2)

    // Now try to schedule another child update - this should NOT be ignored
    let initialChildRenderCount = childRenderCount
    childHandle!.render()
    flush()

    // This assertion will fail with the bug - child render will be ignored
    // because NEEDS_UPDATE flag is still set from the deduplicated task
    expect(childRenderCount).toBe(initialChildRenderCount + 1)
  })
})

describe('keyed children diffing', () => {
  it('reorders existing keyed children by moving DOM nodes (ABCD -> CDAB)', () => {
    let element = document.createElement('div')

    let items = ['A', 'B', 'C', 'D']

    function App() {
      return (
        <ul>
          {items.map((id) => (
            <li key={id} data-id={id}>
              {id}
            </li>
          ))}
        </ul>
      )
    }

    let root = render(<App />, element)
    let getOrder = () =>
      Array.from(element.querySelectorAll('li'))
        .map((n) => n.textContent)
        .join('')
    expect(getOrder()).toBe('ABCD')

    // Reorder only - no insertions or deletions
    items = ['C', 'D', 'A', 'B']
    root.update(<App />)

    expect(getOrder()).toBe('CDAB')
  })

  it('inserts new keyed children among stable keys (ABD -> AxByD)', () => {
    let element = document.createElement('div')

    let items: Array<string> = ['A', 'B', 'D']

    function App() {
      return (
        <ul>
          {items.map((id) => (
            <li key={id} data-id={id}>
              {id}
            </li>
          ))}
        </ul>
      )
    }

    let root = render(<App />, element)
    let getOrder = () =>
      Array.from(element.querySelectorAll('li'))
        .map((n) => n.textContent)
        .join('')
    expect(getOrder()).toBe('ABD')

    // Insert x between A and B, y between B and D
    items = ['A', 'x', 'B', 'y', 'D']
    root.update(<App />)

    expect(getOrder()).toBe('AxByD')
  })

  it('handles mixed keyed and unkeyed children ordering (A,X,B -> B,X,A)', () => {
    let element = document.createElement('div')

    let order: Array<'A' | 'B' | 'X'> = ['A', 'X', 'B']

    function App() {
      return (
        <ul>
          {order.map((id, index) => {
            if (id === 'X') {
              // Unkeyed item
              return <li data-id="X">X</li>
            }
            return (
              <li key={id} data-id={id}>
                {id}
              </li>
            )
          })}
        </ul>
      )
    }

    let root = render(<App />, element)
    let getOrder = () =>
      Array.from(element.querySelectorAll('li'))
        .map((n) => n.textContent)
        .join('')
    expect(getOrder()).toBe('AXB')

    order = ['B', 'X', 'A']
    root.update(<App />)

    expect(getOrder()).toBe('BXA')
  })

  it('does not recall refs for moved keyed nodes', () => {
    let element = document.createElement('div')
    let items = ['A', 'B', 'C']
    let mountCount = 0
    let cleanupCount = 0

    function App() {
      return (
        <ul>
          {items.map((id) => (
            <li
              key={id}
              ref={() => {
                mountCount++
                return () => {
                  cleanupCount++
                }
              }}
            >
              {id}
            </li>
          ))}
        </ul>
      )
    }

    let root = render(<App />, element)
    expect(mountCount).toBe(3)
    expect(cleanupCount).toBe(0)

    // Reorder without creating/removing nodes
    items = ['C', 'A', 'B']
    root.update(<App />)

    expect(mountCount).toBe(3)
    expect(cleanupCount).toBe(0)
  })
})