// Rôle : observe les sélections et onglets réellement validés par le contrôleur Goal Tree.
import { createElement, StrictMode, useLayoutEffect, useMemo } from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
import { useGoalTreeController } from "../../website/src/features/toolboxes/modules/useGoalTreeController.js";
import { normalizeGoalTreeData } from "../../website/src/features/toolboxes/storage/toolboxStorage.js";

export function mountGoalSelectionProbe(element) {
  const root = createRoot(element);
  const snapshots = [];
  let controller;

  function Probe({ nodes }) {
    const context = useMemo(() => ({
      getModuleData: () => ({ nodes }),
      normalizeGoalTreeData,
      setModuleData: () => {}
    }), [nodes]);
    const state = useGoalTreeController({
      toolboxId: "probe", moduleId: "goal", context,
      editing: true, setEditing: () => {}, openEditor: () => {}
    });
    useLayoutEffect(() => {
      controller = state;
      snapshots.push({
        selected: state.selectedNode?.id || "",
        tab: state.activeFormTab,
        tabs: state.formTabs.map((tab) => tab.id)
      });
    });
    return createElement("output", null, state.selectedNode?.title || "Empty");
  }

  function update(nodes) {
    snapshots.length = 0;
    flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { nodes }))));
  }
  update([]);
  return {
    update,
    snapshots,
    edit: (id) => flushSync(() => controller.editNode(id)),
    unmount: () => root.unmount()
  };
}