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

test.describe('Strategies Page', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/strategies')
        await page.waitForLoadState('networkidle')
    })

    test('displays strategies page title', async ({ page }) => {
        await expect(page.getByRole('heading', { name: /strateg/i })).toBeVisible()
    })

    test('shows create strategy button', async ({ page }) => {
        const createButton = page.getByRole('button', { name: /create|new|add/i }).first()
        await expect(createButton).toBeVisible()
    })

    test('displays strategy list or empty state', async ({ page }) => {
        // Either show strategies or empty state message
        const content = page.getByText(/no strategies|create your first|strategy/i).first()
        await expect(content).toBeVisible()
    })
})

test.describe('Strategies - Create Strategy Flow', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('/strategies')
        await page.waitForLoadState('networkidle')
    })

    test('opens strategy creation dialog', async ({ page }) => {
        const createButton = page.getByRole('button', { name: /create|new|add/i }).first()
        await createButton.click()

        // Dialog should open
        await expect(page.getByRole('dialog')).toBeVisible()
    })

    test('strategy dialog has required fields', async ({ page }) => {
        const createButton = page.getByRole('button', { name: /create|new|add/i }).first()
        await createButton.click()

        await expect(page.getByRole('dialog')).toBeVisible()

        // Check for strategy name field
        await expect(page.getByLabel(/name/i)).toBeVisible()

        // Check for strategy type selector
        await expect(page.getByLabel(/type|strategy type/i).or(page.getByText(/select.*strategy/i).first())).toBeVisible()
    })

    test('shows available strategy types', async ({ page }) => {
        const createButton = page.getByRole('button', { name: /create|new|add/i }).first()
        await createButton.click()

        await expect(page.getByRole('dialog')).toBeVisible()

        // Open strategy type dropdown
        const typeSelector = page.getByLabel(/type|strategy type/i).or(
            page.locator('[data-testid="strategy-type-select"]')
        )
        await typeSelector.click()

        // Should see strategy options like RSI, MACD, etc.
        await expect(page.getByRole('option').first()).toBeVisible({ timeout: 5000 })
    })

    test('can cancel strategy creation', async ({ page }) => {
        const createButton = page.getByRole('button', { name: /create|new|add/i }).first()
        await createButton.click()

        await expect(page.getByRole('dialog')).toBeVisible()

        // Cancel
        await page.getByRole('button', { name: /cancel/i }).click()

        await expect(page.getByRole('dialog')).not.toBeVisible()
    })
})