import { jsx, jsxs } from "react/jsx-runtime";
import { SSRSafeResponsiveContainer } from "./ssr-safe-container.js";
import { cn } from "../utils/cn.js";
import { calculateLabelSettings, extractDataRange, calculateYAxisWidth, defaultYAxisWidth, getChartMargin, defaultGridProps, CustomXAxisTick, defaultYAxisTickFormatter, defaultLegendProps, getDefaultChartColor } from "./chart-utils.js";
import { C as ComposedChart$1, L as Line } from "../../ComposedChart-BrekgQ0U.js";
import { C as CartesianGrid, X as XAxis, Y as YAxis } from "../../YAxis-DXrEaAmy.js";
import { T as Tooltip } from "../../RechartsWrapper-B6DckFGn.js";
import { L as Legend } from "../../CategoricalChart-B4Tr_94h.js";
import { A as Area } from "../../Area-BiaTXuF7.js";
import { B as Bar } from "../../barSelectors-BJrDdWIm.js";
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border/30 bg-popover/95 backdrop-blur-md p-3 shadow-2xl", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-primary mb-2", children: label }),
      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: payload.map((entry, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            className: "w-2 h-2 rounded-full",
            style: { backgroundColor: entry.color }
          }
        ),
        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-secondary", children: [
          entry.name,
          ":"
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-primary ml-auto", children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
      ] }, index)) })
    ] });
  }
  return null;
};
function ComposedChart({
  data,
  config,
  className,
  showGrid = true,
  showTooltip = true,
  showLegend = false,
  showXAxis = true,
  showYAxis = true,
  xAxisKey = "name",
  xAxisProps,
  yAxisProps,
  secondaryYAxisProps,
  tooltipProps,
  legendProps,
  height = 400,
  width = "100%"
}) {
  const getColor = (index, customColor) => {
    if (customColor) return customColor;
    return getDefaultChartColor(index);
  };
  const xLabels = data.map((item) => String(item[xAxisKey] || ""));
  const labelSettings = calculateLabelSettings(
    xLabels,
    typeof width === "number" ? width : 800
  );
  const dataRange = extractDataRange(data, Object.keys(config));
  const yAxisWidth = dataRange ? calculateYAxisWidth(dataRange.min, dataRange.max, 10) : defaultYAxisWidth;
  return /* @__PURE__ */ jsx("div", { className: cn("w-full focus:outline-none", className), children: /* @__PURE__ */ jsx(SSRSafeResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(
    ComposedChart$1,
    {
      data,
      margin: getChartMargin(showLegend),
      barCategoryGap: "10%",
      barGap: 4,
      children: [
        showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...defaultGridProps }),
        showXAxis && /* @__PURE__ */ jsx(
          XAxis,
          {
            dataKey: xAxisKey,
            stroke: "hsl(var(--text-secondary))",
            tick: (props) => /* @__PURE__ */ jsx(
              CustomXAxisTick,
              {
                ...props,
                angle: labelSettings.angle,
                fontSize: labelSettings.fontSize,
                truncateLength: labelSettings.truncateLength,
                showTooltip: labelSettings.showTooltip,
                formatLabels: labelSettings.formatLabels,
                locale: labelSettings.locale
              }
            ),
            axisLine: false,
            tickLine: { stroke: "hsl(var(--border))" },
            height: labelSettings.angle !== 0 ? 80 : 30,
            ...xAxisProps
          }
        ),
        showYAxis && /* @__PURE__ */ jsx(
          YAxis,
          {
            stroke: "hsl(var(--text-secondary))",
            tick: { fill: "hsl(var(--text-secondary))", fontSize: 10 },
            axisLine: false,
            tickLine: false,
            width: yAxisWidth,
            tickFormatter: defaultYAxisTickFormatter,
            ...yAxisProps
          }
        ),
        showYAxis && secondaryYAxisProps && /* @__PURE__ */ jsx(
          YAxis,
          {
            stroke: "hsl(var(--text-secondary))",
            tick: { fill: "hsl(var(--text-secondary))", fontSize: 10 },
            axisLine: false,
            tickLine: false,
            width: yAxisWidth,
            tickFormatter: defaultYAxisTickFormatter,
            ...secondaryYAxisProps
          }
        ),
        showTooltip && /* @__PURE__ */ jsx(
          Tooltip,
          {
            content: /* @__PURE__ */ jsx(CustomTooltip, {}),
            cursor: { fill: "hsl(var(--muted))", opacity: 0.5 },
            ...tooltipProps
          }
        ),
        showLegend && /* @__PURE__ */ jsx(Legend, { ...defaultLegendProps, ...legendProps }),
        Object.entries(config).map(([key, value], index) => {
          const color = getColor(index, value.color);
          const commonProps = {
            dataKey: key,
            name: value.label || key
          };
          if (value.type === "line") {
            return /* @__PURE__ */ jsx(
              Line,
              {
                ...commonProps,
                type: "monotone",
                stroke: color,
                strokeWidth: value.strokeWidth || 2,
                strokeDasharray: value.strokeDasharray,
                dot: false,
                activeDot: {
                  r: 3,
                  strokeWidth: 1.5,
                  stroke: "hsl(var(--background))",
                  fill: color
                },
                yAxisId: value.yAxisId,
                isAnimationActive: false
              },
              key
            );
          }
          if (value.type === "area") {
            return /* @__PURE__ */ jsx(
              Area,
              {
                ...commonProps,
                type: "monotone",
                stroke: color,
                fill: color,
                fillOpacity: value.fillOpacity || 0.2,
                strokeWidth: value.strokeWidth || 1.5,
                stackId: value.stackId,
                yAxisId: value.yAxisId,
                activeDot: {
                  r: 3,
                  strokeWidth: 1.5,
                  stroke: "hsl(var(--background))",
                  fill: color
                },
                isAnimationActive: false
              },
              key
            );
          }
          if (value.type === "bar") {
            return /* @__PURE__ */ jsx(
              Bar,
              {
                ...commonProps,
                fill: color,
                radius: value.stackId ? 0 : [3, 3, 0, 0],
                stackId: value.stackId,
                yAxisId: value.yAxisId,
                isAnimationActive: false
              },
              key
            );
          }
          return null;
        })
      ]
    }
  ) }) });
}
ComposedChart.displayName = "ComposedChart";
export {
  ComposedChart
};
