import { describe, it, expect, vi } from 'vitest'
import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
import { ref } from 'vue'
import CounterWidget from '~/components/Counter/Widget.vue'

const { useCounterMock, useUserMock } = vi.hoisted(() => ({
  useCounterMock: vi.fn(),
  // Default return value set here so the global fetchUser middleware
  // doesn't crash before the test body runs
  useUserMock: vi.fn(() => ({
    isAuthenticated: false,
    user: null,
    authRefresh: vi.fn()
  }))
}))

mockNuxtImport('useCounter', () => useCounterMock)

// Silence the global fetchUser middleware — prevents a real PocketBase authRefresh call
mockNuxtImport('useUser', () => useUserMock)

describe('Counter/Widget', () => {
  it('renders the current count and increment/decrement buttons', async () => {
    useCounterMock.mockReturnValue({
      count: ref(42),
      recordId: ref('rec1'),
      fetchCurrentCount: vi.fn(),
      subscribeToChanges: vi.fn(),
      unsubscribe: vi.fn(),
      increment: vi.fn(),
      reset: vi.fn()
    })

    const wrapper = await mountSuspended(CounterWidget)

    expect(wrapper.text()).toContain('42')
    // Both +/- icon buttons should be present
    expect(wrapper.findAll('button').length).toBeGreaterThanOrEqual(2)
  })
})