import { test, expect } from '@playwright/test';
import { login, resetToAmsterdam } from './utils/auth';

const PAGE = '/cgi-bin/luci/admin/services/zt-gateway';

test.describe('Health dots', () => {
  test.beforeEach(async ({ page }) => {
    await login(page);
    await resetToAmsterdam(page);
    await page.goto(PAGE);
    await page.waitForSelector('.zt-gateways', { timeout: 15_000 });
  });

  test.afterEach(async ({ page }) => {
    await resetToAmsterdam(page);
  });

  test('health dots update after poll refresh', async ({ page }) => {
    // On initial render every health dot is DOWN (renderHealthDot(false, null)).
    const allDots = page.locator('.zt-health');
    const count = await allDots.count();
    expect(count).toBeGreaterThan(0);

    for (let i = 0; i < count; i++) {
      await expect(allDots.nth(i)).toHaveClass(/zt-health-down/);
    }

    // Wait for the first Poll.add(refreshState, 5) cycle plus
    // async health-check latency.
    await page.waitForTimeout(8000);

    // At least one dot should now be UP (amsterdam is reachable on 10.99.12.3).
    await expect(page.locator('.zt-health-up').first()).toBeVisible();

    // Amsterdam's row specifically must be healthy.
    const amsterdamRow = page.locator('.zt-gateway-row[data-region="amsterdam"]');
    await expect(amsterdamRow.locator('.zt-health')).toHaveClass(/zt-health-up/);
  });
});