import { describe, it, expect } from 'vitest'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { Canvas } from '@/components/wysiwyg/Canvas'
import type { Frame } from '@/lib/wysiwyg/schema'

function makeFrame(): Frame {
  return {
    id: 'f1',
    width: 320,
    height: 240,
    background: '#ffffff',
    layers: [
      {
        id: 'l1',
        name: 'L1',
        visible: true,
        locked: false,
        objects: [
          { id: 'o1', type: 'image', x: 16, y: 16, width: 32, height: 32, rotate: 0, zIndex: 0, props: { src: 'a', alt: '' } },
          { id: 'o2', type: 'image', x: 80, y: 16, width: 32, height: 32, rotate: 0, zIndex: 1, props: { src: 'b', alt: '' } },
        ],
      },
    ],
  }
}

describe('WYSIWYG Canvas a11y live region', () => {
  it('announces selection count and guideline position changes', async () => {
    const frame = makeFrame()
    const { getByTestId } = render(<Canvas frame={frame} />)

    const live = getByTestId('aria-live')

    // initial selection exists (first object)
    await waitFor(() => {
      expect(live.textContent).toMatch(/선택\s*1개/)
    })

    // add second selection via Shift+click
    fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16, shiftKey: true })
    await waitFor(() => {
      expect(live.textContent).toMatch(/선택\s*2개/)
    })

    // start dragging o2 to trigger guide updates
    const canvas = getByTestId('wysiwyg-canvas')
    fireEvent.mouseDown(getByTestId('obj-o2'), { clientX: 80, clientY: 16 })
    fireEvent.mouseMove(canvas, { clientX: 96, clientY: 24 })

    await waitFor(() => {
      // guide should be visible and aria-live includes guide coordinates
      const t = live.textContent || ''
      expect(t).toMatch(/가이드\s*x=\d+/)
      expect(t).toMatch(/y=\d+/)
    })

    fireEvent.mouseUp(canvas)
  })
})