import { jsxs as a, Fragment as f, jsx as o } from "react/jsx-runtime";
import { MoreHorizontal as W } from "lucide-react";
import { computeFlowPaths as g } from "../atoms/compute-flow-paths.js";
import { FlowConnector as p } from "../atoms/flow-connector.js";
import { FlowTile as X } from "../atoms/flow-tile.js";
import { cn as h } from "../../../lib/utils.js";
const s = 3, k = 2, Y = 5, Z = 8, N = 3;
function at({
  left: t,
  right: l,
  center: n,
  animate: i = "both",
  animation: c = "flow",
  lineStyle: r,
  size: e = "md",
  maxVisible: d,
  className: _,
  "aria-label": z = "Flow diagram",
  ...T
}) {
  const m = d?.left ?? Y, u = d?.right ?? Z, M = i === "both" || i === "left", L = i === "both" || i === "right", F = t.length > 0, P = l.length > 0, R = Math.min(t.length, m) + (t.length > m ? 1 : 0), U = Math.min(l.length, u) + (l.length > u ? 1 : 0), x = Math.max(1, Math.ceil(R / N)), C = Math.max(
    1,
    Math.ceil(U / N)
  ), j = Math.min(t.length, s) + (t.length > s ? 1 : 0), y = Math.min(l.length, s) + (l.length > s ? 1 : 0), E = O(j), $ = O(y), A = g({
    count: E,
    side: "left"
  }), B = g({
    count: $,
    side: "right"
  }), H = g({
    count: x,
    side: "left"
  }), V = g({
    count: C,
    side: "right"
  }), S = "h-[76px] w-12 @md:h-[92px] @md:w-[87px]", b = K(
    e,
    Math.max(x, C)
  ), D = {
    width: `${b}px`,
    height: `${v(e, x)}px`
  }, G = {
    width: `${b}px`,
    height: `${v(e, C)}px`
  };
  return /* @__PURE__ */ a(
    "div",
    {
      "aria-label": z,
      className: h("@container w-full", _),
      "data-slot": "flow-diagram",
      role: "img",
      ...T,
      children: [
        /* @__PURE__ */ a(
          "div",
          {
            "aria-hidden": !0,
            className: h(
              "mx-auto flex @2xl:hidden w-full @md:max-w-md max-w-80 items-center justify-center gap-1",
              // Tile size scales up at @md to fill medium-width containers.
              "@md:[&_[data-slot=flow-tile]]:size-10 [&_[data-slot=flow-tile]]:size-8",
              "@md:[&_[data-slot=flow-tile]]:rounded-xl [&_[data-slot=flow-tile]]:rounded-lg",
              "@md:[&_[data-slot=flow-tile]>svg]:size-5 [&_[data-slot=flow-tile]>svg]:size-4",
              // Hub scales to match the larger tile cluster at @md.
              "@md:[&_[data-slot=flow-hub]]:size-16 [&_[data-slot=flow-hub]]:size-12",
              "@md:[&_[data-slot=flow-hub]_>_span:last-child]:rounded-[12px] [&_[data-slot=flow-hub]_>_span:last-child]:rounded-[8px]",
              "@md:[&_[data-slot=flow-hub]_svg]:size-7 [&_[data-slot=flow-hub]_svg]:size-6"
            ),
            children: [
              F ? /* @__PURE__ */ a(f, { children: [
                /* @__PURE__ */ o(
                  w,
                  {
                    columns: 2,
                    hasOverflow: t.length > s,
                    items: t.slice(0, s),
                    overflowSize: e
                  }
                ),
                /* @__PURE__ */ o(
                  p,
                  {
                    animated: M,
                    className: h(S),
                    clusterSide: "end",
                    lineStyle: r,
                    paths: A,
                    variant: c
                  }
                )
              ] }) : null,
              n,
              P ? /* @__PURE__ */ a(f, { children: [
                /* @__PURE__ */ o(
                  p,
                  {
                    animated: L,
                    className: h(S),
                    clusterSide: "start",
                    lineStyle: r,
                    paths: B,
                    variant: c
                  }
                ),
                /* @__PURE__ */ o(
                  w,
                  {
                    columns: 2,
                    hasOverflow: l.length > s,
                    items: l.slice(0, s),
                    overflowSize: e
                  }
                )
              ] }) : null
            ]
          }
        ),
        /* @__PURE__ */ a(
          "div",
          {
            "aria-hidden": !0,
            className: "@2xl:grid hidden w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center",
            children: [
              /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center justify-end gap-0", children: F ? /* @__PURE__ */ a(f, { children: [
                /* @__PURE__ */ o(
                  w,
                  {
                    columns: 3,
                    hasOverflow: t.length > m,
                    items: t.slice(0, m),
                    overflowSize: e
                  }
                ),
                /* @__PURE__ */ o(
                  p,
                  {
                    animated: M,
                    clusterSide: "end",
                    lineStyle: r,
                    paths: H,
                    style: D,
                    variant: c
                  }
                )
              ] }) : null }),
              n,
              /* @__PURE__ */ o("div", { className: "flex min-w-0 items-center justify-start gap-0", children: P ? /* @__PURE__ */ a(f, { children: [
                /* @__PURE__ */ o(
                  p,
                  {
                    animated: L,
                    clusterSide: "start",
                    lineStyle: r,
                    paths: V,
                    style: G,
                    variant: c
                  }
                ),
                /* @__PURE__ */ o(
                  w,
                  {
                    columns: 3,
                    hasOverflow: l.length > u,
                    items: l.slice(0, u),
                    overflowSize: e
                  }
                )
              ] }) : null })
            ]
          }
        )
      ]
    }
  );
}
function w({
  items: t,
  columns: l,
  hasOverflow: n,
  overflowSize: i
}) {
  const c = t.length + (n ? 1 : 0), r = Math.max(1, Math.min(l, c)), e = I[r] ?? I[3];
  return (
    // `shrink-0` keeps the grid at its natural width even when the
    // parent flex slot is narrower than the cloud — without it, the
    // `minmax(0,1fr)` tracks collapse below tile size and tiles
    // overlap their neighbours (visible as icons stacking on top of
    // each other at small viewports).
    /* @__PURE__ */ a(
      "div",
      {
        className: h(
          "grid shrink-0 justify-center gap-2.5 sm:gap-3",
          e
        ),
        children: [
          t.map((d, _) => (
            // biome-ignore lint/suspicious/noArrayIndexKey: items are caller-provided ReactNodes; index is stable within the molecule render
            /* @__PURE__ */ o("span", { children: d }, `flow-item-${_}`)
          )),
          n ? /* @__PURE__ */ o(X, { size: i, variant: "muted", children: /* @__PURE__ */ o(W, { "aria-hidden": !0 }) }) : null
        ]
      }
    )
  );
}
const I = {
  1: "grid-cols-1",
  2: "grid-cols-2",
  3: "grid-cols-3"
}, q = {
  sm: 32,
  md: 40,
  lg: 56
}, J = 12;
function O(t) {
  if (t <= 0)
    return 1;
  const l = Math.max(1, Math.min(k, t));
  return Math.max(1, Math.ceil(t / l));
}
function v(t, l) {
  const n = q[t];
  return l * n + Math.max(0, l - 1) * J;
}
function K(t, l) {
  return Math.round(v(t, l) * 0.95);
}
export {
  at as FlowDiagram
};
