import { createElement, Fragment, type ReactNode } from 'react'
import { renderToStaticMarkup } from 'react-dom/server'
import { expect, test } from 'vitest'
import { Option } from 'effect'
import { Ui } from '@playfast/reform'
import {
  Wire,
  type WireNode,
  type WirePatch,
  type WireProp,
  type WireTree,
} from '@playfast/reform/internal'
import { makeRemoteServer } from './server'
import { remoteViews, renderWireTree } from './client'
import {
  bumpedBy,
  CounterUi,
  counterScene,
  listScene,
  OptionalUi,
  optionScene,
  slottedScene,
  structureCounterScene,
} from './fixtures'

const draw = (node: ReactNode): void =>
  void renderToStaticMarkup(createElement(Fragment, null, node))

const dataOf = (node: WireNode, name: string): WireProp | undefined =>
  node.props.find((prop) => prop._tag === 'Data' && prop.name === name)

const eventOf = (node: WireNode, name: string): Extract<WireProp, { _tag: 'Event' }> | undefined =>
  node.props.find(
    (prop): prop is Extract<WireProp, { _tag: 'Event' }> =>
      prop._tag === 'Event' && prop.name === name,
  )

const byId = (tree: WireTree, id: string): WireNode | undefined =>
  tree.find((node) => node.id === id)

const upsertIds = (patches: ReadonlyArray<WirePatch>): ReadonlyArray<string> =>
  patches.flatMap((patch) => (patch._tag === 'Upsert' ? [patch.node.id] : []))

const deleteIds = (patches: ReadonlyArray<WirePatch>): ReadonlyArray<string> =>
  patches.flatMap((patch) => (patch._tag === 'Delete' ? [patch.id] : []))

test('a scene renders to a wire tree with schema-encoded props and a trigger handle', async () => {
  const server = makeRemoteServer(counterScene())
  try {
    const tree = await server.render()
    expect(tree).toHaveLength(1)
    const root = tree[0]!
    expect(root.id).toBe('0')
    expect(root.name).toBe('Counter')
    expect(root.parentId).toBeNull()
    expect(dataOf(root, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 0 })
    expect(eventOf(root, 'bump')).toEqual({ _tag: 'Event', name: 'bump', handle: '0:bump' })
  } finally {
    await server.dispose()
  }
})

