// Cobertura de lo integrado tras los parches de render, editor/toolbar y lógica:
// scroll inicial, zoom manual, JSON malicioso, recortes al importar, contador
// de pasos, horas e IDs de sesión, formato WhatsApp, citas y documentos.
import {
  test, expect, estado, filasChat, filaChat, cargarEstado, rapido, irA, URL_FILE, tarjetas,
} from "./fixtures.mjs";

async function importar(page, datos, nombre = "demo.json") {
  const buffer = Buffer.from(typeof datos === "string" ? datos : JSON.stringify(datos));
  await page.locator("#btn-importar").click();
  const confirmar = page.locator("#dlg-confirmar");
  const [chooser] = await Promise.all([
    page.waitForEvent("filechooser"),
    (async () => {
      if (await confirmar.isVisible().catch(() => false)) {
        await confirmar.getByRole("button", { name: "Elegir archivo…" }).click();
      }
    })(),
  ]);
  await chooser.setFiles({ name: nombre, mimeType: "application/json", buffer });
}

const alFondo = (page) => page.evaluate(() => {
  const c = document.getElementById("chat-cuerpo");
  return Math.abs(c.scrollHeight - c.clientHeight - c.scrollTop) <= 2;
});

function estadoCon(mensajes, extra = {}) {
  return { version: 1, tema: "claro", cuenta: { nombre: "Prueba", verificado: false }, mensajes, ...extra };
}

test.describe("Scroll inicial del chat", () => {
  test("al cargar, el chat queda pegado al último mensaje", async ({ app }) => {
    await expect.poll(() => alFondo(app), { timeout: 5000 }).toBe(true);
    // y sigue abajo tras recargar (imágenes data:SVG que decodifican tarde)
    await app.reload();
    await expect.poll(() => alFondo(app), { timeout: 5000 }).toBe(true);
  });

  test("por file:// también arranca abajo", async ({ page }) => {
    await irA(page, URL_FILE);
    await expect.poll(() => alFondo(page), { timeout: 5000 }).toBe(true);
  });
});

test.describe("Zoom manual", () => {
  const ancho = (page) => page.locator("#iphone").evaluate((el) => el.getBoundingClientRect().width);

  test("Ajustar / 100 % / 125 % cambian la escala y se recuerda", async ({ app }) => {
    const sel = app.locator("#sel-zoom");
    await expect(sel).toBeVisible();
    await expect(sel).toHaveValue("");
    const ajustado = await ancho(app);
    await sel.selectOption("125");
    await expect(app.locator("body")).toHaveAttribute("data-wam-zoom", "125");
    await expect.poll(() => ancho(app)).toBeGreaterThan(ajustado);
    const grande = await ancho(app);
    await sel.selectOption("100");
    await expect(app.locator("body")).toHaveAttribute("data-wam-zoom", "100");
    await expect.poll(() => ancho(app)).toBeLessThan(grande);
    await app.reload();
    await expect(app.locator("body")).toHaveAttribute("data-wam-zoom", "100");
    await expect(app.locator("#sel-zoom")).toHaveValue("100");
    await app.locator("#sel-zoom").selectOption("");
    await expect(app.locator("body")).not.toHaveAttribute("data-wam-zoom", /.*/);
    await expect.poll(() => ancho(app)).toBeCloseTo(ajustado, 0);
  });

  test("en Presentación manda el ajuste automático", async ({ app }) => {
    await app.locator("#sel-zoom").selectOption("125");
    await app.locator("#btn-presentacion").click();
    await expect(app.locator("body")).toHaveClass(/presentacion/);
    const caja = await app.locator("#iphone").boundingBox();
    const vh = app.viewportSize().height;
    expect(caja.y + caja.height).toBeLessThanOrEqual(vh + 1);
    await app.keyboard.press("Escape");
    await expect(app.locator("body")).not.toHaveClass(/presentacion/);
  });
});

