import { describe, it, expect } from 'vitest'
import { pageSchema, type Page } from '@/lib/schema/page'
import { exportPage } from '@/lib/exporter/html'

const makePage = (): Page =>
  pageSchema.parse({
    title: 'Form Help A11y',
    locale: 'en',
    theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
    sections: [],
    form: {
      actionUrl: '',
      fields: [
        { type: 'text', name: 'name', label: 'Name', required: true, help: 'Your full name' },
        { type: 'email', name: 'email', label: 'Email', required: true },
        { type: 'select', name: 'plan', label: 'Plan', required: false, options: ['A','B'], help: 'Choose your plan' },
        { type: 'radio', name: 'size', label: 'Size', required: false, options: ['S','M','L'], help: 'Pick one size' },
        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'You must agree to proceed' },
        { type: 'textarea', name: 'msg', label: 'Message', required: false },
      ],
      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
    },
    seo: { title: 'Form Help A11y', description: 'desc' },
  })

/**
 * Requirements (a11y):
 * - Each control has an id `field-<name>` and its label has htmlFor pointing to it.
 * - If field.help exists:
 *   - Render help element with id `field-<name>-help` containing help text.
 *   - Control has `aria-describedby` referencing the help id.
 * - For radio group, set aria-describedby on the fieldset instead of individual radios.
 */

describe('Exporter - form helptext and aria-describedby', () => {
  it('renders id/htmlFor and help + aria-describedby wiring', () => {
    const page = makePage()
    const out = exportPage(page)
    const html = out.html

    // text with help
    expect(html).toContain('id="field-name"')
    expect(html).toContain('<label for="field-name">Name')
    expect(html).toContain('id="field-name-help"')
    expect(html).toContain('Your full name')
    expect(html).toContain('aria-describedby="field-name-help"')

    // email without help → no aria-describedby
    expect(html).toContain('id="field-email"')
    expect(html).toContain('<label for="field-email">Email')
    expect(html).not.toContain('field-email-help')

    // select with help
    expect(html).toContain('id="field-plan"')
    expect(html).toContain('<label for="field-plan">Plan')
    expect(html).toContain('id="field-plan-help"')
    expect(html).toContain('Choose your plan')

    // radio group help → fieldset has aria-describedby
    expect(html).toContain('<fieldset')
    expect(html).toContain('aria-describedby="field-size-help"')
    expect(html).toContain('id="field-size-help"')
    expect(html).toContain('Pick one size')

    // checkbox with help
    expect(html).toContain('id="field-agree"')
    expect(html).toContain('<label for="field-agree">')
    expect(html).toContain('id="field-agree-help"')
    expect(html).toContain('You must agree to proceed')

    // textarea without help
    expect(html).toContain('id="field-msg"')
    expect(html).toContain('<label for="field-msg">Message')
  })
})