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

const wysiwygUrl = '/en/wysiwyg'

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

async function getBoxStyles(page: import('@playwright/test').Page, nth: number) {
  const el = page.locator('[data-testid^="obj-text-"]').nth(nth)
  const left = await el.evaluate((n) => parseInt((n as HTMLElement).style.left || '0', 10))
  const top = await el.evaluate((n) => parseInt((n as HTMLElement).style.top || '0', 10))
  const width = await el.evaluate((n) => parseInt((n as HTMLElement).style.width || '0', 10))
  const height = await el.evaluate((n) => parseInt((n as HTMLElement).style.height || '0', 10))
  const transform = await el.evaluate((n) => (n as HTMLElement).style.transform || '')
  return { left, top, width, height, transform }
}

test.describe('WYSIWYG - Group resize/rotate and guide live region', () => {
  test('group E handle resizes both by snapped delta without shifting x', 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()

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

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

    const b0 = await getBoxStyles(page, 0)
    const b1 = await getBoxStyles(page, 1)

    // Drag east handle of second by +16px
    const target = page.locator('[data-testid^="obj-text-"]').nth(1)
    const tbox = await target.boundingBox()
    if (!tbox) throw new Error('target not found')
    await page.mouse.move(tbox.x + tbox.width - 5, tbox.y + 5)
    await page.mouse.down()
    await page.mouse.move(tbox.x + tbox.width + 16, tbox.y + 5)
    await page.mouse.up()

    const a0 = await getBoxStyles(page, 0)
    const a1 = await getBoxStyles(page, 1)

    const dw = snap8(b1.width + 16) - b1.width
    expect(a0.left).toBe(b0.left)
    expect(a1.left).toBe(b1.left)
    expect(a0.width).toBe(b0.width + dw)
    expect(a1.width).toBe(b1.width + dw)
  })

  test('rotate handle snaps to 15deg and live region includes guide coords while dragging', 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()

    const target = page.locator('[data-testid^="obj-text-"]').first()
    const tbox = await target.boundingBox()
    if (!tbox) throw new Error('target not found')

    // Select
    await target.click()

    // Drag rotate handle horizontally to cause rotation ~15deg (snapped)
    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)
    const live = page.getByTestId('aria-live')
    await expect(live).toContainText(/가이드\s*x=|y=/)
    await page.mouse.up()

    const a = await getBoxStyles(page, 0)
    expect(a.transform).toMatch(/rotate\(15deg\)|rotate\(30deg\)/)
  })
})