test.describe("JSON malicioso", () => {
  test("importar HTML y URLs peligrosas no ejecuta nada ni inyecta nodos", async ({ app }) => {
    const img = '<img src=x onerror="window.__xss=1">';
    await importar(app, estadoCon([
      { id: "m1", dir: "in", tipo: "text", hora: "10:00", texto: img + " *hola* <script>window.__xss=2</script>" },
      {
        id: "m2", dir: "in", tipo: "template", hora: "10:01", headerTipo: "texto", headerTexto: img, body: img,
        botones: [
          { texto: img, url: "javascript:window.__xss=3" },
          { texto: "Datos", url: "data:text/html,<script>window.__xss=4</script>" },
        ],
      },
      {
        id: "m3", dir: "in", tipo: "carousel", hora: "10:02", body: "",
        cards: [
          { media: "javascript:alert(1)", texto: img, textoBoton: "Ver", url: "vbscript:msgbox(1)" },
          { media: "", texto: "ok", textoBoton: "Ver" },
        ],
      },
      {
        id: "m4", dir: "in", tipo: "list", hora: "10:03", body: "Menú", boton: img,
        secciones: [{ titulo: img, filas: [{ id: "f1", titulo: img, descripcion: img }] }],
      },
      { id: "m5", dir: "in", tipo: "image", hora: "10:04", src: "javascript:window.__xss=5", caption: img },
    ], { cuenta: { nombre: img, avatar: "javascript:window.__xss=6", verificado: false } }));
    await expect.poll(async () => (await estado(app)).mensajes.length).toBe(5);
    const e = await estado(app);
    // URLs peligrosas bloqueadas y marcadas
    expect(e.mensajes[1].botones[0]).toMatchObject({ url: "", urlBloqueada: true });
    expect(e.mensajes[1].botones[1]).toMatchObject({ url: "", urlBloqueada: true });
    expect(e.mensajes[2].cards[0]).toMatchObject({ url: "", urlBloqueada: true });
    expect(e.mensajes[4].src).toBe("");
    // nada ejecutable en el DOM del chat ni del editor
    const sospechosos = await app.evaluate(() => ({
      scripts: document.querySelectorAll("#pantalla script, #panel-editor script").length,
      onerror: document.querySelectorAll("[onerror]").length,
      jsHref: document.querySelectorAll('a[href^="javascript"], a[href^="data:text"], a[href^="vbscript"]').length,
      jsSrc: Array.from(document.querySelectorAll("img, video")).filter((el) => /^javascript:/i.test(el.getAttribute("src") || "")).length,
    }));
    expect(sospechosos).toEqual({ scripts: 0, onerror: 0, jsHref: 0, jsSrc: 0 });
    // el texto se ve literal
    await expect(filaChat(app, "m1")).toContainText("<img src=x");
    await expect(app.locator("#chat-nombre")).toContainText("<img src=x");
    // botones bloqueados: inertes, sin flujo
    await expect(filaChat(app, "m2").locator(".qr-btn-inactiva")).toHaveCount(2);
    await expect(filaChat(app, "m2").locator("[data-flujo]")).toHaveCount(0);
    await expect(filaChat(app, "m3").locator(".card").first().locator(".qr-btn-inactiva")).toHaveCount(1);
    const n = await filasChat(app).count();
    await filaChat(app, "m2").locator(".qr-btn-inactiva").first().click({ force: true });
    await app.waitForTimeout(600);
    await expect(filasChat(app)).toHaveCount(n);
    // la hoja de lista también pinta texto literal
    await filaChat(app, "m4").locator("[data-flujo]").click();
    await expect(app.locator(".sheet-panel").first()).toContainText("<img src=x");
    expect(await app.evaluate(() => window.__xss)).toBeUndefined();
    expect(await app.evaluate(() => document.querySelectorAll("[onerror]").length)).toBe(0);
  });

  test("editar a mano la URL de un botón bloqueado retira la marca", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "m1", dir: "in", tipo: "template", hora: "10:00", body: "b", botones: [{ texto: "Ir", url: "javascript:1" }] },
    ]));
    expect((await estado(app)).mensajes[0].botones[0].urlBloqueada).toBe(true);
    await app.evaluate(() => WAM.setCampo("mensajes.0.botones.0.url", "https://example.com"));
    const b = (await estado(app)).mensajes[0].botones[0];
    expect(b.urlBloqueada).toBeUndefined();
    await expect(filaChat(app, "m1").locator('a.qr-btn[href="https://example.com"]')).toHaveCount(1);
  });

  test("un JSON enorme se recorta y el aviso lo cuenta", async ({ app }) => {
    const mensajes = Array.from({ length: 505 }, (_, i) => ({ id: "m" + (i + 1), dir: "in", tipo: "text", hora: "10:00", texto: "n" + i }));
    await importar(app, estadoCon(mensajes));
    await expect.poll(async () => (await estado(app)).mensajes.length, { timeout: 15000 }).toBe(500);
    await expect(app.getByText("Se importaron 500 de 505 mensajes")).toBeVisible();
    // el resumen no se guarda ni se exporta
    const guardado = await app.evaluate(() => { WAM.guardarYa(); return localStorage.getItem("wam-mockup-v1"); });
    expect(guardado).not.toContain("__recortes");
  });
});

