import { test, expect } from '@playwright/test'

test.describe('Dashboard Page', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/')
    })

    test('loads dashboard page', async ({ page }) => {
        await expect(page).toHaveTitle(/FXQ One|Crypto Trader/i)
    })

    test('displays main sections', async ({ page }) => {
        // Check for main dashboard elements
        await expect(page.getByRole('heading', { level: 4 })).toBeVisible()

        // Wait for content to load
        await page.waitForLoadState('networkidle')

        // Check for navigation elements
        await expect(page.getByRole('navigation')).toBeVisible()
    })

    test('displays autopilot configuration section', async ({ page }) => {
        await page.waitForLoadState('networkidle')

        // Look for autopilot related elements
        await expect(page.getByText(/autopilot/i).first()).toBeVisible()
    })

    test('navigation works correctly', async ({ page }) => {
        // Navigate to different pages
        await page.click('text=Trading')
        await expect(page).toHaveURL(/.*trading/i)

        await page.click('text=Portfolio')
        await expect(page).toHaveURL(/.*portfolio/i)

        await page.click('text=Strategies')
        await expect(page).toHaveURL(/.*strateg/i)

        await page.click('text=Settings')
        await expect(page).toHaveURL(/.*settings/i)

        // Go back to dashboard
        await page.click('text=Dashboard')
        await expect(page).toHaveURL(/.*\/$/)
    })

    test('displays real-time status indicators', async ({ page }) => {
        await page.waitForLoadState('networkidle')

        // Look for status indicators (chips, badges, etc.)
        const statusChips = page.locator('.MuiChip-root')
        await expect(statusChips.first()).toBeVisible({ timeout: 10000 })
    })
})

test.describe('Dashboard - Autopilot Controls', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/')
        await page.waitForLoadState('networkidle')
    })

    test('shows autopilot start button', async ({ page }) => {
        const startButton = page.getByRole('button', { name: /start.*autopilot/i })
        // Button should be visible
        await expect(startButton).toBeVisible({ timeout: 10000 })
    })

    test('symbol selection is available', async ({ page }) => {
        // Look for symbol selector (autocomplete or select)
        const symbolInput = page.locator('[data-testid="autopilot-symbols"], .MuiAutocomplete-root, input[placeholder*="symbol" i]').first()
        await expect(symbolInput).toBeVisible({ timeout: 10000 })
    })
})

test.describe('Dashboard - Charts', () => {
    test('chart grid displays', async ({ page }) => {
        await page.goto('/')
        await page.waitForLoadState('networkidle')

        // Wait for charts to potentially load
        await page.waitForTimeout(2000)

        // Look for chart container
        const chartArea = page.locator('[class*="chart"], canvas, svg').first()
        await expect(chartArea).toBeVisible({ timeout: 15000 })
    })
})