// @ts-check
const { test, expect } = require('@playwright/test');

const fixtures = JSON.parse(process.env.E2E_FIXTURES || '{}');

test.describe('Credentials page', () => {
  test.beforeEach(async ({ page }) => {
    // Log in with dedicated credentials user
    await page.goto('/login');
    await page.fill('#username', fixtures.cred_username);
    await page.fill('#password', fixtures.cred_password);
    await page.click('form[hx-post="/login/password"] button[type="submit"]');
    await page.waitForURL('**/manage/credentials', { timeout: 5000 });
  });

  test.describe('Page structure', () => {
    test('title contains Credentials and Porchlight', async ({ page }) => {
      await expect(page).toHaveTitle(/Credentials/);
      await expect(page).toHaveTitle(/Porchlight/);
    });

    test('H1 says "Credentials"', async ({ page }) => {
      await expect(page.locator('h1')).toHaveText('Credentials');
    });

    test('security keys heading is visible', async ({ page }) => {
      await expect(page.locator('h2:has-text("Security keys")')).toBeVisible();
    });

    test('add security key button is visible', async ({ page }) => {
      await expect(page.locator('#webauthn-register-btn')).toBeVisible();
    });

    test('password heading is visible', async ({ page }) => {
      await expect(page.locator('h2:has-text("Password")')).toBeVisible();
    });

    test('password section is visible', async ({ page }) => {
      await expect(page.locator('#password-section')).toBeVisible();
    });
  });

  test.describe('Password validation', () => {
    test('shows mismatch error', async ({ page }) => {
      await page.fill('#password', 'newpassword1');
      await page.fill('#confirm', 'newpassword2');
      await page.click('#password-section button[type="submit"]');

      const alert = page.locator('#password-section [role="alert"]');
      await expect(alert).toBeVisible({ timeout: 5000 });
      await expect(alert).toContainText('do not match');
    });

    test('password input has minlength="8"', async ({ page }) => {
      await expect(page.locator('#password')).toHaveAttribute('minlength', '8');
    });

    test('confirm input has minlength="8"', async ({ page }) => {
      await expect(page.locator('#confirm')).toHaveAttribute('minlength', '8');
    });
  });

  test.describe('Password change', () => {
    test('succeeds with matching passwords', async ({ page }) => {
      await page.fill('#password', 'newpassword123');
      await page.fill('#confirm', 'newpassword123');
      await page.click('#password-section button[type="submit"]');

      const status = page.locator('#password-section [role="status"]');
      await expect(status).toBeVisible({ timeout: 5000 });
      await expect(status).toContainText('Password updated');
    });
  });
});