test.describe("Demo: contador, horas e IDs de sesión", () => {
  const GUION = estadoCon([
    { id: "m1", dir: "in", tipo: "text", hora: "10:30", texto: "Hola" },
    { id: "m2", dir: "out", tipo: "text", hora: "10:31", texto: "Buenas", estado: "read" },
    { id: "m3", dir: "in", tipo: "text", hora: "10:33", texto: "¿Qué tal?" },
  ]);

  test("mientras corre se ve «Paso N/M» y el botón muestra Detener", async ({ app }) => {
    await cargarEstado(app, GUION);
    await rapido(app);
    const paso = app.locator("#demo-paso");
    await expect(paso).toBeHidden();
    await app.locator("#btn-reproducir").click();
    await expect(paso).toBeVisible();
    await expect(paso).toHaveText(/Paso \d+\/3/);
    await expect(app.locator("#btn-reproducir")).toContainText("Detener");
    await expect.poll(() => app.evaluate(() => WAM.demoActiva()), { timeout: 10000 }).toBe(false);
    await expect(paso).toBeHidden();
    await expect(app.locator("#btn-reproducir")).toContainText("Reproducir demo");
  });

  test("la saliente de un botón toma la hora del último mensaje + 1 min", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "m1", dir: "in", tipo: "text", hora: "10:30", texto: "Hola" },
      {
        id: "m2", dir: "in", tipo: "buttons", hora: "10:33", body: "¿Qué quieres?",
        botones: [{ texto: "Precios", respuestas: [{ id: "m3", dir: "in", tipo: "text", hora: "", texto: "Barato" }] }],
      },
    ]));
    await rapido(app);
    await filaChat(app, "m2").locator("[data-flujo]").first().click();
    const out = app.locator('#chat-cuerpo li.out[data-id^="s"]').last();
    await expect(out).toContainText("Precios");
    await expect(out.locator(".meta")).toContainText("10:34");
    const resp = app.locator('#chat-cuerpo li.in[data-id^="s"]').last();
    await expect(resp).toContainText("Barato", { timeout: 6000 });
    await expect(resp.locator(".meta")).toContainText("10:35");
  });

  test("los IDs de sesión no chocan con los del guion", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "s1", dir: "in", tipo: "text", hora: "10:00", texto: "uno" },
      { id: "s2", dir: "in", tipo: "text", hora: "10:01", texto: "dos" },
    ]));
    await app.locator("#composer-input").fill("tres");
    await app.locator("#composer-input").press("Enter");
    const ids = await app.locator("#chat-cuerpo > li.wa-row").evaluateAll((els) => els.map((e) => e.getAttribute("data-id")));
    expect(new Set(ids).size).toBe(ids.length);
    expect(ids[2]).toMatch(/^s/);
    expect(["s1", "s2"]).not.toContain(ids[2]);
  });

  test("«Repetir desde el inicio» vuelve al guion tras pulsar un botón", async ({ app }) => {
    const n = (await estado(app)).mensajes.length;
    const btn = app.locator("#btn-reiniciar");
    await expect(btn).toContainText("Repetir desde el inicio");
    await rapido(app);
    await app.locator("#chat-cuerpo [data-flujo][data-btn]").first().click();
    await expect.poll(() => filasChat(app).count()).toBeGreaterThan(n);
    await btn.click();
    await expect(filasChat(app)).toHaveCount(n);
    await expect(app.locator("#chat-cuerpo .qr-btn.usado")).toHaveCount(0);
  });
});

