// Rôle : monte la page toolbox sous StrictMode pour contrôler les demandes de tutoriel et les changements d'identité.
import { createElement, StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { ToolboxPage } from "../../website/src/features/toolboxes/ToolboxPages.jsx";

export function mountToolboxTutorialProbe(element, siteContent) {
  const root = createRoot(element);
  const writes = [];
  const pendingChanges = [];
  let setInputs;
  function createToolbox(id) {
    const defaultSpaceId = `space-${id}`;
    return {
      id,
      name: id,
      modules: [],
      spaces: [{ id: defaultSpaceId, name: "Défaut", moduleOrder: { one: [], two: [[], []] } }],
      defaultSpaceId,
      activeSpaceId: defaultSpaceId,
      tutorial: id !== "c"
    };
  }
  function Probe() {
    const [inputs, updateInputs] = useState({
      toolboxId: "a", pendingTutorialToolboxId: "",
      toolboxes: ["a", "b", "c"].map(createToolbox)
    });
    setInputs = updateInputs;
    return createElement(ToolboxPage, {
      ...inputs, siteContent, actions: {},
      getToolboxGame: () => null,
      getModuleData: (_toolbox, _module, fallback) => fallback,
      updateModuleData: () => {},
      updateToolbox: (toolbox) => {
        writes.push(toolbox);
        updateInputs((current) => ({ ...current, toolboxes: current.toolboxes.map((item) => item.id === toolbox.id ? toolbox : item) }));
      },
      setPendingTutorialToolboxId: (id) => {
        pendingChanges.push(id);
        updateInputs((current) => ({ ...current, pendingTutorialToolboxId: id }));
      }
    });
  }
  flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe))));
  return {
    writes, pendingChanges,
    update: (patch) => flushSync(() => setInputs((current) => ({ ...current, ...patch }))),
    unmount: () => flushSync(() => root.unmount())
  };
}