import { render, screen } from '@testing-library/react'
import { NextIntlClientProvider } from 'next-intl'
import { describe, expect, test } from 'vitest'
import BuilderClientPage from './BuilderClientPage'
import messages from '../messages/en.json'

function Wrapper({ children }: { children: React.ReactNode }) {
  return (
    <NextIntlClientProvider messages={messages} locale="en">
      {children}
    </NextIntlClientProvider>
  )
}

describe('BuilderClientPage - inspector aria-describedby smoke', () => {
  test('SEO/Analytics inputs reference helptext via aria-describedby', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    const seoTitle = await screen.findByLabelText('SEO Title')
    const seoDesc = await screen.findByLabelText('SEO Description')
    const ogImage = await screen.findByLabelText('OG Image URL')
    const ga4 = await screen.findByLabelText('GA4 Measurement ID')
    const pixel = await screen.findByLabelText('Meta Pixel ID')

    expect(seoTitle).toHaveAttribute('aria-describedby', 'ins-seo-title-help')
    expect(seoDesc).toHaveAttribute('aria-describedby', 'ins-seo-desc-help')
    expect(ogImage).toHaveAttribute('aria-describedby', 'ins-og-image-help')
    expect(ga4).toHaveAttribute('aria-describedby', 'ins-ga4-help')
    expect(pixel).toHaveAttribute('aria-describedby', 'ins-meta-pixel-help')
  })
})