test.describe("Formato, citas y documentos", () => {
  test("negrita solo con marcas pegadas al texto; «2 * 3 * 4» queda literal", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "m1", dir: "in", tipo: "text", hora: "10:00", texto: "*negrita* y _cursiva_ y ~tachado~" },
      { id: "m2", dir: "in", tipo: "text", hora: "10:01", texto: "2 * 3 * 4 y *negrita *" },
    ]));
    await expect(filaChat(app, "m1").locator("strong, b")).toHaveText("negrita");
    await expect(filaChat(app, "m1").locator("em, i")).toHaveText("cursiva");
    await expect(filaChat(app, "m1").locator("s, del, strike")).toHaveText("tachado");
    await expect(filaChat(app, "m2").locator("strong, b")).toHaveCount(0);
    await expect(filaChat(app, "m2")).toContainText("2 * 3 * 4 y *negrita *");
  });

  test("la cita de la respuesta quita el formato con la misma regla", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      {
        id: "m1", dir: "in", tipo: "buttons", hora: "10:00", body: "*Hola* 2 * 3",
        botones: [{ texto: "Vale", respuestas: [] }],
      },
    ]));
    await rapido(app);
    await filaChat(app, "m1").locator("[data-flujo]").click();
    const cita = app.locator('#chat-cuerpo li.out[data-id^="s"] .wa-cita-extracto').last();
    await expect(cita).toHaveText("Hola 2 * 3");
  });

  test("citar una plantilla con cabecera de documento muestra icono y nombre", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      {
        id: "m1", dir: "in", tipo: "template", hora: "10:00", headerTipo: "documento", headerTexto: "carta.pdf",
        body: "Te enviamos la carta", botones: [{ texto: "Gracias", respuestas: [] }],
      },
    ]));
    await rapido(app);
    await filaChat(app, "m1").locator("[data-flujo]").click();
    const tit = app.locator('#chat-cuerpo li.out[data-id^="s"] .wa-cita-titulo').last();
    await expect(tit).toHaveText("carta.pdf");
    await expect(tit.locator("svg.wa-cita-doc")).toHaveCount(1);
    await expect(app.locator('#chat-cuerpo li.out[data-id^="s"] .wa-cita-mini')).toHaveCount(0);
  });

  test("documento: «tamaño • ext» con tamano; si no, la extensión en mayúsculas", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "m1", dir: "in", tipo: "document", hora: "10:00", filename: "menu.pdf", tamano: "243 KB" },
      { id: "m2", dir: "in", tipo: "document", hora: "10:01", filename: "hoja.xlsx" },
      {
        id: "m3", dir: "in", tipo: "template", hora: "10:02", headerTipo: "documento", headerTexto: "cat.pdf",
        headerTamano: "1,2 MB", body: "b", botones: [],
      },
    ]));
    await expect(filaChat(app, "m1").locator(".doc-sub")).toHaveText("243 KB • pdf");
    await expect(filaChat(app, "m2").locator(".doc-sub")).toHaveText("XLSX");
    await expect(filaChat(app, "m3").locator(".doc-sub")).toHaveText("1,2 MB • pdf");
    const e = await estado(app);
    expect(e.mensajes[1].tamano).toBeUndefined();
    expect(e.mensajes[2].headerTamano).toBe("1,2 MB");
  });

  test("botón con URL sin esquema abre con https:// y no da aviso de validación", async ({ app }) => {
    await cargarEstado(app, estadoCon([
      { id: "m1", dir: "in", tipo: "template", hora: "10:00", body: "b", botones: [{ texto: "Web", url: "www.cafe-aurora.mx" }] },
    ]));
    await expect(filaChat(app, "m1").locator('a.qr-btn[href="https://www.cafe-aurora.mx"]')).toHaveCount(1);
    await expect(tarjetas(app).first().locator(".ed-validacion")).toBeHidden();
    await expect(tarjetas(app).first()).not.toContainText("URL no válida");
  });
});

test.describe("Móvil sin marco @movil", () => {
  test("pantalla a todo el ancho, sin isla ni zoom, y el chat arranca abajo @movil", async ({ app }) => {
    await expect(app.locator("#tab-vista")).toHaveAttribute("aria-selected", "true");
    await expect(app.locator("#sel-zoom")).toBeHidden();
    await expect(app.locator("#isla")).toBeHidden();
    const caja = await app.locator("#pantalla").boundingBox();
    expect(Math.round(caja.width)).toBeGreaterThanOrEqual(app.viewportSize().width - 1);
    await expect.poll(() => alFondo(app), { timeout: 5000 }).toBe(true);
  });

  test("un zoom guardado en escritorio no afecta al móvil @movil", async ({ app }) => {
    await app.evaluate(() => localStorage.setItem("wam-zoom", "125"));
    await app.reload();
    await expect(app.locator("body")).toHaveAttribute("data-wam-zoom", "125");
    const caja = await app.locator("#pantalla").boundingBox();
    expect(caja.width).toBeLessThanOrEqual(app.viewportSize().width + 1);
  });
});