import { render, screen, fireEvent } 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('SEO/Analytics inspector', () => {
  test('edits SEO title/description and shows in preview', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    const seoTitle = screen.getByLabelText('SEO Title')
    const seoDesc = screen.getByLabelText('SEO Description')

    fireEvent.change(seoTitle, { target: { value: 'Landing SEO' } })
    fireEvent.change(seoDesc, { target: { value: 'Great page' } })

    expect(await screen.findByTestId('preview-seo-title')).toHaveTextContent('Landing SEO')
    expect(await screen.findByTestId('preview-seo-description')).toHaveTextContent('Great page')
  })

  test('edits Analytics fields and shows in preview', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    const ga4 = screen.getByLabelText('GA4 Measurement ID')
    const mp = screen.getByLabelText('Meta Pixel ID')

    fireEvent.change(ga4, { target: { value: 'G-TEST123' } })
    fireEvent.change(mp, { target: { value: '1234567890' } })

    expect(await screen.findByTestId('preview-ga4')).toHaveTextContent('G-TEST123')
    expect(await screen.findByTestId('preview-meta-pixel')).toHaveTextContent('1234567890')
  })
})