import { describe, it, expect } from 'vitest'
import { exportFrame } from '@/lib/wysiwyg/export'
import type { Frame } from '@/lib/wysiwyg/schema'

function makeFrame(): Frame {
  return {
    id: 'f1', width: 320, height: 200, background: '#ffffff',
    layers: [
      { id: 'l1', name: 'Base', visible: true, locked: false, objects: [
        { id: 'o1', type: 'image', x: 16, y: 24, width: 80, height: 60, rotate: 15, zIndex: 0, props: { src: 'https://example.com/a.jpg', alt: 'A' } },
      ]},
      { id: 'l2', name: 'Text', visible: true, locked: false, objects: [
        { id: 't1', type: 'text', x: 24, y: 120, width: 200, height: 32, rotate: 0, zIndex: 1, props: { text: 'Hello', fontSize: 18, color: '#111111' } },
      ]},
    ],
  }
}

describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () => {
  it('renders wrapper with fixed width/height and absolutely positioned children', () => {
    const frame = makeFrame()
    const out = exportFrame(frame)
    expect(out.html).toMatch(/<div class=\"frame\"/)
    expect(out.css).toMatch(/\.frame\s*{[^}]*position:relative/)
    expect(out.css).toMatch(/width:320px/)
    expect(out.css).toMatch(/height:200px/)
    // image object
    expect(out.html).toMatch(/<img[^>]*src=\"https:\/\/example.com\/a.jpg\"/)
    expect(out.css).toMatch(/#o1\s*{[^}]*left:16px;[^}]*top:24px;[^}]*width:80px;[^}]*height:60px;[^}]*transform:rotate\(15deg\)/)
    // text object
    expect(out.html).toMatch(/<p id=\"t1\"/)
    expect(out.html).toMatch(/Hello/)
    expect(out.css).toMatch(/#t1\s*{[^}]*left:24px;[^}]*top:120px;[^}]*width:200px;[^}]*height:32px/)
  })

  it('includes scale wrapper token for responsive fit', () => {
    const frame = makeFrame()
    const out = exportFrame(frame)
    expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
    expect(out.html).toMatch(/class=\"frame-scale\"/)
  })
})