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

test.describe('Vue App', () => {
  test('visits the app root url', async ({ page }) => {
    await page.goto('/')
    await expect(page.locator('h1')).toHaveText('You did it!')
  })

  test('displays Vue documentation link', async ({ page }) => {
    await page.goto('/')
    const link = page.locator('a[href="https://vuejs.org/"]')
    await expect(link).toBeVisible()
    await expect(link).toHaveText('vuejs.org')
    await expect(link).toHaveAttribute('target', '_blank')
    await expect(link).toHaveAttribute('rel', 'noopener')
  })

  test('displays button with initial name state', async ({ page }) => {
    await page.goto('/')
    const button = page.locator('button[aria-label="get name"]')
    await expect(button).toBeVisible()
    await expect(button).toHaveText('Name from API is: Unknown')
  })

  test('button click triggers API call', async ({ page }) => {
    await page.goto('/')

    await page.route('/api/', async (route) => {
      await route.fulfill({
        contentType: 'application/json',
        body: JSON.stringify({ name: 'Test User' }),
      })
    })

    const button = page.locator('button[aria-label="get name"]')
    await button.click()

    await expect(button).toHaveText('Name from API is: Test User')
  })

  test('handles API error gracefully', async ({ page }) => {
    await page.goto('/')

    await page.route('/api/', async (route) => {
      await route.abort('failed')
    })

    const button = page.locator('button[aria-label="get name"]')
    await button.click()

    await expect(button).toHaveText('Name from API is: Unknown')
  })

  test('app-layout is present', async ({ page }) => {
    await page.goto('/')
    const appLayout = page.locator('.app-layout')
    await expect(appLayout).toBeVisible()
  })
})