import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { areasApi } from '../../services/api/areas'
import { MunicipalitySearch } from './MunicipalitySearch'
import type { AreaRead } from '../../types'

vi.mock('../../services/api/areas', () => ({
  areasApi: { searchMunicipalities: vi.fn() },
}))

describe('MunicipalitySearch', () => {
  beforeEach(() => {
    vi.mocked(areasApi.searchMunicipalities).mockResolvedValue({
      items: [{ niscode: '13025', name: 'Mol', name_nl: 'Mol', name_fr: 'Mol', name_de: 'Mol' }],
      total: 1,
    })
  })
  afterEach(() => cleanup())

  it('searches the official municipality catalog and activates a result', async () => {
    const activated = { id: 'mol', project_id: 'project', name: 'Gemeente Mol - NIS 13025' } as AreaRead
    const onActivate = vi.fn().mockResolvedValue(activated)
    render(<MunicipalitySearch projectId="project" activeArea={null} onActivate={onActivate} />)

    fireEvent.change(screen.getByTestId('municipality-search-input'), { target: { value: 'Mol' } })
    await waitFor(() => expect(areasApi.searchMunicipalities).toHaveBeenCalledWith('project', 'Mol'))
    fireEvent.click(await screen.findByRole('button', { name: /Mol/ }))
    await waitFor(() => expect(onActivate).toHaveBeenCalledWith('13025'))
  })

  it('presents municipality search as optional and keeps free selection visible', () => {
    render(<MunicipalitySearch projectId="project" activeArea={null} onActivate={vi.fn()} />)
    expect(screen.getByText('optioneel')).toBeTruthy()
    expect(screen.getByText('Vrije kaartselectie')).toBeTruthy()
  })
})