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

function frameWithForm(): Frame {
  return {
    id: 'f', width: 600, height: 400, background: '#ffffff',
    layers: [
      {
        id: 'base', name: 'Base', visible: true, locked: false, objects: [
          { id: 't1', type: 'input', x: 40, y: 40, width: 200, height: 32, rotate: 0, zIndex: 0, props: { name: 'email', label: 'Email', placeholder: '', required: true, help: 'We never share your email.' } },
          { id: 't2', type: 'select', x: 40, y: 100, width: 200, height: 32, rotate: 0, zIndex: 0, props: { name: 'country', label: 'Country', options: ['KR','US'], defaultValue: 'KR', help: 'Pick one' } },
          { id: 't3', type: 'textarea', x: 40, y: 160, width: 280, height: 80, rotate: 0, zIndex: 0, props: { name: 'msg', label: 'Message', placeholder: '', rows: 3, required: false, help: 'Optional' } },
          { id: 't4', type: 'radio', x: 320, y: 40, width: 200, height: 90, rotate: 0, zIndex: 0, props: { name: 'plan', legend: 'Plan', options: ['Basic','Pro'], defaultValue: 'Basic', required: false, help: 'Choose your plan' } },
          { id: 't5', type: 'checkbox', x: 320, y: 150, width: 200, height: 60, rotate: 0, zIndex: 0, props: { name: 'agree', legend: 'Agree to terms', options: ['Yes'], defaultValues: [], required: false, help: 'You must agree' } },
        ]
      }
    ],
  }
}

describe('wysiwyg export - a11y matrix for form controls', () => {
  it('label/for + aria-describedby for input/select/textarea', () => {
    const out = exportFrame(frameWithForm())
    const html = out.html
    // input
    expect(html).toMatch(/<label for="t1-control">Email<\/label>/)
    expect(html).toMatch(/<input[^>]*id="t1-control"[^>]*name="email"[^>]*required/)
    expect(html).toMatch(/<small id="t1-control-help">We never share your email\.<\/small>/)
    expect(html).toMatch(/<input[^>]*aria-describedby="t1-control-help"/)
    // select
    expect(html).toMatch(/<label for="t2-control">Country<\/label>/)
    expect(html).toMatch(/<select[^>]*id="t2-control"[^>]*name="country"[^>]*aria-describedby="t2-control-help"/)
    expect(html).toMatch(/<small id="t2-control-help">Pick one<\/small>/)
    // textarea
    expect(html).toMatch(/<label for="t3-control">Message<\/label>/)
    expect(html).toMatch(/<textarea[^>]*id="t3-control"[^>]*name="msg"[^>]*aria-describedby="t3-control-help"/)
    expect(html).toMatch(/<small id="t3-control-help">Optional<\/small>/)
  })

  it('fieldset/legend present for radio group with help items', () => {
    const out = exportFrame(frameWithForm())
    const html = out.html
    // fieldset/legend exist (current implementation does not add aria-describedby on fieldset)
    expect(html).toMatch(/<fieldset id="t4">/)
    expect(html).toMatch(/<legend>Plan<\/legend>/)
    // individual radio inputs share name and carry required if set on group (not set here), and pattern/max if present
    expect(html).toMatch(/<input type="radio" id="t4-0" name="plan" value="Basic" checked/)
    expect(html).toMatch(/<label for="t4-0">Basic<\/label>/)
    expect(html).toMatch(/<input type="radio" id="t4-1" name="plan" value="Pro"/)
    expect(html).toMatch(/<label for="t4-1">Pro<\/label>/)
    // help element exists (small)
    expect(html).toMatch(/<small id="t4-help">Choose your plan<\/small>/)
  })
  
  it('fieldset/legend present for checkbox group with help items', () => {
    const out = exportFrame(frameWithForm())
    const html = out.html
    expect(html).toMatch(/<fieldset id="t5">/)
    expect(html).toMatch(/<legend>Agree to terms<\/legend>/)
    expect(html).toMatch(/<input type="checkbox" id="t5-0" name="agree" value="Yes"/)
    expect(html).toMatch(/<label for="t5-0">Yes<\/label>/)
    expect(html).toMatch(/<small id="t5-help">You must agree<\/small>/)
  })
})