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

const messages: Record<string, string> = enMessages as Record<string, string>

describe('BuilderClientPage - Inspector FAQ', () => {
  it('FAQ 선택 후 인스펙터에서 아이템을 편집할 수 있다(쉼표 구분)', () => {
    render(
      <NextIntlClientProvider locale="en" messages={messages}>
        <BuilderClientPage />
      </NextIntlClientProvider>
    )

    // FAQ 섹션 추가 및 선택
    fireEvent.click(screen.getByTestId('btn-add-faq'))
    fireEvent.click(screen.getByLabelText('Select 0'))

    // 리스트 UI: Add FAQ Item 후 Q/A 입력 변경 확인
    fireEvent.click(screen.getByRole('button', { name: 'Add FAQ Item' }))
    const q0 = screen.getByLabelText('FAQ Q 0') as HTMLInputElement
    const a0 = screen.getByLabelText('FAQ A 0') as HTMLInputElement
    fireEvent.change(q0, { target: { value: 'Q1?' } })
    fireEvent.change(a0, { target: { value: 'A1' } })
    expect((screen.getByLabelText('FAQ Q 0') as HTMLInputElement).value).toBe('Q1?')
    expect((screen.getByLabelText('FAQ A 0') as HTMLInputElement).value).toBe('A1')
  })
})