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 CTA', () => {
  it('CTA 선택 후 인스펙터에서 텍스트/링크를 편집할 수 있다', () => {
    render(
      <NextIntlClientProvider locale="en" messages={messages}>
        <BuilderClientPage />
      </NextIntlClientProvider>
    )

    // CTA 섹션 추가
    fireEvent.click(screen.getByTestId('btn-add-cta'))

    // 선택
    fireEvent.click(screen.getByLabelText('Select 0'))

    // 인풋 존재 및 값 변경
    const textInput = screen.getByLabelText('CTA Text') as HTMLInputElement
    const hrefInput = screen.getByLabelText('CTA Href') as HTMLInputElement

    expect(textInput.value).toBeTruthy()
    expect(hrefInput.value).toBeTruthy()

    fireEvent.change(textInput, { target: { value: 'Buy Now' } })
    fireEvent.change(hrefInput, { target: { value: 'https://example.com' } })

    expect((screen.getByLabelText('CTA Text') as HTMLInputElement).value).toBe('Buy Now')
    expect((screen.getByLabelText('CTA Href') as HTMLInputElement).value).toBe('https://example.com')
  })
})