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

const sampleSession = {
  id: 'sess-1',
  title: 'First session',
  source: 'cli',
  created_at: 1760000000000,
  updated_at: 1760000000000,
  message_count: 2,
  input_tokens: 0,
  output_tokens: 0,
  reasoning_tokens: 0,
}

// Arco 的 a-dropdown 没有 droplist prop：菜单内容必须走 #content 插槽 + a-doption。
// 传 :droplist 会被静默忽略，弹层能打开但列表是空的（历史上就是这么坏的）。
test('reasoning effort dropdown renders its options and applies the selection', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page, { sessions: [sampleSession] })
  await mockChatSocket(page)

  await page.goto('/#/hermes/chat')

  await page.locator('.reasoning-effort-button').click()
  const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Minimal' })
  await expect(popup).toBeVisible()
  await expect(popup.locator('.arco-dropdown-option')).toHaveCount(7)

  await popup.locator('.arco-dropdown-option', { hasText: 'High' }).first().click()
  await expect(page.locator('.reasoning-effort-label')).toHaveText('High')
})

test('input settings dropdown renders its options and toggles auto play voice', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page, { sessions: [sampleSession] })
  await mockChatSocket(page)

  await page.goto('/#/hermes/chat')

  await page.locator('.input-settings-button').click()
  const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Auto-play voice' })
  await expect(popup).toBeVisible()
  await expect(popup.locator('.arco-dropdown-option')).toHaveCount(2)

  await popup.locator('.arco-dropdown-option').first().click()
  await expect(page.locator('.settings-check').first()).toHaveText('✓')
})

test('session context menu renders flat items and its export submenu', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page, { sessions: [sampleSession] })
  await mockChatSocket(page)

  await page.goto('/#/hermes/chat')

  await page.locator('.session-item').first().click({ button: 'right' })
  const popup = page.locator('.arco-trigger-popup').filter({ hasText: 'Rename' })
  await expect(popup).toBeVisible()
  // pin / rename / archive / workspace / model / export(submenu) / open-link / copy-link / copy-id
  await expect(popup.locator('.arco-dropdown-option')).toHaveCount(9)

  await popup.locator('.arco-dropdown-option', { hasText: 'Export' }).click()
  await expect(page.locator('.arco-trigger-popup').filter({ hasText: 'Compressed' })).toBeVisible()
})

test('new chat selectors stay open after clicking their field and allow selection', async ({ page }) => {
  await authenticate(page, TEST_ACCESS_KEY, 'research')
  await mockHermesApi(page)
  await page.route('**/api/hermes/available-models**', async route => {
    const group = { provider: 'test-provider', label: 'Test Provider', models: ['test-model', 'other-model'] }
    await route.fulfill({ json: {
      default: 'test-model', default_provider: 'test-provider', groups: [group], allProviders: [group],
      profiles: ['default', 'research'].map(profile => ({
        profile, default: 'test-model', default_provider: 'test-provider', groups: [group],
      })),
    } })
  })
  await mockChatSocket(page)
  await page.goto('/#/hermes/chat')
  await page.getByRole('button', { name: 'New Chat', exact: true }).click()
  const drawer = page.locator('.new-chat-drawer')
  const selects = drawer.locator('.new-chat-field > .arco-select')
  await expect(selects).toHaveCount(3)
  await expect(selects.nth(1)).not.toHaveClass(/arco-select-disabled/)

  for (const index of [0, 1, 2]) {
    // Click the field chrome, not the internal input: a wrapping HTML label
    // forwards this click to its input and can toggle the popup a second time.
    await selects.nth(index).click({ position: { x: 8, y: 16 } })
    const popup = page.locator('.arco-select-dropdown:visible')
    await expect(popup).toBeVisible()
    await page.waitForTimeout(300)
    await expect(popup).toBeVisible()
    const option = index === 0
      ? popup.locator('.arco-select-option', { hasText: 'research' })
      : popup.locator('.arco-select-option').first()
    await option.click()
    await expect(popup).toHaveCount(0)
    await expect(drawer).toBeVisible()
  }
})


for (const viewport of [{ width: 1440, height: 900 }, { width: 390, height: 844 }, { width: 844, height: 390 }]) {
  test(`Agent selector shows more profiles and supports searching at ${viewport.width}x${viewport.height}`, async ({ page }, testInfo) => {
    await page.setViewportSize(viewport)
    await authenticate(page, TEST_ACCESS_KEY, 'research')
    await mockHermesApi(page)
    await page.route(url => url.pathname === '/api/hermes/profiles', route => route.fulfill({
      json: { profiles: ['research', ...Array.from({ length: 19 }, (_, index) => `profile-${String(index + 1).padStart(2, '0')}`)].map(name => ({ name, model: 'test-model', alias: '', active: name === 'research' })) },
    }))
    await mockChatSocket(page)
    await page.goto('/#/hermes/chat')
    if (viewport.width <= 768) await page.locator('.hamburger-btn').click()
    await page.getByRole('button', { name: 'New Chat', exact: true }).click()
    const selector = page.locator('.new-chat-drawer .new-chat-field > .arco-select').first()
    await selector.click({ position: { x: 8, y: 16 } })
    const popup = page.locator('.new-chat-profile-popup')
    await expect(popup).toBeVisible()
    const list = popup.locator('.arco-select-dropdown-list-wrapper')
    await expect.poll(() => list.evaluate(element => element.clientHeight)).toBeGreaterThan(viewport.height > 600 ? 350 : 200)
    const bounds = (await popup.boundingBox())!
    expect(bounds.y).toBeGreaterThanOrEqual(0)
    expect(bounds.y + bounds.height).toBeLessThanOrEqual(viewport.height)
    const visibleOptions = await list.evaluate(element => {
      const bounds = element.getBoundingClientRect()
      return [...element.querySelectorAll('.arco-select-option')].filter(option => {
        const rect = option.getBoundingClientRect()
        return rect.top >= bounds.top && rect.bottom <= bounds.bottom
      }).length
    })
    expect(visibleOptions).toBeGreaterThanOrEqual(viewport.height > 600 ? 10 : 5)
    if (viewport.width === 390) await page.screenshot({ path: testInfo.outputPath('agent-profile-picker-mobile.png'), animations: 'disabled' })
    await selector.locator('input').fill('profile-19')
    await expect(popup.locator('.arco-select-option')).toHaveCount(1)
    await popup.locator('.arco-select-option', { hasText: 'profile-19' }).click()
    await expect(selector).toContainText('profile-19')
    await expect(popup).toBeHidden()
  })
}