import { test, expect } from '@playwright/test';

test.describe('Maps', () => {
  test.describe('Network Map', () => {
    test('can view network map', async ({ page }) => {
      await page.goto('/map');

      await expect(page).toHaveURL(/\/map/);
      await expect(page.locator('body')).toBeVisible();
    });

    test('shows network topology', async ({ page }) => {
      await page.goto('/map');

      // Look for network graph/visualization
      const networkGraph = page.locator(
        '[data-graph], canvas, svg, [id*="network"]'
      ).first();

      if (await networkGraph.isVisible({ timeout: 3000 }).catch(() => false)) {
        await expect(networkGraph).toBeVisible();
      }
    });

    test('can filter network map', async ({ page }) => {
      await page.goto('/map');

      // Look for filter controls
      const filterControl = page.locator(
        'select, button:has-text("Filter"), input[type="search"]'
      ).first();

      if (await filterControl.isVisible()) {
        await filterControl.click();
        await page.waitForTimeout(500);
      }
    });

    test('can view device details from map', async ({ page }) => {
      await page.goto('/map');

      // Look for clickable nodes
      const deviceNode = page.locator(
        '[data-device], [data-node], circle, rect'
      ).first();

      if (await deviceNode.isVisible({ timeout: 2000 }).catch(() => false)) {
        await deviceNode.click();
        await page.waitForTimeout(500);
      }
    });
  });

  test.describe('Location Map', () => {
    test('can view location map', async ({ page }) => {
      await page.goto('/map/location');

      await expect(page).toHaveURL(/\/map\/location/);
      await expect(page.locator('body')).toBeVisible();
    });

    test('shows geographic map', async ({ page }) => {
      await page.goto('/map/location');

      // Look for map container (Leaflet, Google Maps, etc.)
      const mapContainer = page.locator(
        '[id*="map"], .leaflet-container, [class*="map"]'
      ).first();

      if (await mapContainer.isVisible({ timeout: 3000 }).catch(() => false)) {
        await expect(mapContainer).toBeVisible();
      }
    });

    test('can zoom in/out on location map', async ({ page }) => {
      await page.goto('/map/location');

      // Look for zoom controls
      const zoomIn = page.locator(
        'button[aria-label*="Zoom in"], .leaflet-control-zoom-in, [title*="Zoom in"]'
      ).first();

      if (await zoomIn.isVisible({ timeout: 2000 }).catch(() => false)) {
        await zoomIn.click();
        await page.waitForTimeout(300);
      }
    });

    test('can view site markers', async ({ page }) => {
      await page.goto('/map/location');

      // Look for map markers
      const marker = page.locator(
        '[data-marker], .leaflet-marker-icon, [class*="marker"]'
      ).first();

      if (await marker.isVisible({ timeout: 2000 }).catch(() => false)) {
        await marker.click();
        await page.waitForTimeout(500);
      }
    });
  });
});