import { render, screen, fireEvent } 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('Inspector - Features & Testimonials editing', () => {
  test('Features: add item and edit value', () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // add Features section via sidebar
    fireEvent.click(screen.getByTestId('card-features'))

    // select the section in canvas (index 0)
    fireEvent.click(screen.getByLabelText('Select 0'))

    // add item
    fireEvent.click(screen.getByRole('button', { name: /Add Feature Item/i }))

    // edit item 0
    const input = screen.getByLabelText('Feature 0') as HTMLInputElement
    fireEvent.change(input, { target: { value: 'New Feature' } })
    expect(input.value).toBe('New Feature')
  })

  test('Testimonials: add item and edit author/quote', () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // add Testimonials section via sidebar
    fireEvent.click(screen.getByTestId('card-testimonials'))

    // select the section (index 0)
    fireEvent.click(screen.getByLabelText('Select 0'))

    // add item
    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))

    const author = screen.getByLabelText('Author 0') as HTMLInputElement
    const quote = screen.getByLabelText('Quote 0') as HTMLInputElement

    fireEvent.change(author, { target: { value: 'Alice' } })
    fireEvent.change(quote, { target: { value: 'Awesome!' } })

    expect(author.value).toBe('Alice')
    expect(quote.value).toBe('Awesome!')
  })
})