"use client";
import * as React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function MindMap({
  root,
  orientation = "radial",
  width = 600,
  height = 400,
  onNodeClick,
  className,
  ...rest
}) {
  const [d3h, setD3h] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    void import('d3-hierarchy').then((mod) => {
      if (!cancelled) setD3h(mod);
    });
    return () => {
      cancelled = true;
    };
  }, []);
  if (!d3h) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        "data-hex-mind-map-loading": true,
        "aria-busy": "true",
        className: cn("inline-block bg-muted/20", className),
        style: { width, height }
      }
    );
  }
  const { nodes, links, viewBox } = layout(d3h, root, orientation, width, height);
  const nodeCount = nodes.length;
  const desc = `Mind map with ${nodeCount} node${nodeCount === 1 ? "" : "s"}, rooted at "${root.label}"`;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-mind-map": true,
      "data-orientation": orientation,
      role: "img",
      viewBox,
      width,
      height,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Mind map" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        /* @__PURE__ */ jsx("g", { "data-hex-mind-map-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
          "path",
          {
            d: linkPath(l, orientation),
            fill: "none",
            stroke: "hsl(var(--muted-foreground))",
            strokeOpacity: 0.7,
            strokeWidth: 1.5
          },
          l.id
        )) }),
        /* @__PURE__ */ jsx("g", { "data-hex-mind-map-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
          "g",
          {
            "data-hex-mind-map-node": true,
            "data-depth": n.depth,
            transform: `translate(${n.x},${n.y})`,
            style: onNodeClick ? { cursor: "pointer" } : void 0,
            onClick: onNodeClick ? () => onNodeClick(n.node) : void 0,
            children: [
              /* @__PURE__ */ jsx(
                "circle",
                {
                  r: 4,
                  fill: "hsl(var(--primary))",
                  stroke: "hsl(var(--background))",
                  strokeWidth: 2
                }
              ),
              /* @__PURE__ */ jsx(
                "text",
                {
                  x: 8,
                  y: 4,
                  fontSize: 12,
                  fill: "hsl(var(--foreground))",
                  style: { paintOrder: "stroke" },
                  stroke: "hsl(var(--background))",
                  strokeWidth: 3,
                  strokeLinejoin: "round",
                  children: n.node.label
                }
              )
            ]
          },
          n.node.id
        )) })
      ]
    }
  );
}
function layout(d3h, root, orientation, width, height) {
  const hierarchy = d3h.hierarchy(root);
  if (orientation === "radial") {
    const radius = Math.min(width, height) / 2 - 16;
    const layoutRoot2 = d3h.tree().size([2 * Math.PI, radius])(hierarchy);
    const nodes2 = [];
    const links2 = [];
    layoutRoot2.each((d) => {
      const point = polarToCartesian(d.x, d.y);
      nodes2.push({ node: d.data, x: point.x, y: point.y, depth: d.depth });
    });
    layoutRoot2.links().forEach((link, i) => {
      const sPt = polarToCartesian(link.source.x, link.source.y);
      const tPt = polarToCartesian(link.target.x, link.target.y);
      links2.push({ source: sPt, target: tPt, id: `l-${i}` });
    });
    const half = Math.min(width, height) / 2;
    return {
      nodes: nodes2,
      links: links2,
      viewBox: `${-half} ${-half} ${2 * half} ${2 * half}`
    };
  }
  const layoutRoot = d3h.tree().size([height - 32, width - 200])(hierarchy);
  const nodes = [];
  const links = [];
  layoutRoot.each((d) => {
    nodes.push({ node: d.data, x: d.y, y: d.x, depth: d.depth });
  });
  layoutRoot.links().forEach((link, i) => {
    links.push({
      source: { x: link.source.y, y: link.source.x },
      target: { x: link.target.y, y: link.target.x },
      id: `l-${i}`
    });
  });
  return {
    nodes,
    links,
    viewBox: `0 0 ${width} ${height}`
  };
}
function polarToCartesian(angle, radius) {
  return {
    x: radius * Math.cos(angle - Math.PI / 2),
    y: radius * Math.sin(angle - Math.PI / 2)
  };
}
function linkPath(link, orientation) {
  const { source: s, target: t } = link;
  if (orientation === "horizontal") {
    const mx = (s.x + t.x) / 2;
    return `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;
  }
  return `M${s.x},${s.y} C${s.x},${(s.y + t.y) / 2} ${t.x},${(s.y + t.y) / 2} ${t.x},${t.y}`;
}

export { MindMap };
//# sourceMappingURL=mind-map.js.map
//# sourceMappingURL=mind-map.js.map