import { describe, it, expect, beforeAll, afterEach, afterAll } from 'vitest'
import { render, screen, waitFor } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { BrowserRouter } from 'react-router-dom'
import React from 'react'
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'

const handlers = [
  http.get('/api/v1/templates', () => HttpResponse.json({ 
    templates: [
      { id: 'worker', name: 'Worker', description: 'Worker node', min_hetzner_plan: 'cx22', estimated_monthly_cost: 10, services: [], requirements: { min_nodes: 1, max_nodes: 10, supports_ha: false } }
    ] 
  })),
]

const server = setupServer(...handlers)
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } })

describe('Templates', () => {
  it('renders without crashing', async () => {
    const { default: Templates } = await import('../../src/pages/Templates')
    
    render(
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <Templates />
        </BrowserRouter>
      </QueryClientProvider>
    )
    
    await waitFor(() => {
      expect(screen.getByText('Templates')).toBeInTheDocument()
    })
  })
})