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

test.describe('System: Status', () => {
  test('status page loads', async ({ adminPage }) => {
    await adminPage.goto('/admin/system/status');
    await expect(adminPage).toHaveURL(/\/system\/status/);

    // Page should have rendered content
    await expect(adminPage.locator('h3')).toBeVisible({ timeout: 5_000 });
  });

  test('feature flags section heading is visible', async ({ adminPage }) => {
    await adminPage.goto('/admin/system/status');
    await expect(adminPage).toHaveURL(/\/system\/status/);

    // The status page has an h3 "Features" heading
    const heading = adminPage.locator('h3', { hasText: 'Features' });
    await expect(heading).toBeVisible({ timeout: 5_000 });
  });

  test('feature flags are displayed with correct icons', async ({ adminPage, features }) => {
    await adminPage.goto('/admin/system/status');
    // The fixture session is fresh; landing anywhere else is a failure.
    await expect(adminPage).toHaveURL(/\/system\/status/);

    const featureList = adminPage.locator('[data-testid="feature-list"]');
    await expect(featureList).toBeVisible({ timeout: UI_SETTLE_TIMEOUT });

    // Build the expected feature entries from the fixture
    const featureEntries = Object.entries(features).filter(
      ([, value]) => typeof value === 'boolean'
    ) as [string, boolean][];

    expect(featureEntries.length).toBeGreaterThan(0);

    // The status component renders one <li> per feature-flag entry with a
    // pi-check/pi-times icon (system-status.component.html). Every boolean
    // flag from the shared config MUST show up with the matching icon.
    for (const [key, enabled] of featureEntries) {
      const listItem = featureList
        .locator('li', { hasText: new RegExp(`^\\s*${key}\\s*$`) })
        .first();
      await expect(listItem).toBeVisible({ timeout: 5_000 });

      // Use evaluate to get icon class directly from DOM (bypasses Playwright selector issues)
      const iconClasses = await listItem.evaluate((li) => {
        const icon = li.querySelector('span, i');
        return icon ? icon.className : '';
      });
      expect(iconClasses).toContain('pi');
      if (enabled) {
        expect(iconClasses).toMatch(/pi-check/);
      } else {
        expect(iconClasses).toMatch(/pi-times/);
      }
    }
  });

  test('all feature flags from config are listed', async ({ adminPage, features }) => {
    await adminPage.goto('/admin/system/status');
    // The fixture session is fresh; landing anywhere else is a failure.
    await expect(adminPage).toHaveURL(/\/system\/status/);

    const featureList = adminPage.locator('[data-testid="feature-list"]');
    await expect(featureList).toBeVisible({ timeout: UI_SETTLE_TIMEOUT });

    // The component may render additional features (nested/system flags) beyond the boolean config entries
    const expectedMinCount = Object.entries(features).filter(
      ([, value]) => typeof value === 'boolean'
    ).length;
    const listItems = featureList.locator('li');
    const actualCount = await listItems.count();
    expect(actualCount).toBeGreaterThanOrEqual(expectedMinCount);
  });
});
