import { test, expect } from '@playwright/test'

const wysiwygUrl = '/en/wysiwyg'

test.describe('WYSIWYG - Guides toggle with group rotate + snap + live region', () => {
  test('guides ON: after multiselect and rotate, dragging snaps and aria-live shows guides + selection', async ({ page }) => {
    await page.goto(wysiwygUrl)

    const canvas = page.getByTestId('wysiwyg-canvas')
    await expect(canvas).toBeVisible()

    const addText = page.getByRole('button', { name: /^Add Text$/i })
    await addText.click()
    await addText.click()

    // Turn on Guides
    const guidesBtn = page.getByRole('button', { name: /Guides/i })
    await guidesBtn.click()

    // Marquee select both
    const cbox = await canvas.boundingBox()
    if (!cbox) throw new Error('canvas not found')
    await page.mouse.move(cbox.x + 40, cbox.y + 40)
    await page.mouse.down()
    await page.mouse.move(cbox.x + 260, cbox.y + 160)
    await page.mouse.up()

    const live = page.getByTestId('aria-live')
    await expect(live).toContainText(/선택\s*2개/)

    // Rotate ~15deg
    const rotateHandle = page.locator('[data-testid^="rotate-handle-"]').first()
    const hbox = await rotateHandle.boundingBox()
    if (!hbox) throw new Error('rotate handle not found')
    await page.mouse.move(hbox.x + 5, hbox.y + 5)
    await page.mouse.down()
    await page.mouse.move(hbox.x + 40, hbox.y + 5)
    await expect(live).toContainText(/가이드\s*x=|y=/)
    await page.mouse.up()

    // Drag group by ~13px on X to verify grid snap still applies with guides
    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
    const tbox = await target.boundingBox()
    if (!tbox) throw new Error('target not found')

    // Read before
    const leftsBefore = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10)))

    await page.mouse.move(tbox.x + 5, tbox.y + 5)
    await page.mouse.down()
    await page.mouse.move(tbox.x + 5 + 13, tbox.y + 5)
    await page.mouse.up()

    const leftsAfter = await page.locator('[data-testid^="obj-text-"]').evaluateAll((nodes) => nodes.map(n => parseInt((n as HTMLElement).style.left || '0', 10)))
    const dx = leftsAfter[1] - leftsBefore[1]
    expect(dx).toBe(16)
    expect(leftsAfter[0] - leftsBefore[0]).toBe(16)
  })
})