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

test.describe('Exchange Detail (/exchanges/:id)', () => {
  test('renders exchange header, timeline, and message panels', async ({ page }) => {
    await page.goto('/exchanges/E-2026-03-18-00201')

    // Exchange header — use the one NOT in the breadcrumb
    await expect(page.getByText('E-2026-03-18-00201').nth(1)).toBeVisible()

    // Header stats
    await expect(page.getByText('Duration').first()).toBeVisible()
    await expect(page.getByText('Processors').first()).toBeVisible()

    // Processor Timeline section
    await expect(page.getByText('Processor Timeline').first()).toBeVisible()

    // Timeline/Flow toggle buttons
    await expect(page.getByRole('button', { name: 'Timeline' })).toBeVisible()
    await expect(page.getByRole('button', { name: 'Flow' })).toBeVisible()

    // Message IN panel
    await expect(page.getByText('Message IN')).toBeVisible()
    await expect(page.getByText('Headers').first()).toBeVisible()
    await expect(page.getByText('Body').first()).toBeVisible()
  })

  test('switching between Timeline and Flow view', async ({ page }) => {
    await page.goto('/exchanges/E-2026-03-18-00201')

    // Default view is timeline (gantt)
    const timelineBtn = page.getByRole('button', { name: 'Timeline' })
    const flowBtn = page.getByRole('button', { name: 'Flow' })

    // Switch to Flow view
    await flowBtn.click()

    // Flow view should render (RouteFlow component)
    await expect(flowBtn).toHaveClass(/active|Active/)

    // Switch back to Timeline
    await timelineBtn.click()
    await expect(timelineBtn).toHaveClass(/active|Active/)
  })

  test('not-found exchange shows warning', async ({ page }) => {
    await page.goto('/exchanges/nonexistent-id')

    await expect(page.getByText('not found', { exact: false })).toBeVisible()
  })

  test('breadcrumb navigation works', async ({ page }) => {
    await page.goto('/exchanges/E-2026-03-18-00201')

    // Click Applications breadcrumb to go back
    const appsBreadcrumb = page.getByRole('link', { name: 'Applications' })
    await appsBreadcrumb.click()

    await expect(page).toHaveURL(/\/apps/)
  })
})