// Rôle : vérifie les étapes, la fermeture et l'isolation des tutoriels toolbox sous StrictMode.
/* global window, document, fetch */
import { test, expect } from "@playwright/test";
import { fileURLToPath, URL } from "node:url";

const probeUrl = `/@fs/${fileURLToPath(new URL("./fixtures/toolbox-tutorial-probe.js", import.meta.url))}`;

async function setup(page) {
  await page.goto("/");
  await page.evaluate(async (url) => {
    const { mountToolboxTutorialProbe } = await import(url);
    const siteContent = await fetch("/data/site.json").then((response) => response.json());
    document.getElementById("app").style.display = "none";
    const element = document.createElement("div");
    document.body.prepend(element);
    window.tutorialProbe = mountToolboxTutorialProbe(element, siteContent);
  }, probeUrl);
}

test("tutorial restarts on another toolbox and consumes each start flag once", async ({ page }) => {
  const errors = [];
  page.on("pageerror", (error) => errors.push(error.message));
  await setup(page);
  const tour = page.locator(".toolbox-tutorial-tooltip");
  const count = tour.locator(".toolbox-tutorial-count");
  await expect(count).toHaveText(/^1\//);
  await tour.locator("footer button").click();
  await expect(count).toHaveText(/^2\//);
  await page.evaluate(() => window.tutorialProbe.update({}));
  await expect(count).toHaveText(/^2\//);
  await page.evaluate(() => window.tutorialProbe.update({ toolboxId: "b" }));
  await expect(count).toHaveText(/^1\//);
  expect(await page.evaluate(() => window.tutorialProbe.writes.map(({ id, tutorial }) => ({ id, tutorial })))).toEqual([
    { id: "a", tutorial: false }, { id: "b", tutorial: false }
  ]);
  await page.evaluate(() => window.tutorialProbe.update({ toolboxId: "c" }));
  await expect(tour).toHaveCount(0);
  await page.evaluate(() => window.tutorialProbe.update({ toolboxId: "a" }));
  await expect(tour).toHaveCount(0);
  await page.evaluate(() => window.tutorialProbe.unmount());
  expect(errors).toEqual([]);
});

test("pending tutorial survives unrelated toolboxes and stays dismissed after rerenders", async ({ page }) => {
  await setup(page);
  const tour = page.locator(".toolbox-tutorial-tooltip");
  await expect(tour).toBeVisible();
  await tour.locator(".toolbox-tutorial-close").click();
  await page.evaluate(() => window.tutorialProbe.update({ pendingTutorialToolboxId: "c" }));
  await expect(tour).toHaveCount(0);
  expect(await page.evaluate(() => window.tutorialProbe.pendingChanges)).toEqual([]);
  await page.evaluate(() => window.tutorialProbe.update({ toolboxId: "c" }));
  await expect(tour.locator(".toolbox-tutorial-count")).toHaveText(/^1\//);
  expect(await page.evaluate(() => window.tutorialProbe.pendingChanges)).toEqual([""]);
  await tour.locator(".toolbox-tutorial-close").click();
  await page.evaluate(() => window.tutorialProbe.update({}));
  await expect(tour).toHaveCount(0);
  await page.evaluate(() => window.tutorialProbe.update({ pendingTutorialToolboxId: "c" }));
  await expect(tour.locator(".toolbox-tutorial-count")).toHaveText(/^1\//);
  await page.evaluate(() => window.tutorialProbe.unmount());
  await expect(tour).toHaveCount(0);
});