"use client";
import * as React from 'react';
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 Pyramid({
  tiers,
  shape = "widening",
  width = 480,
  height = 360,
  gap = 4,
  showValues = true,
  onTierClick,
  className,
  ...rest
}) {
  const laidOut = layout(tiers, shape, width, height, gap);
  const desc = `Pyramid with ${tiers.length} tier${tiers.length === 1 ? "" : "s"} (${shape})`;
  const warnedRef = React.useRef(false);
  const nodeEnv = globalThis.process?.env?.NODE_ENV;
  if (nodeEnv !== "production" && !warnedRef.current && tiers.length > 7) {
    warnedRef.current = true;
    console.warn(
      `[hex-core/Pyramid] ${tiers.length} tiers \u2014 labels become unreadable past ~7. Group adjacent tiers or switch to TreeMap / OrgChart.`
    );
  }
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      ...rest,
      "data-hex-pyramid": true,
      "data-shape": shape,
      role: "img",
      width,
      height,
      viewBox: `0 0 ${width} ${height}`,
      className: cn("block", className),
      children: [
        /* @__PURE__ */ jsx("title", { children: "Pyramid chart" }),
        /* @__PURE__ */ jsx("desc", { children: desc }),
        /* @__PURE__ */ jsx("g", { "data-hex-pyramid-tiers": true, children: laidOut.map((t) => {
          const valueText = showValues && t.tier.value != null ? ` \xB7 ${t.tier.value.toLocaleString()}` : "";
          const interactive = Boolean(onTierClick);
          const handleActivate = () => onTierClick?.(t.tier);
          return /* @__PURE__ */ jsxs(
            "g",
            {
              "data-hex-pyramid-tier": true,
              "data-depth": t.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 ? `${t.tier.label}${valueText}` : 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: `${t.topLeft},${t.yTop} ${t.topRight},${t.yTop} ${t.bottomRight},${t.yBottom} ${t.bottomLeft},${t.yBottom}`,
                    fill: pickChartHue(t.depth),
                    fillOpacity: 0.85,
                    stroke: "hsl(var(--background))",
                    strokeWidth: 1
                  }
                ),
                /* @__PURE__ */ jsx(
                  "text",
                  {
                    x: width / 2,
                    y: (t.yTop + t.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: `${t.tier.label}${valueText}`
                  }
                )
              ]
            },
            t.tier.id
          );
        }) })
      ]
    }
  );
}
function layout(tiers, shape, width, height, gap) {
  if (tiers.length === 0) return [];
  const usableHeight = height - gap * Math.max(0, tiers.length - 1);
  const tierHeight = usableHeight / tiers.length;
  const cx = width / 2;
  const total = tiers.length;
  const ratioAt = (i) => {
    const t = total === 1 ? 0 : i / (total - 1);
    return shape === "widening" ? 0.2 + 0.8 * t : 1 - 0.8 * t;
  };
  return tiers.map((tier, i) => {
    const yTop = i * (tierHeight + gap);
    const yBottom = yTop + tierHeight;
    const topRatio = ratioAt(i);
    const bottomRatio = i + 1 < total ? ratioAt(i + 1) : topRatio;
    const topHalfWidth = width / 2 * topRatio;
    const bottomHalfWidth = width / 2 * bottomRatio;
    return {
      tier,
      depth: i,
      topLeft: cx - topHalfWidth,
      topRight: cx + topHalfWidth,
      bottomLeft: cx - bottomHalfWidth,
      bottomRight: cx + bottomHalfWidth,
      yTop,
      yBottom
    };
  });
}
function activateOnKey(e, fn) {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    fn();
  }
}

export { Pyramid };
//# sourceMappingURL=pyramid.js.map
//# sourceMappingURL=pyramid.js.map