import { render, screen, within } 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 helptexts (Hero/CTA/FAQ)', () => {
  test('Hero, CTA, FAQ helptexts render', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // add hero and select it from canvas
    screen.getByTestId('card-hero').click()
    const sec0 = await screen.findByTestId('sec-item-0')
    within(sec0).getByRole('button', { name: /Select/ }).click()
    expect(await screen.findByText(/Main heading displayed prominently/i)).toBeInTheDocument()

    // add cta and select it from canvas
    screen.getByTestId('card-cta').click()
    const sec1 = await screen.findByTestId('sec-item-1')
    within(sec1).getByRole('button', { name: /Select/ }).click()
    expect(await screen.findByLabelText('CTA Text')).toBeInTheDocument()
    expect(await screen.findByLabelText('CTA Href')).toBeInTheDocument()

    // add faq and select it from canvas
    screen.getByTestId('card-faq').click()
    const sec2 = await screen.findByTestId('sec-item-2')
    within(sec2).getByRole('button', { name: /Select/ }).click()
    expect(await screen.findByText(/Add at least one FAQ item with Q and A/i)).toBeInTheDocument()
  })
})