import { describe, expect, it } from 'vitest'
import { render, fireEvent, screen } from '@testing-library/react'
import { virtual } from '@guidepup/virtual-screen-reader'
import { Pagination } from './Pagination'
import { spokenPhraseUntil } from './sr-test-utils'

describe('Pagination [SR]', () => {
  it('announces nav controls and current page marker', async () => {
    const onPageChange = () => {}
    const { rerender } = render(<Pagination page={1} pageCount={3} onPageChange={onPageChange} label="Results pages" />)

    const controlPhrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('previous'))
    expect(controlPhrase.toLowerCase()).toContain('previous')

    rerender(<Pagination page={2} pageCount={3} onPageChange={onPageChange} label="Results pages" />)

    // "2 / 3" is spoken as separate tokens ("current page", "2", "/", "3"), not one
    // phrase — walk the sequence and assert the announced value around the marker.
    await virtual.start({ container: document.body })
    const spoken: string[] = []
    for (let i = 0; i < 10; i++) {
      await virtual.next()
      spoken.push((await virtual.lastSpokenPhrase()).toLowerCase())
    }
    await virtual.stop()
    const markerIndex = spoken.indexOf('current page')
    expect(markerIndex).toBeGreaterThanOrEqual(0)
    expect(spoken.slice(markerIndex, markerIndex + 4).join(' ')).toBe('current page 2 / 3')
  })

  it('announces the next page button as interactive', async () => {
    const onPageChange = (page: number) => page
    render(<Pagination page={2} pageCount={4} onPageChange={onPageChange} label="Results pages" />)
    fireEvent.click(screen.getByRole('button', { name: 'Next' }))

    const phrase = await spokenPhraseUntil(document.body, (value) => value.toLowerCase().includes('next'))
    expect(phrase.toLowerCase()).toContain('next')
  })
})