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('Buttons title/aria-label consistency', () => {
  test('Inspector Remove buttons have title matching aria-label', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // Add Features section and select
    fireEvent.click(screen.getByTestId('card-features'))
    fireEvent.click(await screen.findByLabelText('Select 0'))
    // Ensure at least one item
    fireEvent.click(screen.getByRole('button', { name: /Add Feature Item/i }))

    // Validate Features remove buttons
    const featureRemoveButtons = screen.getAllByRole('button', { name: /Remove Feature \d+/ })
    for (const btn of featureRemoveButtons) {
      const aria = btn.getAttribute('aria-label') || ''
      const title = btn.getAttribute('title') || ''
      expect(title).toBe(aria)
    }

    // Add Testimonials section and select
    fireEvent.click(screen.getByTestId('card-testimonials'))
    fireEvent.click(await screen.findByLabelText('Select 1'))
    // Ensure at least one item to expose remove button
    fireEvent.click(screen.getByRole('button', { name: /Add Testimonial/i }))

    // Validate Testimonials remove buttons
    const testimonialRemoveButtons = screen.getAllByRole('button', { name: /Remove Testimonial \d+/ })
    for (const btn of testimonialRemoveButtons) {
      const aria = btn.getAttribute('aria-label') || ''
      const title = btn.getAttribute('title') || ''
      expect(title).toBe(aria)
    }
  })
})