import { describe, it, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import React from 'react'
import BuilderClientPage from '@/components/BuilderClientPage'
import { NextIntlClientProvider } from 'next-intl'
import enMessages from '@/messages/en.json'
const messages: Record<string, string> = enMessages as Record<string, string>

describe('BuilderClientPage - form preview', () => {
  it('폼 필드 목록과 필수 여부가 미리보기에 표시된다', () => {
    render(
      <NextIntlClientProvider locale="en" messages={messages}>
        <BuilderClientPage />
      </NextIntlClientProvider>
    )

    // FormBuilderPanel의 텍스트 필드 추가 버튼 클릭 (data-testid 사용)
    fireEvent.click(screen.getByTestId('btn-add-text'))

    // 프리뷰 존재 확인(컴팩트 인스펙터 영역으로 이동됨)
    expect(screen.getByText(/Locale:/)).toBeInTheDocument()

    // 첫 필드 항목 표기: 라벨/네임/required 여부(초기 false)
    expect(screen.getByText(/Text 1 \(field1\)/)).toBeInTheDocument()
    expect(screen.queryByText(/required/)).not.toBeNull()

    // required 토글 후 프리뷰 갱신 확인
    fireEvent.click(screen.getByLabelText('Required 0'))
    expect(screen.getAllByText('required').length).toBeGreaterThan(0)
  })
})