knowfoolery/frontend/apps/web/e2e/critical-flows-extended.spec.ts

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

async function setInputValue(selector: string, value: string, page: Page): Promise<void> {
  await page.locator(selector).evaluate((el, next) => {
    const input = el as HTMLInputElement
    input.value = next
    input.dispatchEvent(new Event('input', { bubbles: true }))
    input.dispatchEvent(new Event('change', { bubbles: true }))
  }, value)
}

test.describe('critical frontend flows - extended', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.clear()
    })
  })

  test('profile route requires auth, then allows access after demo login', async ({ page }) => {
    await page.goto('/profile')

    await expect(page.getByText('Connexion requise pour accéder au profil joueur.')).toBeVisible()
    await page.getByRole('button', { name: 'Se connecter (mode démo)' }).click()

    await expect(page.getByText('Statistiques joueur')).toBeVisible()
    await expect(page.getByText(/Parties jouées/i)).toBeVisible()
  })

  test('start new game from home and render first playable question', async ({ page }) => {
    await page.goto('/')
    await setInputValue('[data-testid="home-player-name-input"]', 'E2E Player', page)
    await page.getByRole('button', { name: 'Démarrer la partie' }).click()

    await expect(page).toHaveURL(/\/game$/)
    await expect(page.getByRole('heading', { name: 'Partie' })).toBeVisible()
    await expect(page.getByText('Thème : Général')).toBeVisible()
    await expect(page.getByText('Quel est le plus petit nombre premier ?')).toBeVisible()
    await expect(page.getByLabel('Ta réponse')).toBeVisible()
    await expect(page.getByText('3 restant(s)')).toBeVisible()
  })

  test('hint usage reduces awarded score for a correct answer', async ({ page }) => {
    await page.goto('/game')

    await page.getByRole('button', { name: 'Indice (score réduit)' }).click()
    await expect(page.getByText('Confirmer l’indice')).toBeVisible()
    await page.locator('button', { hasText: 'Oui, utiliser un indice' }).click()

    await expect(page.getByText(/Indice:/i)).toBeVisible()

    await setInputValue('[data-testid="game-answer-input"]', '2', page)
    await page.getByRole('button', { name: 'Envoyer' }).click()

    await expect(page).toHaveURL(/\/game$/)
    await expect(page.getByText('Score: 1')).toBeVisible()
    await expect(page.getByText('Quelle planète est surnommée la planète rouge ?')).toBeVisible()

    await setInputValue('[data-testid="game-answer-input"]', 'mars', page)
    await page.getByRole('button', { name: 'Envoyer' }).click()

    await expect(page).toHaveURL(/\/results$/)
    await expect(page.getByText('Score final : 3')).toBeVisible()
  })

  test('after 3 wrong answers, game advances to next question', async ({ page }) => {
    await page.goto('/game')
    await setInputValue('[data-testid="game-answer-input"]', 'wrong', page)
    await page.getByRole('button', { name: 'Envoyer' }).click()
    await setInputValue('[data-testid="game-answer-input"]', 'wrong', page)
    await page.getByRole('button', { name: 'Envoyer' }).click()
    await setInputValue('[data-testid="game-answer-input"]', 'wrong', page)
    await page.getByRole('button', { name: 'Envoyer' }).click()

    await expect(page).toHaveURL(/\/game$/)
    await expect(page.getByText('Quelle planète est surnommée la planète rouge ?')).toBeVisible()
    await expect(page.getByText("Plus d'essais.")).not.toBeVisible()
  })

  test('session timeout ends game and redirects to results', async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.setItem('kf.e2e.timerMs', '300')
    })
    await page.goto('/game')
    await expect(page.getByRole('heading', { name: 'Partie' })).toBeVisible()

    await expect(page).toHaveURL(/\/results$/)
    await expect(page.getByText('Score final : 0')).toBeVisible()
  })

  test('results remain visible after page reload', async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.setItem(
        'kf.lastResult',
        JSON.stringify({
          playerName: 'Reload Tester',
          finalScore: 7,
          answered: 4,
          correct: 3,
          successRate: 75,
          durationSec: 95,
          leaderboardPosition: 2,
          finishedAt: new Date().toISOString(),
        })
      )
    })

    await page.goto('/results')
    await expect(page.getByText('Score final : 7')).toBeVisible()
    await page.reload()
    await expect(page.getByText('Score final : 7')).toBeVisible()
    await expect(page.getByText('Position leaderboard : #2')).toBeVisible()
  })

  test('leaderboard shows empty and error states from API', async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.setItem('kf.leaderboard.mode', 'api')
    })
    await page.route('**/leaderboard/top10', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({ items: [] }),
      })
    })
    await page.goto('/leaderboard')
    await expect(page.getByText('Aucun score pour le moment.')).toBeVisible()

    await page.unroute('**/leaderboard/top10')
    await page.route('**/leaderboard/top10', async (route) => {
      await route.fulfill({
        status: 500,
        contentType: 'application/json',
        body: JSON.stringify({ error: 'boom' }),
      })
    })
    await page.getByRole('button', { name: 'Rafraîchir' }).click()
    await expect(
      page.getByText('Impossible de charger le leaderboard. Veuillez réessayer.')
    ).toBeVisible()
  })

  test('admin can create, edit, then delete a question', async ({ page }) => {
    await page.goto('/admin/questions')

    await setInputValue('[data-testid="admin-theme-input"]', 'Science', page)
    await setInputValue('[data-testid="admin-question-input"]', 'Quelle planète est rouge ?', page)
    await setInputValue('[data-testid="admin-answer-input"]', 'Mars', page)
    await setInputValue('[data-testid="admin-hint-input"]', '4e planète', page)
    await page.getByTestId('admin-create-question').click()
    await expect(page.getByText('Quelle planète est rouge ?')).toBeVisible()

    await page
      .getByRole('button', { name: /Modifier/i })
      .first()
      .click()
    await setInputValue(
      '[data-testid="admin-question-input"]',
      'Quelle planète est appelée planète rouge ?',
      page
    )
    await page.getByRole('button', { name: /Enregistrer la modification/i }).click()
    await expect(page.getByText('Quelle planète est appelée planète rouge ?')).toBeVisible()

    await page.getByRole('button', { name: 'Supprimer' }).first().click()
    await expect(page.getByText('Quelle planète est appelée planète rouge ?')).toHaveCount(0)
  })

  test('admin form validation blocks invalid submission', async ({ page }) => {
    await page.goto('/admin/questions')

    await page.getByTestId('admin-theme-input').fill('')
    await page.getByTestId('admin-question-input').fill('')
    await page.getByTestId('admin-answer-input').fill('')
    await page.getByTestId('admin-create-question').click()

    await expect(page.getByText('Theme, question et réponse sont requis.')).toBeVisible()
  })
})

test.describe('critical frontend flows - mobile viewport', () => {
  test.use({ viewport: { width: 390, height: 844 } })

  test('mobile player flow keeps core controls visible', async ({ page }) => {
    await page.goto('/')
    await page.evaluate(() => {
      localStorage.clear()
    })

    await setInputValue('[data-testid="home-player-name-input"]', 'Mobile Player', page)
    await page.getByRole('button', { name: 'Démarrer la partie' }).click()

    await expect(page).toHaveURL(/\/game$/)
    await expect(page.getByRole('button', { name: 'Envoyer' })).toBeVisible()
    await expect(page.getByRole('button', { name: 'Indice (score réduit)' })).toBeVisible()
    await expect(page.getByLabel('Ta réponse')).toBeVisible()
  })
})