import { test, expect } from '@playwright/test'
import { mockApi } from './support/mockApi'
import { mockCurrentUser } from '../mocks/fixtures'

const photo = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" fill="green"/></svg>'

test('shows Microsoft photo in profile and topbar, including mobile layout', async ({ page }) => {
  await mockApi(page, { authenticated: true })
  await page.route('**/api/v1/users/me/photo', route => route.fulfill({
    status: 200,
    contentType: 'image/svg+xml',
    body: photo,
  }))

  await page.goto('/profile')
  await expect(page.locator('.user-info img')).toBeVisible()
  await expect(page.locator('.avatar-photo')).toBeVisible()

  await page.setViewportSize({ width: 390, height: 844 })
  await expect(page.locator('.user-info img')).toBeVisible()
  await expect(page.locator('.avatar-photo')).toBeVisible()
})

test('keeps custom avatar without requesting Microsoft photo', async ({ page }) => {
  await mockApi(page, { authenticated: true })
  let photoRequests = 0
  await page.route('**/api/v1/auth/me', route => route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ ...mockCurrentUser, avatarUrl: `data:image/svg+xml,${encodeURIComponent(photo)}` }),
  }))
  await page.route('**/api/v1/users/me/photo', route => {
    photoRequests++
    return route.fulfill({ status: 404 })
  })

  await page.goto('/profile')
  await expect(page.locator('.user-info img')).toBeVisible()
  expect(photoRequests).toBe(0)
})

test('uses placeholder when Microsoft photo is unavailable', async ({ page }) => {
  await mockApi(page, { authenticated: true })
  await page.route('**/api/v1/users/me/photo', route => route.fulfill({ status: 404 }))

  await page.goto('/profile')
  await expect(page.locator('.user-info .avatar span')).toBeVisible()
  await expect(page.locator('.avatar-icon')).toBeVisible()
})