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 Snapshot',
    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: 'radio', name: 'size', label: 'Size', options: ['S','M'], help: 'Pick one size' },
        { type: 'select', name: 'plan', label: 'Plan', options: ['Free','Pro'], help: 'Choose plan' },
        { type: 'checkbox', name: 'agree', label: 'Agree', required: true, help: 'Must agree' },
      ],
      spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
    },
    seo: { title: 'SEO', description: 'Desc' },
  })

function extractForm(html: string): string {
  const m = html.match(/<form[\s\S]*?<\/form>/)
  return m ? m[0]
    // normalize whitespace for snapshot stability
    .replace(/\s+\n/g, '\n')
    .replace(/\n\s+/g, '\n')
    .trim()
    : ''
}

describe('Exporter - form helptext snapshot', () => {
  it('contains stable wiring for ids/labels/help/aria', () => {
    const out = exportPage(makePage())
    const form = extractForm(out.html)

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

    // email present (no help)
    expect(form).toContain('id="field-email"')
    expect(form).toContain('<label for="field-email">Email')
    expect(form).not.toContain('field-email-help')

    // radio group help on fieldset
    expect(form).toContain('<fieldset')
    expect(form).toContain('aria-describedby="field-size-help"')
    expect(form).toContain('id="field-size-help"')
    expect(form).toContain('type="radio"')

    // select with help
    expect(form).toContain('id="field-plan"')
    expect(form).toContain('aria-describedby="field-plan-help"')
    expect(form).toContain('id="field-plan-help"')

    // checkbox with help
    expect(form).toContain('id="field-agree"')
    expect(form).toContain('aria-describedby="field-agree-help"')
    expect(form).toContain('id="field-agree-help"')
  })
})