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

// src/lib/chart-palette.ts
var CHART_PALETTE = [
  "hsl(var(--chart-1, var(--primary)))",
  "hsl(var(--chart-2, var(--primary)))",
  "hsl(var(--chart-3, var(--primary)))",
  "hsl(var(--chart-4, var(--primary)))",
  "hsl(var(--chart-5, var(--primary)))",
  "hsl(var(--chart-6, var(--primary)))"
];
function pickChartHue(index) {
  const safe = (index % CHART_PALETTE.length + CHART_PALETTE.length) % CHART_PALETTE.length;
  return CHART_PALETTE[safe];
}
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Funnel({
  stages,
  width = 480,
  height = 360,
  gap = 4,
  showConversion = true,
  onStageClick,
  className,
  ...rest
}) {
  const laidOut = layout(stages, width, height, gap);
  const desc = `Funnel with ${stages.length} stage${stages.length === 1 ? "" : "s"}, peak value ${stages[0]?.value ?? 0}`;
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-funnel": true,
      role: "img",
      width,
      height,
      viewBox: `0 0 ${width} ${height}`,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Funnel chart" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        /* @__PURE__ */ jsx("g", { "data-hex-funnel-stages": true, children: laidOut.map((s) => {
          const interactive = Boolean(onStageClick);
          const handleActivate = () => onStageClick?.(s.stage);
          return /* @__PURE__ */ jsxs(
            "g",
            {
              "data-hex-funnel-stage": true,
              "data-depth": s.depth,
              className: interactive ? "focus-visible:outline-none focus-visible:outline-2 focus-visible:outline-ring" : void 0,
              role: interactive ? "button" : void 0,
              tabIndex: interactive ? 0 : void 0,
              "aria-label": interactive ? `${s.stage.label}: ${s.stage.value}` : void 0,
              style: interactive ? { cursor: "pointer" } : void 0,
              onClick: interactive ? handleActivate : void 0,
              onKeyDown: interactive ? (e) => activateOnKey(e, handleActivate) : void 0,
              children: [
                /* @__PURE__ */ jsx(
                  "polygon",
                  {
                    points: `${s.topLeft},${s.yTop} ${s.topRight},${s.yTop} ${s.bottomRight},${s.yBottom} ${s.bottomLeft},${s.yBottom}`,
                    fill: pickChartHue(s.depth),
                    fillOpacity: 0.85,
                    stroke: "hsl(var(--background))",
                    strokeWidth: 1
                  }
                ),
                /* @__PURE__ */ jsx(
                  "text",
                  {
                    x: width / 2,
                    y: (s.yTop + s.yBottom) / 2,
                    dy: "0.35em",
                    textAnchor: "middle",
                    fontSize: 12,
                    fontWeight: 600,
                    fill: "hsl(var(--background))",
                    style: {
                      pointerEvents: "none",
                      paintOrder: "stroke",
                      stroke: "hsl(var(--foreground) / 0.45)",
                      strokeWidth: 2
                    },
                    children: `${s.stage.label} \xB7 ${s.stage.value.toLocaleString()}`
                  }
                )
              ]
            },
            s.stage.id
          );
        }) }),
        showConversion ? /* @__PURE__ */ jsx("g", { "data-hex-funnel-conversions": true, children: laidOut.map(
          (s) => s.conversionFromPrev != null ? /* @__PURE__ */ jsx(
            "text",
            {
              "data-hex-funnel-conversion": true,
              x: width - 4,
              y: s.yTop - 2,
              textAnchor: "end",
              fontSize: 10,
              fill: "hsl(var(--muted-foreground))",
              children: formatPct(s.conversionFromPrev)
            },
            `conv-${s.stage.id}`
          ) : null
        ) }) : null
      ]
    }
  );
}
function layout(stages, width, height, gap) {
  if (stages.length === 0) return [];
  const peak = Math.max(...stages.map((s) => s.value), 0) || 1;
  const usableHeight = height - gap * Math.max(0, stages.length - 1);
  const stageHeight = usableHeight / stages.length;
  const cx = width / 2;
  return stages.map((stage, i) => {
    const yTop = i * (stageHeight + gap);
    const yBottom = yTop + stageHeight;
    const topRatio = stage.value / peak;
    const next = stages[i + 1];
    const bottomRatio = next ? next.value / peak : topRatio;
    const topHalfWidth = width / 2 * Math.max(0, Math.min(1, topRatio));
    const bottomHalfWidth = width / 2 * Math.max(0, Math.min(1, bottomRatio));
    const prev = stages[i - 1];
    const conversionFromPrev = prev && prev.value > 0 ? stage.value / prev.value : null;
    return {
      stage,
      depth: i,
      topLeft: cx - topHalfWidth,
      topRight: cx + topHalfWidth,
      bottomLeft: cx - bottomHalfWidth,
      bottomRight: cx + bottomHalfWidth,
      yTop,
      yBottom,
      conversionFromPrev
    };
  });
}
function formatPct(ratio) {
  if (!Number.isFinite(ratio)) return "\u2014";
  return `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}%`;
}
function activateOnKey(e, fn) {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    fn();
  }
}

export { Funnel };
//# sourceMappingURL=funnel.js.map
//# sourceMappingURL=funnel.js.map