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

async function waitForVehicleMarkers(page) {
  await page.waitForSelector('.leaflet-marker-icon', { state: 'attached' });
  await expect(page.locator('.leaflet-marker-icon')).toHaveCount(5, { timeout: 10000 });
}

test.describe('kort7 vehicle map', () => {
  test('loads map and renders vehicles', async ({ page }) => {
    await page.goto('/kort7.html');
    await expect(page.locator('#map')).toBeVisible();
    await waitForVehicleMarkers(page);
    await expect(page.locator('#status')).toContainText('Simuleret tid');
  });

  test('shows vehicle popup with details when clicking a marker', async ({ page }) => {
    await page.goto('/kort7.html');
    await waitForVehicleMarkers(page);

    const firstMarker = page.locator('.leaflet-marker-icon').first();
    await firstMarker.click();

    const popup = page.locator('.leaflet-popup');
    await expect(popup).toBeVisible();
    await expect(popup).toContainText(/Bil \d/);
    await expect(popup).toContainText('Tid:');
    await expect(popup).toContainText('Lat:');
    await expect(popup).toContainText('Lon:');
    await expect(popup).toContainText('Hastighed:');
    await expect(popup).toContainText('Retning:');
    await expect(popup).toContainText('Usikkerhed:');
    await expect(popup).toContainText('På kortet:');
  });

  test('renders uncertainty circles for vehicles with uncertainty', async ({ page }) => {
    await page.goto('/kort7.html');
    await waitForVehicleMarkers(page);

    await expect.poll(async () => {
      return await page.locator('path.leaflet-interactive').evaluateAll((nodes) =>
        nodes.filter((node) => {
          const strokeDasharray = node.getAttribute('stroke-dasharray');
          return strokeDasharray && strokeDasharray.length > 0;
        }).length
      );
    }).toBeGreaterThan(0);
  });

  test('playback updates simulation status over time', async ({ page }) => {
    await page.goto('/kort7.html');

    const status = page.locator('#status');
    await expect(status).toContainText('Simuleret tid: 0.0 s');

    await page.waitForTimeout(1800);

    const text = await status.textContent();
    const match = text.match(/Simuleret tid: ([\d.]+) s/);
    expect(match).not.toBeNull();
    expect(Number(match[1])).toBeGreaterThan(0.5);
  });
});