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/providers', () => HttpResponse.json({ 
    providers: [
      { name: 'Hetzner', provider: 'hetzner', supported: true, plans: [], regions: 3 }
    ] 
  })),
  http.post('/api/v1/cluster/scale-plan', () => HttpResponse.json({ 
    data: { total_cost_monthly: 41.64 } 
  })),
]

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

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

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