import { test, expect } from '@playwright/test';
import { signUp, addZoneThroughTheMap, waitForMap } from '../support/app.js';

// This is the flow that froze staging on 2026-07-30: subscribing to a zone makes
// the server recompute the union of every subscription, and while that ran on the
// main thread DDP stopped answering and every browser hung. A green run here means
// the page came back, the union reached the client, and the map drew it.
test.describe('suscripción a una zona y unión de zonas', () => {
  test('creating a zone lists it and paints the union on both maps', async ({ page }) => {
    await signUp(page);
    await expect(page.getByText('No estás suscrito a fuegos en ninguna zona')).toBeVisible();

    await addZoneThroughTheMap(page);

    // Back on the zones page, the "you have no zones" warning is gone.
    await expect(page.getByText('No estás suscrito a fuegos en ninguna zona')).toHaveCount(0);

    // The union is a GeoJSON layer: leaflet draws it as an SVG path in the
    // overlay pane. Nothing is drawn there until the server has recomputed and
    // published it, so this also pins that the recompute finishes at all.
    await waitForMap(page);
    await expect(page.locator('.leaflet-overlay-pane path').first()).toBeVisible({ timeout: 60000 });

    await page.goto('/zones');
    await waitForMap(page);
    await expect(page.locator('.leaflet-overlay-pane path').first()).toBeVisible({ timeout: 60000 });
  });

  test('the site keeps answering while the union is recomputed', async ({ page }) => {
    await signUp(page);
    await addZoneThroughTheMap(page);

    // A DDP round trip right after the insert: if the union blocked the event
    // loop again, this navigation would hang instead of rendering.
    await page.goto('/fires');
    await waitForMap(page);
    await expect(page.locator('.leaflet-container').first()).toBeVisible();
  });

  // Removing is the other half of the same server-side path: it schedules a full
  // recompute instead of an incremental merge.
  test('a zone can be removed again from the map', async ({ page }) => {
    await signUp(page);
    await addZoneThroughTheMap(page);
    await expect(page.getByText('En verde, áreas de las que recibirás alertas de fuegos')).toBeVisible();

    await page.getByRole('button', { name: /Editar/i }).click();
    await page.locator('.leaflet-marker-icon').first().click();
    await expect(page.getByText('¿Estás seguro/a?')).toBeVisible();
    await page.getByRole('button', { name: 'Sí', exact: true }).click();

    await expect(page.getByText('No estás suscrito a fuegos en ninguna zona')).toBeVisible({ timeout: 60000 });
  });
});