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 panel', () => {
  it('섹션 선택 후 인스펙터에서 Hero heading을 편집할 수 있다', () => {
    render(
      <NextIntlClientProvider locale="en" messages={messages}>
        <BuilderClientPage />
      </NextIntlClientProvider>
    )

    // Hero 섹션 추가 (data-testid 사용)
    fireEvent.click(screen.getByTestId('btn-add-hero'))

    // 캔버스에서 첫 섹션 선택
    fireEvent.click(screen.getByLabelText('Select 0'))

    // 인스펙터에서 Hero Heading 입력 존재
    const heading = screen.getByLabelText('Hero Heading') as HTMLInputElement
    expect(heading).toBeInTheDocument()
    // 기본값 존재(Welcome)
    expect(heading.value).toBeTruthy()

    // 값 변경
    fireEvent.change(heading, { target: { value: 'Hello World' } })
    expect((screen.getByLabelText('Hero Heading') as HTMLInputElement).value).toBe('Hello World')
  })
})