/**
 * End-to-end tests for FusionAGI frontend.
 *
 * Prerequisites:
 *   npx playwright install chromium
 *   npm run dev (or the webServer config will start it)
 */

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

test.describe('FusionAGI App', () => {
  test.beforeEach(async ({ page }) => {
    // Set auth token to skip login
    await page.addInitScript(() => {
      localStorage.setItem('fusionagi-token', 'test-e2e-token')
    })
  })

  test('renders the main interface', async ({ page }) => {
    await page.goto('/')
    await expect(page.locator('.app')).toBeVisible()
    await expect(page.locator('.logo')).toContainText('FusionAGI')
  })

  test('navigation tabs work', async ({ page }) => {
    await page.goto('/')
    const tabs = page.locator('[role="tab"]')
    await expect(tabs).toHaveCount(4)

    // Navigate to admin
    await tabs.filter({ hasText: 'Admin' }).click()
    await expect(page.locator('.admin-page, [role="status"]')).toBeVisible()

    // Navigate to settings
    await tabs.filter({ hasText: 'Settings' }).click()
    await expect(page.locator('.settings-page, [role="form"]')).toBeVisible()
  })

  test('theme toggle works', async ({ page }) => {
    await page.goto('/')
    const app = page.locator('.app')
    const initialTheme = await app.getAttribute('data-theme')

    await page.click('[aria-label*="mode"]')
    const newTheme = await app.getAttribute('data-theme')
    expect(newTheme).not.toBe(initialTheme)
  })

  test('prompt input accepts text', async ({ page }) => {
    await page.goto('/')
    const input = page.locator('[aria-label="Message input"]')
    await input.fill('Hello FusionAGI')
    await expect(input).toHaveValue('Hello FusionAGI')
  })

  test('login page shows when not authenticated', async ({ page }) => {
    await page.addInitScript(() => {
      localStorage.removeItem('fusionagi-token')
    })
    await page.goto('/')
    await expect(page.locator('.login-page, input[type="password"], input[type="text"]')).toBeVisible()
  })
})

test.describe('Mobile', () => {
  test.beforeEach(async ({ page }) => {
    await page.addInitScript(() => {
      localStorage.setItem('fusionagi-token', 'test-e2e-token')
    })
  })

  test('renders on mobile viewport', async ({ page }) => {
    await page.setViewportSize({ width: 375, height: 812 })
    await page.goto('/')
    await expect(page.locator('.app')).toBeVisible()
  })
})