/**
 * E2E test: User settings persistence.
 *
 * Validates that a user can:
 * 1. Navigate to /settings
 * 2. Change the theme input
 * 3. Save
 * 4. Reload the page
 * 5. Assert the theme value persisted
 */

import { test, expect } from '@playwright/test';
import { loginAsUser } from '../helpers/auth';

test.describe('Settings', () => {
  test('should save and persist theme setting across page reloads', async ({
    page,
  }) => {
    // Step 1: Login as regular user via cookie injection
    await loginAsUser(page);

    // Step 2: Navigate to settings
    await page.goto('/settings');

    // Wait for the settings page to load
    await expect(
      page.locator('h1', { hasText: 'Parametres de generation' }),
    ).toBeVisible({ timeout: 10_000 });

    // Step 3: Change the theme input to "Cybersecurite"
    const themeInput = page.locator('#theme');
    await expect(themeInput).toBeVisible();

    // Clear existing value and type new one
    await themeInput.fill('Cybersecurite');

    // Verify the input has the new value
    await expect(themeInput).toHaveValue('Cybersecurite');

    // Step 4: Click the save button
    const saveButton = page.locator('button', {
      hasText: 'Enregistrer les parametres',
    });
    await saveButton.click();

    // Wait for save confirmation message
    await expect(
      page.getByText('Parametres enregistres avec succes'),
    ).toBeVisible({ timeout: 5_000 });

    // Step 5: Reload the page
    await page.reload();

    // Wait for the settings page to reload
    await expect(
      page.locator('h1', { hasText: 'Parametres de generation' }),
    ).toBeVisible({ timeout: 10_000 });

    // Step 6: Assert the theme input value is "Cybersecurite"
    await expect(page.locator('#theme')).toHaveValue('Cybersecurite');
  });
});