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

// ⛔ BUG ABIERTO: el mapa de /fires se queda EN GRIS cuando hay clave de Google
// Maps configurada — ni teselas, ni fuegos, ni suscripción por viewport, con el
// "Actualizando…" eterno. Es lo que se ve en staging.
//
// Lo que SÍ está establecido (2026-08-01):
//
//  1. NO es el navegador sin pantalla. El mismo Playwright headless pinta la
//     portada y /zones de staging, y pinta /fires perfectamente contra un
//     servidor local sin clave. La nota del plan que lo achacaba a eso es falsa.
//  2. Depende de la clave de Google. Basta con poner una clave (aunque sea
//     falsa) en settings-ci.json para reproducirlo en local: 15 teselas sin
//     clave, 0 con ella. Por eso settings-ci.json lleva una: para que esto se
//     vea aquí y no solo en staging.
//  3. El control de capas se monta con dos capas base y, al resolverse la clave,
//     se le añaden tres de Google. En esa segunda pasada react-leaflet se deja
//     por el camino la capa base marcada.
//  4. Montar el control UNA sola vez, esperando a la clave, arregla el caso
//     local pero ROMPE staging todavía más: allí la portada y /zones —que
//     funcionaban— se quedan también sin teselas, porque entonces el control
//     aparece después de que el mapa ya esté montado. Probado en staging,
//     revertido: no basta con mover el momento del montaje.
//
// El arreglo bueno pasa por que el conjunto de capas base esté decidido ANTES de
// montar el mapa (resolver la clave más arriba, o que GoogleMutantLayer sepa no
// hacer nada sin clave).
//
// Quedan como test.fixme para que salgan como pendientes en cada ejecución en
// vez de desaparecer en una nota. Quitar el .fixme al arreglarlo.
test.describe('mapa de fuegos activos', () => {
  test.fixme('paints its tiles', async ({ page }) => {
    await page.goto('/fires');
    await waitForMap(page);

    await expect(page.locator('.leaflet-tile-loaded').first()).toBeVisible({ timeout: 60000 });
    expect(await page.locator('.leaflet-tile').count()).toBeGreaterThan(0);
  });

  test.fixme('offers every base layer and keeps the checked one', async ({ page }) => {
    await page.goto('/fires');
    await waitForMap(page);

    const layers = page.locator('.leaflet-control-layers-base input');
    expect(await layers.count()).toBeGreaterThanOrEqual(2);
    // Exactamente una marcada, y el mapa con teselas: si la marcada se hubiera
    // perdido, seguiría marcada en el control pero no habría teselas.
    const checked = await page.locator('.leaflet-control-layers-base input:checked').count();
    expect(checked).toEqual(1);
    expect(await page.locator('.leaflet-tile').count()).toBeGreaterThan(0);
  });

  test.fixme('subscribes to the fires of the current viewport', async ({ page }) => {
    await page.goto('/fires');
    await waitForMap(page);

    const names = await page.evaluate(() => Object.values(window.Meteor.connection._subscriptions).map(s => s.name));
    expect(names).toContain('activefiresmyloc');
    expect(names).toContain('activefiresunionmyloc');
  });

  test.fixme('does not get stuck on "Actualizando…"', async ({ page }) => {
    await page.goto('/fires');
    await waitForMap(page);
    await page.waitForTimeout(5000);

    await expect(page.getByText('Actualizando...', { exact: false })).toHaveCount(0);
  });
});