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

import { hydrated } from '../hydration/hydrated.ts'
import { renderToStream } from '../ssr/stream.ts'
import { run } from '../run.ts'
import { flushRenderQueue as flush } from '../reconcile.ts'
import { drain } from './utils.ts'
import { Frame } from '../frame/frame.tsx'

describe('hydration e2e with new renderToStream', () => {
  let container: HTMLDivElement

  beforeEach(() => {
    container = document.createElement('div')
    document.body.appendChild(container)
  })

  afterEach(() => {
    document.body.removeChild(container)
  })

  it('hydrates a simple counter component', async () => {
    function Counter(this: Handle, { initialCount }: { initialCount: number }) {
      let count = initialCount

      return ({ label: currentLabel }: { label: string }) => (
        <button
          type="button"
          on={dom.click(() => {
            count++
            this.render()
          })}
        >
          {currentLabel}: {count}
        </button>
      )
    }

    let HydratedCounter = hydrated('/js/counter.js#Counter', Counter)

    let stream = renderToStream(
      <div>
        <h1>Counter Demo</h1>
        <HydratedCounter initialCount={0} label="Clicks" />
      </div>,
    )

    let html = await drain(stream)

    // Verify server-rendered content includes hydration script
    expect(html).toContain('<h1>Counter Demo</h1>')
    expect(html).toContain('<button type="button">Clicks: 0</button>')
    expect(html).toContain('<script type="application/json" rmx-hydrated>')
    expect(html).toContain('"moduleUrl": "/js/counter.js"')
    expect(html).toContain('"exportName": "Counter"')
    expect(html).toContain('"initialCount": 0')
    expect(html).toContain('"label": "Clicks"')
    expect(html).toContain('"instanceId": "h1"')

    // Set up DOM with server-rendered content
    container.innerHTML = html

    // Get references to DOM elements before hydration
    let h1 = container.querySelector('h1')
    let button = container.querySelector('button') as HTMLButtonElement
    let script = container.querySelector('script[rmx-hydrated]')

    expect(h1).toBeTruthy()
    expect(button).toBeTruthy()
    expect(script).toBeTruthy()
    expect(button.textContent).toBe('Clicks: 0')

    // Hydrate the application
    await run(container, { loadModule: () => HydratedCounter })

    // Verify DOM nodes were preserved (not replaced)
    expect(container.querySelector('h1')).toBe(h1)
    expect(container.querySelector('button')).toBe(button)

    // Verify hydration script was removed
    expect(container.querySelector('script[rmx-hydrated]')).toBeNull()

    // Test interactivity
    let hydratedButton = container.querySelector('button') as HTMLButtonElement
    expect(hydratedButton.textContent).toBe('Clicks: 0')

    // Click the button
    hydratedButton.click()
    flush()

    // Counter should increment
    expect(hydratedButton.textContent).toBe('Clicks: 1')

    // Click again
    hydratedButton.click()
    flush()

    // Counter should increment again
    expect(hydratedButton.textContent).toBe('Clicks: 2')
  })

  it('hydrates multiple components with unique IDs', async () => {
    // Create a toggle component
    function Toggle(
      this: Handle,
      { label, initialState }: { label: string; initialState: boolean },
    ) {
      let isOn = initialState

      return () => (
        <button
          type="button"
          on={dom.click(() => {
            isOn = !isOn
            this.render()
          })}
          style={{
            background: isOn ? 'green' : 'red',
            color: 'white',
            padding: '8px 16px',
          }}
        >
          {label}: {isOn ? 'ON' : 'OFF'}
        </button>
      )
    }

    let HydratedToggle = hydrated('/js/toggle.js#Toggle', Toggle)

    // Server-side render multiple instances
    let stream = renderToStream(
      <div>
        <h1>Toggle Switches</h1>
        <div class="toggles">
          <HydratedToggle label="Light" initialState={true} />
          <HydratedToggle label="Fan" initialState={false} />
          <HydratedToggle label="Heat" initialState={true} />
        </div>
      </div>,
    )

    let html = await drain(stream)

    // Verify each component has a unique instance ID
    expect(html).toContain('"instanceId": "h1"')
    expect(html).toContain('"instanceId": "h2"')
    expect(html).toContain('"instanceId": "h3"')

    // Verify initial states
    expect(html).toContain('Light: ON')
    expect(html).toContain('Fan: OFF')
    expect(html).toContain('Heat: ON')

    // Set up DOM
    container.innerHTML = html

    // Get button references
    let buttons = Array.from(container.querySelectorAll('button')) as HTMLButtonElement[]
    expect(buttons).toHaveLength(3)

    // Hydrate
    await run(container, {
      loadModule(moduleUrl, exportName) {
        if (moduleUrl === '/js/toggle.js' && exportName === 'Toggle') {
          return HydratedToggle
        }
        throw new Error(`Unknown module: ${moduleUrl}#${exportName}`)
      },
    })

    // Test each toggle independently
    let [lightButton, fanButton, heatButton] = buttons

    // Toggle light OFF
    lightButton.click()
    flush()
    expect(lightButton.textContent).toBe('Light: OFF')

    // Toggle fan ON
    fanButton.click()
    flush()
    expect(fanButton.textContent).toBe('Fan: ON')

    // Toggle heat OFF
    heatButton.click()
    flush()
    expect(heatButton.textContent).toBe('Heat: OFF')

    // Verify other buttons weren't affected
    expect(lightButton.textContent).toBe('Light: OFF')
    expect(fanButton.textContent).toBe('Fan: ON')
    expect(heatButton.textContent).toBe('Heat: OFF')
  })

  it('verifies instance ID adoption during hydration', async () => {
    // Component that exposes its handle ID
    function IdentifiableCounter(this: Handle, { label }: { label: string }) {
      let count = 0
      let instanceId = this.id // Capture the handle's ID

      return () => (
        <div class="counter-wrapper" data-instance-id={instanceId}>
          <span class="label">{label}</span>
          <button
            type="button"
            on={dom.click(() => {
              count++
              this.render()
            })}
          >
            Count: {count}
          </button>
          <span class="instance-id">ID: {instanceId}</span>
        </div>
      )
    }

    const HydratedIdentifiable = hydrated(
      '/js/identifiable.js#IdentifiableCounter',
      IdentifiableCounter,
    )

    // Server render with multiple instances
    const stream = renderToStream(
      <div>
        <h1>ID Adoption Test</h1>
        <HydratedIdentifiable label="First" />
        <HydratedIdentifiable label="Second" />
        <HydratedIdentifiable label="Third" />
      </div>,
    )

    const html = await drain(stream)

    // Verify hydration scripts have instance IDs
    expect(html).toContain('"instanceId": "h1"')
    expect(html).toContain('"instanceId": "h2"')
    expect(html).toContain('"instanceId": "h3"')

    // Set up DOM
    container.innerHTML = html

    // Extract the SSR-rendered instance IDs from data attributes
    const wrappers = container.querySelectorAll('.counter-wrapper')
    expect(wrappers).toHaveLength(3)

    const ssrIds = Array.from(wrappers).map((w) => w.getAttribute('data-instance-id'))
    expect(ssrIds[0]).toBe('h1')
    expect(ssrIds[1]).toBe('h2')
    expect(ssrIds[2]).toBe('h3')

    // Get DOM node references before hydration
    const firstWrapper = wrappers[0]
    const secondWrapper = wrappers[1]
    const thirdWrapper = wrappers[2]

    // Hydrate
    await run(container, {
      loadModule(moduleUrl, exportName) {
        if (moduleUrl === '/js/identifiable.js' && exportName === 'IdentifiableCounter') {
          return HydratedIdentifiable
        }
        throw new Error(`Unknown module: ${moduleUrl}#${exportName}`)
      },
    })

    // Verify DOM nodes were preserved (adopted, not replaced)
    const hydratedWrappers = container.querySelectorAll('.counter-wrapper')
    expect(hydratedWrappers[0]).toBe(firstWrapper)
    expect(hydratedWrappers[1]).toBe(secondWrapper)
    expect(hydratedWrappers[2]).toBe(thirdWrapper)

    // Verify instance IDs are still the same after hydration
    const hydratedIds = Array.from(hydratedWrappers).map((w) => w.getAttribute('data-instance-id'))
    expect(hydratedIds[0]).toBe('h1')
    expect(hydratedIds[1]).toBe('h2')
    expect(hydratedIds[2]).toBe('h3')

    // Click each button to trigger re-render and verify IDs remain stable
    const buttons = container.querySelectorAll('button') as NodeListOf<HTMLButtonElement>

    buttons[0].click()
    flush()
    expect(
      container.querySelector('.counter-wrapper[data-instance-id="h1"] button')?.textContent,
    ).toBe('Count: 1')

    buttons[1].click()
    flush()
    expect(
      container.querySelector('.counter-wrapper[data-instance-id="h2"] button')?.textContent,
    ).toBe('Count: 1')

    buttons[2].click()
    flush()
    expect(
      container.querySelector('.counter-wrapper[data-instance-id="h3"] button')?.textContent,
    ).toBe('Count: 1')

    // Verify IDs are still stable after interactions
    const finalWrappers = container.querySelectorAll('.counter-wrapper')
    const finalIds = Array.from(finalWrappers).map((w) => w.getAttribute('data-instance-id'))
    expect(finalIds).toEqual(['h1', 'h2', 'h3'])
  })
})

describe('styles', () => {
  it.todo('leaves string styles alone')
  it.todo('converts to style object after updates')
  it.todo('adopts styles from server')
  it.todo('uses adopted styles after hydration')
})

describe('head managed elements', () => {
  it.todo('adopts head managed elements correctly')
})

describe('Frame', () => {
  let container: HTMLDivElement

  beforeEach(() => {
    container = document.createElement('div')
    document.body.appendChild(container)
  })

  afterEach(() => {
    document.body.removeChild(container)
  })

  it('hydrates frames as automatic roots', async () => {
    // Server render with a blocking frame
    let stream = renderToStream(<Frame src="/test" />, {
      resolveFrame: () => <div>Content</div>,
    })

    let html = await drain(stream)
    container.innerHTML = html

    // Frame script should exist before hydration
    expect(container.querySelector('script[rmx-frame="f1"]')).toBeTruthy()

    // Hydrate
    await run(container, {
      loadModule: () => {
        throw new Error('No hydrated components in this test')
      },
    })

    // Frame script should be removed after hydration
    expect(container.querySelector('script[rmx-frame="f1"]')).toBeNull()
  })
})