test('invoking a trigger handle dispatches into the runtime and the next render reflects it', async () => {
  const server = makeRemoteServer(counterScene())
  try {
    await server.render()
    await server.invoke('0:bump', { by: 5 })
    await server.invoke('0:bump', { by: 2 })
    const tree = await server.render()
    expect(dataOf(tree[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 7 })
  } finally {
    await server.dispose()
  }
})

test('a mount(...)-returning body registers its event from structure.events and invoking it dispatches', async () => {
  const server = makeRemoteServer(structureCounterScene())
  try {
    const tree = await server.render()
    const root = tree[0]!
    expect(root.name).toBe('Counter')
    expect(dataOf(root, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 0 })
    expect(eventOf(root, 'bump')).toEqual({ _tag: 'Event', name: 'bump', handle: '0:bump' })

    await server.invoke('0:bump', { by: 4 })
    const next = await server.render()
    expect(dataOf(next[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 4 })
  } finally {
    await server.dispose()
  }
})

test('the wire payload is validated at the seam — a bad payload rejects', async () => {
  const server = makeRemoteServer(counterScene())
  try {
    await server.render()
    await expect(server.invoke('0:bump', { by: 'nope' })).rejects.toBeDefined()
  } finally {
    await server.dispose()
  }
})

test('renderDiff streams patches a client folds back to the current tree', async () => {
  const server = makeRemoteServer(counterScene())
  try {
    const first = await server.renderDiff()
    const afterFirst = Wire.apply([], first)
    expect(dataOf(afterFirst[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 0 })

    await server.invoke('0:bump', { by: 3 })
    const second = await server.renderDiff()
    expect(second).toHaveLength(1)
    expect(second[0]?._tag).toBe('Upsert')
    const afterSecond = Wire.apply(afterFirst, second)
    expect(dataOf(afterSecond[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 3 })
  } finally {
    await server.dispose()
  }
})

test('end to end: client reconstructs props + event callbacks that drive the server', async () => {
  const server = makeRemoteServer(counterScene())
  const captured: {
    props?: Record<string, unknown>
    events?: Record<string, (p: { by: number }) => void>
  } = {}
  const sent: Array<[string, unknown]> = []
  try {
    const tree = await server.render()
    draw(
      renderWireTree(tree, {
        views: remoteViews<{ Counter: typeof CounterUi }>({
          Counter: Ui.make(CounterUi, (props, _slots, events) => {
            captured.props = props
            captured.events = events
            return null
          }),
        }),
        invoke: (handle, payload) => void sent.push([handle, payload]),
      }),
    )

    expect(captured.props).toEqual({ count: 0 })
    captured.events?.['bump']?.({ by: 4 })
    expect(sent).toEqual([['0:bump', { by: 4 }]])

    await server.invoke(sent[0]![0], sent[0]![1])
    const next = await server.render()
    expect(dataOf(next[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 4 })
  } finally {
    await server.dispose()
  }
})

test('boot events are applied before the first render', async () => {
  const server = makeRemoteServer(counterScene([bumpedBy(10), bumpedBy(5)]))
  try {
    const tree = await server.render()
    expect(dataOf(tree[0]!, 'count')).toEqual({ _tag: 'Data', name: 'count', value: 15 })
  } finally {
    await server.dispose()
  }
})

test('a slotted child renders nested with its own encoded props and handle', async () => {
  const server = makeRemoteServer(slottedScene())
  try {
    const tree = await server.render()
    expect(tree).toHaveLength(2)

    const shell = byId(tree, '0')!
    expect(shell.name).toBe('Shell')
    expect(shell.parentId).toBeNull()

    const panel = byId(tree, '0.Main.0')!
    expect(panel.name).toBe('Panel')
    expect(panel.parentId).toBe('0')
    expect(panel.slot).toBe('Main')
    expect(panel.childIndex).toBe(0)
    expect(dataOf(panel, 'greeting')).toEqual({ _tag: 'Data', name: 'greeting', value: 'hi' })
    expect(eventOf(panel, 'greet')?.handle).toBe('0.Main.0:greet')
  } finally {
    await server.dispose()
  }
})

test("invoking a nested child's trigger updates the child's own state", async () => {
  const server = makeRemoteServer(slottedScene())
  try {
    await server.render()
    await server.invoke('0.Main.0:greet', { text: 'yo' })
    const tree = await server.render()
    expect(dataOf(byId(tree, '0.Main.0')!, 'greeting')).toEqual({
      _tag: 'Data',
      name: 'greeting',
      value: 'yo',
    })
  } finally {
    await server.dispose()
  }
})

test('two events on one node register distinct handles and each fires independently', async () => {
  const server = makeRemoteServer(slottedScene())
  try {
    await server.render()
    const before = byId(await server.render(), '0.Main.0')!
    expect(eventOf(before, 'greet')?.handle).toBe('0.Main.0:greet')
    expect(eventOf(before, 'clear')?.handle).toBe('0.Main.0:clear')

    await server.invoke('0.Main.0:greet', { text: 'hello' })
    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({
      value: 'hello',
    })

    await server.invoke('0.Main.0:clear', {})
    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({
      value: '',
    })
  } finally {
    await server.dispose()
  }
})

test('a list renders one child per item under a single slot, in order', async () => {
  const server = makeRemoteServer(listScene())
  try {
    const tree = await server.render()
    expect(tree).toHaveLength(4)
    expect(byId(tree, '0')!.name).toBe('List')
    expect(byId(tree, '0.Bar.0')!.slot).toBe('Bar')

    const items = Wire.childrenOf(tree, '0').filter((node) => node.slot === 'Item')
    expect(items.map((node) => node.id)).toEqual(['0.Item.a', '0.Item.b'])
    expect(items.map((node) => node.childIndex)).toEqual([0, 1])
    expect(dataOf(items[0]!, 'label')).toMatchObject({ value: 'A' })
    expect(dataOf(items[1]!, 'label')).toMatchObject({ value: 'B' })
  } finally {
    await server.dispose()
  }
})

test('adding an item emits an Upsert for the new node; removing emits a Delete', async () => {
  const server = makeRemoteServer(listScene())
  try {
    await server.renderDiff()

    await server.invoke('0.Bar.0:add', { id: 'c', label: 'C' })
    const added = await server.renderDiff()
    expect(deleteIds(added)).toEqual([])
    expect(upsertIds(added)).toContain('0.Item.c')

    await server.invoke('0.Item.c:remove', {})
    const removed = await server.renderDiff()
    expect(deleteIds(removed)).toEqual(['0.Item.c'])
  } finally {
    await server.dispose()
  }
})

test("a removed node's handle is revoked — a stale client invocation rejects", async () => {
  const server = makeRemoteServer(listScene())
  try {
    await server.renderDiff()
    await server.invoke('0.Item.b:remove', {})
    await server.renderDiff()
    await expect(server.invoke('0.Item.b:remove', {})).rejects.toBeDefined()
  } finally {
    await server.dispose()
  }
})

test('an Option prop round-trips through JSON as a real Option (symmetric schema decode)', async () => {
  const server = makeRemoteServer(optionScene(Option.some('hi')))
  const captured: { label?: unknown } = {}
  try {
    const tree = await server.render()
    const wire: WireTree = JSON.parse(JSON.stringify(tree))
    draw(
      renderWireTree(wire, {
        views: remoteViews<{ Optional: typeof OptionalUi }>({
          Optional: Ui.make(OptionalUi, (props) => {
            captured.label = props.label
            return null
          }),
        }),
        invoke: () => undefined,
      }),
    )
    expect(Option.isOption(captured.label)).toBe(true)
    expect(captured.label).toStrictEqual(Option.some('hi'))
  } finally {
    await server.dispose()
  }
})

test('an Option.none prop round-trips through JSON as Option.none()', async () => {
  const server = makeRemoteServer(optionScene(Option.none()))
  const captured: { label?: unknown } = {}
  try {
    const wire: WireTree = JSON.parse(JSON.stringify(await server.render()))
    draw(
      renderWireTree(wire, {
        views: remoteViews<{ Optional: typeof OptionalUi }>({
          Optional: Ui.make(OptionalUi, (props) => ((captured.label = props.label), null)),
        }),
        invoke: () => undefined,
      }),
    )
    expect(captured.label).toStrictEqual(Option.none())
  } finally {
    await server.dispose()
  }
})

test('a data-only change upserts only the changed node, leaving siblings untouched', async () => {
  const server = makeRemoteServer(slottedScene())
  try {
    await server.renderDiff()
    await server.invoke('0.Main.0:greet', { text: 'changed' })
    const patches = await server.renderDiff()
    expect(upsertIds(patches)).toEqual(['0.Main.0'])
    expect(deleteIds(patches)).toEqual([])
  } finally {
    await server.dispose()
  }
})