import { fireEvent, render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
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 keyboard UX - Remove actions', () => {
  test('Features: Remove with Space/Enter', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // Add features and select
    fireEvent.click(screen.getByTestId('card-features'))
    fireEvent.click(screen.getByLabelText('Select 0'))

    // Add two items
    const addBtn = screen.getByRole('button', { name: /Add Feature Item/i })
    let inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
    const beforeAdd = inputs.length
    fireEvent.click(addBtn)
    fireEvent.click(addBtn)
    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
    expect(inputs.length).toBe(beforeAdd + 2)

    // Remove last item via Space
    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
    const beforeRemoveA = inputs.length
    let removeButtons = screen.queryAllByRole('button', { name: /Remove Feature \d+/ })
    const rmLastA = removeButtons[removeButtons.length - 1]
    rmLastA.focus()
    fireEvent.keyUp(rmLastA, { key: ' ', code: 'Space', charCode: 32 })
    await waitFor(() => {
      const now = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
      expect(now.length).toBe(beforeRemoveA - 1)
    })

    // Add another then remove last via Enter
    fireEvent.click(addBtn)
    inputs = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
    const beforeRemoveB = inputs.length
    removeButtons = screen.queryAllByRole('button', { name: /Remove Feature \d+/ })
    const rmLastB = removeButtons[removeButtons.length - 1]
    rmLastB.focus()
    fireEvent.keyUp(rmLastB, { key: 'Enter', code: 'Enter', charCode: 13 })
    await waitFor(() => {
      const now = screen.queryAllByRole('textbox', { name: /Feature \d+/ })
      expect(now.length).toBe(beforeRemoveB - 1)
    })
  })

  test('Testimonials: Remove with Space/Enter', async () => {
    render(
      <Wrapper>
        <BuilderClientPage />
      </Wrapper>
    )

    // Add testimonials and select
    fireEvent.click(screen.getByTestId('card-testimonials'))
    fireEvent.click(screen.getByLabelText('Select 0'))

    // Add two items
    const addBtn = screen.getByRole('button', { name: /Add Testimonial/i })
    let authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
    let quotes = screen.queryAllByRole('textbox', { name: /Quote \d+/ })
    const beforeAddT = authors.length
    fireEvent.click(addBtn)
    fireEvent.click(addBtn)
    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
    quotes = screen.queryAllByRole('textbox', { name: /Quote \d+/ })
    expect(authors.length).toBe(beforeAddT + 2)
    expect(quotes.length).toBe(beforeAddT + 2)

    // Remove last item via Enter
    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
    let beforeRemoveT = authors.length
    let rmTButtons = screen.queryAllByRole('button', { name: /Remove Testimonial \d+/ })
    let rmLastT = rmTButtons[rmTButtons.length - 1]
    rmLastT.focus()
    fireEvent.keyUp(rmLastT, { key: 'Enter', code: 'Enter', charCode: 13 })
    await waitFor(() => {
      const aNow = screen.queryAllByRole('textbox', { name: /Author \d+/ })
      expect(aNow.length).toBe(beforeRemoveT - 1)
    })

    // Add another then remove last via Space
    fireEvent.click(addBtn)
    authors = screen.queryAllByRole('textbox', { name: /Author \d+/ })
    beforeRemoveT = authors.length
    rmTButtons = screen.queryAllByRole('button', { name: /Remove Testimonial \d+/ })
    rmLastT = rmTButtons[rmTButtons.length - 1]
    rmLastT.focus()
    fireEvent.keyUp(rmLastT, { key: ' ', code: 'Space', charCode: 32 })
    await waitFor(() => {
      const aNow = screen.queryAllByRole('textbox', { name: /Author \d+/ })
      expect(aNow.length).toBe(beforeRemoveT - 1)
    })
  })
})