import React from 'react'
import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import BulkTagModal from './BulkTagModal'

describe('BulkTagModal', () => {
  beforeEach(() => {
    document.head.innerHTML = '<meta name="csrf-token" content="test-token">'

    global.fetch = vi.fn(async (url) => {
      const requestUrl = String(url)

      if (requestUrl.includes('?q=high')) {
        return {
          json: async () => ([
            { id: 2, name: 'High Contrast', slug: 'high-contrast', usage_count: 120, recent_clicks: 18 },
            { id: 3, name: 'High Detail', slug: 'high-detail', usage_count: 90, recent_clicks: 0 },
          ]),
        }
      }

      return {
        json: async () => ([
          { id: 1, name: 'Popular Pick', slug: 'popular-pick', usage_count: 300, recent_clicks: 9 },
        ]),
      }
    })
  })

  afterEach(() => {
    vi.restoreAllMocks()
    document.head.innerHTML = ''
  })

  it('shows recent click momentum for initial results', async () => {
    render(<BulkTagModal open mode="add" onClose={() => {}} onConfirm={() => {}} />)

    await waitFor(() => {
      expect(screen.getByText('Popular Pick')).not.toBeNull()
    })

    expect(screen.getByText('9 recent clicks')).not.toBeNull()
  })

  it('returns selected tag ids and shows recent click momentum in search results', async () => {
    const onConfirm = vi.fn()

    render(<BulkTagModal open mode="add" onClose={() => {}} onConfirm={onConfirm} />)

    const input = screen.getByPlaceholderText('Search tags…')
    await userEvent.type(input, 'high')

    await waitFor(() => {
      expect(screen.getByText('18 recent clicks')).not.toBeNull()
    })

    await userEvent.click(screen.getByRole('button', { name: /High Contrast/i }))
    await userEvent.click(screen.getByRole('button', { name: /Add 1 tag/i }))

    expect(onConfirm).toHaveBeenCalledWith([2])
  })
})