import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it } from 'vitest'
import { AiPipelineIllustration } from './AiPipelineIllustration'

afterEach(cleanup)

describe('AiPipelineIllustration', () => {
  it('shows the real readiness state and explains the selected stage', () => {
    render(
      <AiPipelineIllustration
        hasImagery
        hasTiles
        gpuReady
        hasDetections={false}
        hasQualityEvidence={false}
        running={false}
      />,
    )

    expect(screen.getByText('GPU gereed')).toBeTruthy()
    expect(screen.getByRole('tab', { name: /Detecties/ }).textContent).toContain('volgende stap')

    fireEvent.click(screen.getByRole('tab', { name: /Berekening/ }))
    expect(screen.getByRole('tabpanel').textContent).toContain('De herkenning draait lokaal')
  })

  it('moves selection and focus through the tablist with keyboard controls', () => {
    render(
      <AiPipelineIllustration
        hasImagery
        hasTiles
        gpuReady
        hasDetections={false}
        hasQualityEvidence={false}
        running={false}
      />,
    )

    const tabs = screen.getAllByRole('tab') as HTMLButtonElement[]
    const selectedTab = screen.getByRole('tab', { name: /Detecties/ }) as HTMLButtonElement
    const panel = screen.getByRole('tabpanel')

    expect(selectedTab.tabIndex).toBe(0)
    expect(tabs.filter((tab) => tab.tabIndex === 0)).toHaveLength(1)
    expect(selectedTab.getAttribute('aria-controls')).toBe(panel.id)
    expect(panel.getAttribute('aria-labelledby')).toBe(selectedTab.id)

    selectedTab.focus()
    fireEvent.keyDown(selectedTab, { key: 'ArrowRight' })
    expect(screen.getByRole('tab', { name: /QA-bewijs/ }).getAttribute('aria-selected')).toBe('true')
    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowRight' })
    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'End' })
    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /QA-bewijs/ }))

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'Home' })
    expect(document.activeElement).toBe(screen.getByRole('tab', { name: /Orthofoto/ }))

    fireEvent.keyDown(document.activeElement as HTMLElement, { key: 'ArrowLeft' })
    const wrappedTab = screen.getByRole('tab', { name: /QA-bewijs/ })
    expect(document.activeElement).toBe(wrappedTab)
    expect(screen.getByRole('tabpanel').getAttribute('aria-labelledby')).toBe(wrappedTab.id)
  })
})