import { describe, it, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { WysiwygBuilderPage } from '@/components/wysiwyg/WysiwygBuilderPage'

function getBoxes(ids: string[]) {
  return ids.map((id) => {
    const el = screen.getByTestId(`obj-${id}`) as HTMLElement
    const s = el.style as CSSStyleDeclaration
    return {
      id,
      left: parseInt(s.left || '0', 10),
      top: parseInt(s.top || '0', 10),
      width: parseInt(s.width || '0', 10),
      height: parseInt(s.height || '0', 10),
    }
  })
}

function snap8(v: number) { return Math.round(v / 8) * 8 }

async function addTextAt(x: number, y: number) {
  fireEvent.click(screen.getByRole('button', { name: /^Add Text$/i }))
  const all = await screen.findAllByTestId(/obj-text-/)
  const obj = all[all.length - 1] as HTMLElement
  // select the newly added object
  fireEvent.mouseDown(obj, { clientX: x, clientY: y })
  fireEvent.mouseUp(screen.getByTestId('wysiwyg-canvas'))
  // move via props inputs (X/Y) for the selected object
  const xInput = screen.getByLabelText('X') as HTMLInputElement
  const yInput = screen.getByLabelText('Y') as HTMLInputElement
  fireEvent.change(xInput, { target: { value: String(x) } })
  fireEvent.change(yInput, { target: { value: String(y) } })
  return obj.getAttribute('data-testid')!.replace('obj-', '')
}

describe('Canvas multiselect keyboard nudge', () => {
  it('ArrowRight applies 1px then grid snap to both (no modifier)', async () => {
    render(<WysiwygBuilderPage />)
    const id1 = await addTextAt(60, 60)
    const id2 = await addTextAt(140, 60)

    const canvas = screen.getByTestId('wysiwyg-canvas')
    // marquee select both
    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
    fireEvent.mouseUp(canvas)

    const before = getBoxes([id1, id2])
    fireEvent.keyDown(canvas, { key: 'ArrowRight' })
    const after = getBoxes([id1, id2])
    const expLeft0 = snap8(before[0].left + 1)
    const dx = expLeft0 - before[0].left
    after.forEach((b, i) => {
      expect(b.left).toBe(before[i].left + dx)
      expect(b.top).toBe(before[i].top)
    })
  })

  it('Shift+ArrowUp moves exactly -1px on Y for both (no snap)', async () => {
    render(<WysiwygBuilderPage />)
    const id1 = await addTextAt(60, 60)
    const id2 = await addTextAt(140, 60)

    const canvas = screen.getByTestId('wysiwyg-canvas')
    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
    fireEvent.mouseUp(canvas)

    const before = getBoxes([id1, id2])
    fireEvent.keyDown(canvas, { key: 'ArrowUp', shiftKey: true })
    const after = getBoxes([id1, id2])
    after.forEach((b, i) => {
      expect(b.top).toBe(before[i].top - 1)
      expect(b.left).toBe(before[i].left)
    })
  })

  it('Alt+ArrowRight moves +16px then snaps to grid for both', async () => {
    render(<WysiwygBuilderPage />)
    const id1 = await addTextAt(60, 60)
    const id2 = await addTextAt(140, 60)

    const canvas = screen.getByTestId('wysiwyg-canvas')
    fireEvent.mouseDown(canvas, { clientX: 50, clientY: 50 })
    fireEvent.mouseMove(canvas, { clientX: 240, clientY: 140 })
    fireEvent.mouseUp(canvas)

    const before = getBoxes([id1, id2])
    fireEvent.keyDown(canvas, { key: 'ArrowRight', altKey: true })
    const after = getBoxes([id1, id2])
    const expLeft0 = snap8(before[0].left + 16)
    const dx = expLeft0 - before[0].left
    after.forEach((b, i) => {
      expect(b.left).toBe(before[i].left + dx)
      expect(b.top).toBe(before[i].top)
    })
  })
})