import React from 'react'
import { render, screen } from '@testing-library/react'
import { vi } from 'vitest'

// Mock heavy or path-aliased components so App can render in isolation
const { mockComponent } = vi.hoisted(() => ({
  mockComponent: (name = 'div') => ({ default: () => React.createElement(name) }),
}))

vi.mock('./components/FxSymbolSelector', () => mockComponent('div'))
vi.mock('./components/NotificationCenter', () => mockComponent('div'))
vi.mock('./components/AIAnalysisPanel', () => mockComponent('div'))
vi.mock('./components/RiskManagement', () => mockComponent('div'))
vi.mock('./components/RiskAutomationPanel', () => mockComponent('div'))
vi.mock('./components/BrokerBridgePanel', () => mockComponent('div'))
vi.mock('./components/ManualTradeLogger', () => mockComponent('div'))
vi.mock('./components/PortfolioTracker', () => mockComponent('div'))
vi.mock('./components/TradeControls', () => mockComponent('div'))

// Mock lazy-loaded panels
vi.mock('./components/LiveMarketPanel', () => mockComponent('div'))
vi.mock('./components/AccountPositionsPanel', () => mockComponent('div'))
vi.mock('./components/SettingsPanel', () => mockComponent('div'))
vi.mock('./components/PromptTemplatesPanel', () => mockComponent('div'))
vi.mock('./components/UserProfileSetup', () => mockComponent('div'))
vi.mock('./components/HabitTracker', () => mockComponent('div'))
vi.mock('./components/DailyChecklistPanel', () => mockComponent('div'))
vi.mock('./components/DailyTradingPlan', () => mockComponent('div'))
vi.mock('./components/NewsFeed', () => mockComponent('div'))
vi.mock('./components/AlertsPanel', () => mockComponent('div'))
vi.mock('./components/DailyMarketSummary', () => mockComponent('div'))
vi.mock('./components/TradingJournal', () => mockComponent('div'))
vi.mock('./components/AdvancedAnalytics', () => mockComponent('div'))
vi.mock('./components/EconomicCalendar', () => mockComponent('div'))
vi.mock('./components/AITradingCoach', () => mockComponent('div'))
vi.mock('./components/EquityPerformancePanel', () => mockComponent('div'))
vi.mock('./components/EquityCurveChart', () => mockComponent('div'))
vi.mock('./components/BrokerPositionsPanel', () => mockComponent('div'))
vi.mock('./components/DecisionLogPanel', () => mockComponent('div'))
vi.mock('./components/FxQuotesPanel', () => ({
  ...mockComponent('div'),
  DEFAULT_FX_SYMBOLS: ['XAUUSD', 'EURUSD', 'GBPUSD'],
}))

import App from './App'

describe('App', () => {
  it('renders the main heading', () => {
    render(<App />)
  const heading = screen.getByRole('heading', { name: /Assistant Market Simulator/i })
    expect(heading).toBeInTheDocument()
  })
})
