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

const makePage = (overrides: Partial<Page> = {}): Page => ({
  title: 'Fieldset A11y',
  locale: 'en',
  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
  sections: [],
  form: {
    actionUrl: '',
    fields: [
      { type: 'radio', name: 'plan', label: 'Plan', options: ['Basic','Pro'], required: false, help: 'Choose your plan' },
    ],
    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
  },
  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
  seo: { title: 'T', description: 'D' },
  ...overrides,
})

describe('Exporter - radio fieldset a11y', () => {
  it('fieldset gets aria-describedby to help id; legend equals label; options share name', () => {
    const page = makePage()
    const { html } = exportPage(page)

    // fieldset with describedby
    expect(html).toMatch(/<fieldset[^>]*aria-describedby="field-plan-help"/)
    // legend uses label
    expect(html).toMatch(/<legend>Plan<\/legend>/)
    // help element id matches describedby target
    expect(html).toMatch(/<div id="field-plan-help" class="form-help">Choose your plan<\/div>/)
    // radio inputs share name and ids are unique
    expect(html).toMatch(/<input id="field-plan-opt-0" type="radio" name="plan"[^>]*value="Basic"/)
    expect(html).toMatch(/<label for="field-plan-opt-0">Basic<\/label>/)
    expect(html).toMatch(/<input id="field-plan-opt-1" type="radio" name="plan"[^>]*value="Pro"/)
    expect(html).toMatch(/<label for="field-plan-opt-1">Pro<\/label>/)
  })
})