// apps/client/test/e2e/login-contrast.e2e.test.ts
// [int->REQ-CLI-06] [unit->REQ-CLI-02]
//
// Plan 06-10 Task 2 — WCAG AA contrast regression guard for the LoginScene
// DOM form. Closes UAT Finding #1 (D-23): black-on-near-black text against
// the #0A0E1A background at Windows 125% scaling.
//
// Selector strategy (Task 0 / D-33 verified):
//   - Form root:       form#login-form
//   - Heading:         form#login-form h1
//   - Username label:  form#login-form label[for="username"]
//     (wrapping <label for="username"> that contains input#username)
//   - Password label:  form#login-form label[for="password"]
//   - Username input:  form#login-form input#username
//   - Password input:  form#login-form input#password
//   - Submit CTA:      form#login-form button[type="submit"]
//   - Error region:    form#login-form #error
//
// All selectors derived from ACTUAL markup in apps/client/public/forms/login.html
// (Task 0 inspection). Contrast ratios pre-verified by hand before this file
// was written (Task 0 WCAG table — all text pairs ≥ 4.5:1).
//
// Hand-calculated WCAG contrast ratios (Task 0 / D-33):
//   #F3F4F6 on #0A0E1A  → 17.50:1  (heading, labels)
//   #F3F4F6 on #1F2937  → 13.34:1  (input text on secondary bg)
//   #0A0E1A on #22D3EE  → 10.65:1  (CTA text on accent)
//   #EF4444 on #0A0E1A  →  5.12:1  (error text — passes ≥ 4.5:1)
//
// Test structure: 6 contrast probes (≥ 4.5:1) + 1 focus-border probe (#22D3EE).

import { test, expect, computeContrastInPage } from './fixtures.js';

// Helper: evaluate the in-page contrast function for a selector
type ContrastResult = { fg: string; bg: string; ratio: number };

async function getContrast(
  page: import('@playwright/test').Page,
  selector: string,
): Promise<ContrastResult> {
  // eslint-disable-next-line @typescript-eslint/no-implied-eval
  return page.evaluate(
    new Function('selector', `return (${computeContrastInPage})(selector)`) as (
      sel: string,
    ) => ContrastResult,
    selector,
  );
}

// ---------------------------------------------------------------------------
// Suite: LoginScene contrast — WCAG AA ≥ 4.5:1 for every visible text element
// ---------------------------------------------------------------------------
test.describe('LoginScene contrast', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to the root; LoginScene mounts the DOM form on load.
    // Wait for the form heading to confirm the form is present in the DOM.
    await page.goto('/');
    await page.waitForSelector('form#login-form h1', { timeout: 15_000 });
  });

  // --- Test 1: heading contrast ---
  test('heading has ≥ 4.5:1 contrast ratio on #0A0E1A background', async ({
    page,
  }) => {
    const result = await getContrast(page, 'form#login-form h1');
    expect(result.ratio, `Heading contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 2a: Username label contrast ---
  test('username label has ≥ 4.5:1 contrast ratio', async ({ page }) => {
    const result = await getContrast(page, 'form#login-form label[for="username"]');
    expect(result.ratio, `Username label contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 2b: Password label contrast ---
  test('password label has ≥ 4.5:1 contrast ratio', async ({ page }) => {
    const result = await getContrast(page, 'form#login-form label[for="password"]');
    expect(result.ratio, `Password label contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 2c: Username input text contrast ---
  test('username input text has ≥ 4.5:1 contrast ratio', async ({ page }) => {
    const result = await getContrast(page, 'form#login-form input#username');
    expect(result.ratio, `Username input contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 2d: Password input text contrast ---
  test('password input text has ≥ 4.5:1 contrast ratio', async ({ page }) => {
    const result = await getContrast(page, 'form#login-form input#password');
    expect(result.ratio, `Password input contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 2e: CTA button contrast ---
  test('submit CTA button text has ≥ 4.5:1 contrast ratio', async ({
    page,
  }) => {
    const result = await getContrast(page, 'form#login-form button[type="submit"]');
    expect(result.ratio, `CTA button contrast: fg=${result.fg} bg=${result.bg}`).toBeGreaterThanOrEqual(4.5);
  });

  // --- Test 3: Focus border color = #22D3EE (accent) ---
  test('focused input border-color is accent #22D3EE (rgb 34,211,238)', async ({
    page,
  }) => {
    // Focus the username input and read its computed border-color
    const borderColor = await page.evaluate(() => {
      const el = document.querySelector('form#login-form input#username') as HTMLElement | null;
      if (!el) throw new Error('Username input not found');
      el.focus();
      return window.getComputedStyle(el).borderColor;
    });
    // Playwright normalize: browser may return "rgb(34, 211, 238)" or similar
    expect(borderColor).toMatch(/rgb\(34,\s*211,\s*238\)/);
  });
});
