// Rôle : pilote les mises à jour locales et externes du Bloc Note réel sous StrictMode.
import { createElement, StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { NotepadModule } from "../../website/src/features/toolboxes/modules/NotepadModule.jsx";
import { normalizeNotepadData } from "../../website/src/features/toolboxes/storage/toolboxStorage.js";

export function mountNotepadSyncProbe(element) {
  const root = createRoot(element);
  const writes = [];
  let setInputs;
  let inputs;
  function Probe() {
    const [value, setValue] = useState({
      moduleId: "notes",
      data: { activePageId: "a", pages: [
        { id: "a", title: "First", html: "<p>Alpha</p>" },
        { id: "b", title: "Second", html: "<p>Bravo</p>", drawingMode: "permanent" }
      ] }
    });
    inputs = value;
    setInputs = setValue;
    const context = {
      getModuleData: () => value.data,
      normalizeNotepadData,
      uid: () => "new-page",
      setModuleData: (_toolbox, moduleId, data) => {
        writes.push({ moduleId, data });
        setValue((current) => ({ ...current, data }));
      }
    };
    return createElement(NotepadModule, { toolboxId: "probe", moduleId: value.moduleId, context });
  }
  flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe))));
  return {
    writes,
    read: () => inputs,
    update: (patch) => flushSync(() => setInputs((current) => ({ ...current, ...patch }))),
    patchPage: (id, patch) => flushSync(() => setInputs((current) => ({
      ...current, data: { ...current.data, pages: current.data.pages.map((page) => page.id === id ? { ...page, ...patch } : page) }
    }))),
    select: (id) => flushSync(() => setInputs((current) => ({ ...current, data: { ...current.data, activePageId: id } }))),
    unmount: () => flushSync(() => root.unmount())
  };
}