import { cleanup, render } from '@testing-library/react'
import { fireEvent, screen } from '@testing-library/dom'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { ModelSelector, type ModelSelectionOption } from './ModelSelector'

const options: ModelSelectionOption[] = [
  { id: 'fast', name: 'Snel lokaal model', description: 'Voor korte vragen.', status: 'available', tone: 'fast', technicalName: 'qwen:9b' },
  { id: 'offline', name: 'Niet geconfigureerd', status: 'unavailable', statusLabel: 'Niet beschikbaar' },
]

describe('ModelSelector', () => {
  beforeEach(() => {
    HTMLDialogElement.prototype.showModal = function showModal() { this.setAttribute('open', '') }
    HTMLDialogElement.prototype.close = function close() { this.removeAttribute('open') }
  })
  afterEach(() => cleanup())

  it('opens the selector and returns an available model choice', () => {
    const onChange = vi.fn()
    render(<ModelSelector label="AI-model" value="automatic" options={options} onChange={onChange} automaticOption={{ id: 'automatic', name: 'Automatisch aanbevolen', status: 'available', tone: 'recommended' }} />)
    fireEvent.click(screen.getByRole('button', { name: /Automatisch aanbevolen/ }))
    fireEvent.click(screen.getByText('Concrete modellen'))
    fireEvent.click(screen.getByRole('radio', { name: /Snel lokaal model/ }))
    expect(onChange).toHaveBeenCalledWith('fast')
  })

  it('keeps unavailable runtime models disabled', () => {
    render(<ModelSelector label="Analysemodel" value="fast" options={options} onChange={vi.fn()} />)
    fireEvent.click(screen.getByRole('button', { name: /Snel lokaal model/ }))
    fireEvent.click(screen.getByText('Concrete modellen'))
    expect((screen.getByRole('radio', { name: /Niet geconfigureerd/ }) as HTMLButtonElement).disabled).toBe(true)
  })
})