import { expect, test, type Locator, type Page } from '@playwright/test'
import { authenticate, mockHermesApi, TEST_ACCESS_KEY } from './fixtures'

async function openSelector(page: Page, select: Locator) {
  await expect(select).not.toHaveClass(/arco-select-disabled/)
  await select.click({ position: { x: 8, y: 16 } })
  const popup = page.locator('.arco-select-dropdown:visible')
  await expect(popup).toBeVisible()
  // Wait past Arco's popup animation: label forwarding used to close the
  // dropdown just after the initial visible assertion succeeded.
  await page.waitForTimeout(300)
  await expect(popup).toBeVisible()
  return popup
}

test('auxiliary provider and model menus stay open and apply choices', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY)
  await mockHermesApi(page)
  await page.goto('/#/hermes/models')
  await page.getByRole('button', { name: 'Auxiliary Models', exact: true }).click()
  await page.locator('.auxiliary-row').filter({ hasText: 'Vision' }).getByRole('button', { name: 'Edit', exact: true }).click()
  const selects = page.locator('.auxiliary-form .arco-select')
  await expect(selects).toHaveCount(2)
  const providers = await openSelector(page, selects.nth(0))
  await providers.locator('.arco-select-option', { hasText: 'Test Provider' }).click()
  await expect(providers).toHaveCount(0)
  await expect(selects.nth(0)).toContainText('Test Provider')
  const models = await openSelector(page, selects.nth(1))
  await models.locator('.arco-select-option', { hasText: 'test-model' }).click()
  await expect(selects.nth(1)).toContainText('test-model')
  await expect(page.locator('.auxiliary-form')).toBeVisible()
})

test('new workflow agent menu stays open and applies another profile', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page)
  await page.route(url => url.pathname.startsWith('/api/hermes/workflows'), route => route.fulfill({ json: { workflows: [] } }))
  await page.goto('/#/hermes/workflow')
  await page.getByRole('button', { name: 'New Workflow', exact: true }).click()
  const select = page.locator('.workflow-create-form .arco-select')
  const profiles = await openSelector(page, select)
  await profiles.locator('.arco-select-option', { hasText: 'default' }).click()
  await expect(select).toContainText('default')
  await expect(page.locator('.workflow-create-form')).toBeVisible()
})