Tree & Flow Variants

import { useState } from "react";
import { TreeCanvas } from "@/components/tree/TreeCanvas";
import type { TreeNode } from "@/components/tree/types";
import { GraphToolbar, useGraphFilter, defaultGraphFilter } from "@/components/graph";
import { initialTree } from "./data";
import { treeConfig } from "./config";
import { useFulfilmentPipelineHandlers } from "./hooks";

/**
 * FulfilmentPipeline — a fully-typed, self-contained tree with a search / sort /
 * filter toolbar above the canvas.
 *
 * Drop into any page:
 *   <FulfilmentPipeline />
 *
 * To plug into a backend, put requests in `./services.ts` and glue them in `./hooks.ts`. To remove the
 * toolbar, delete the `GraphToolbar`/`useGraphFilter` wiring below and set
 * `showToolbar: false` in `./config.ts`.
 */
export function FulfilmentPipeline() {
  const [tree, setTree] = useState<TreeNode>(initialTree);
  const [filter, setFilter] = useState(defaultGraphFilter);
  const { handleNodeAdd, handleNodeUpdate, handleNodeRemove, handleNodeMove } = useFulfilmentPipelineHandlers();
  const { tree: filteredTree, matches, stats, allTags } = useGraphFilter(tree, filter);

  return (
    <div className="flex flex-col gap-2">
      <GraphToolbar
        filter={filter}
        onChange={setFilter}
        allTags={allTags}
        matched={stats.matched}
        total={stats.total}
      />
      <TreeCanvas
        config={treeConfig}
        tree={filter.mode === "hide" ? filteredTree : tree}
        onTreeChange={setTree}
        highlightIds={filter.mode === "dim" ? matches : undefined}
        onNodeAdd={handleNodeAdd}
        onNodeUpdate={handleNodeUpdate}
        onNodeRemove={handleNodeRemove}
        onNodeMove={handleNodeMove}
      />
    </div>
  );
}