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: 'Form Error Regression',
  locale: 'en',
  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
  sections: [],
  form: {
    actionUrl: '',
    fields: [
      { type: 'text', name: 'name', label: 'Name', required: true, pattern: '^[A-Za-z ]+$', maxLength: 30, help: 'Enter your name' },
      { type: 'email', name: 'email', label: 'Email', required: true, help: 'We will contact you' },
      { type: 'textarea', name: 'msg', label: 'Message', required: false, maxLength: 200, help: 'Optional' },
    ],
    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
  },
  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
  seo: { title: 'T', description: 'D' },
  ...overrides,
})

describe('Exporter - form error/required/pattern regression', () => {
  it('adds required/pattern/maxlength attributes and aria-describedby links', () => {
    const page = makePage()
    const { html } = exportPage(page)

    // required/pattern on text
    expect(html).toMatch(/<input[^>]*name="name"[^>]*required/)
    expect(html).toMatch(/<input[^>]*name="name"[^>]*pattern="\^\[A-Za-z \]\+\$"/)
    expect(html).toMatch(/<input[^>]*name="name"[^>]*maxlength="30"/)
    // describedby via help
    expect(html).toMatch(/<label for="field-name">Name<\/label>/)
    expect(html).toMatch(/<input[^>]*id="field-name"[^>]*aria-describedby="field-name-help"/)
    expect(html).toMatch(/<div id="field-name-help" class="form-help">Enter your name<\/div>/)

    // email required + describedby
    expect(html).toMatch(/<input[^>]*type="email"[^>]*name="email"[^>]*required/)
    expect(html).toMatch(/<input[^>]*id="field-email"[^>]*aria-describedby="field-email-help"/)

    // textarea maxlength + describedby
    expect(html).toMatch(/<textarea[^>]*name="msg"[^>]*maxlength="200"/)
    expect(html).toMatch(/<textarea[^>]*id="field-msg"[^>]*aria-describedby="field-msg-help"/)
  })

  it('CSS includes :invalid rule for error state', () => {
    const page = makePage()
    const { css } = exportPage(page)
    expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\{[^}]*border-color/)
  })
})