import React from 'react'
import { render, screen } from '@testing-library/react'
import App from './App'

// Mock the service status hook to avoid API calls during tests
jest.mock('./hooks/useServiceStatus', () => ({
  useServiceStatus: () => ({
    isOnline: true,
    services: {
      'api-gateway': { status: 'healthy', lastCheck: new Date().toISOString() },
      'service-adapters': { status: 'healthy', lastCheck: new Date().toISOString() },
      'api-docs': { status: 'healthy', lastCheck: new Date().toISOString() }
    },
    isLoading: false,
    error: null
  })
}))

// Mock the system data hook
jest.mock('./hooks/useServiceStatus', () => ({
  useSystemData: () => ({
    systemStats: {
      cpuUsage: 45.2,
      memoryUsage: 2.1,
      diskUsage: 75.8
    },
    recentEvents: [
      {
        id: '1',
        timestamp: new Date().toISOString(),
        service: 'api-gateway',
        event_type: 'health_check',
        metadata: 'Service is healthy'
      }
    ],
    isLoading: false,
    error: null
  })
}))

describe('App Component', () => {
  it('renders without crashing', () => {
    render(<App />)
    expect(screen.getByText(/LabFusion/i)).toBeInTheDocument()
  })

  it('renders the main dashboard', () => {
    render(<App />)
    // Check for common dashboard elements
    expect(screen.getByText(/Dashboard/i)).toBeInTheDocument()
  })

  it('shows service status when online', () => {
    render(<App />)
    // Should show service status information
    expect(screen.getByText(/Service Status/i)).toBeInTheDocument()
  })
})