import { jsx, jsxs } from "react/jsx-runtime";
import React__default from "react";
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, 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";
const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    const filteredPayload = payload.filter((entry) => {
      const rechartsEntry = entry;
      return rechartsEntry.stroke !== "none" && !rechartsEntry.fill?.toString().startsWith("url(#");
    });
    if (filteredPayload.length === 0) return null;
    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-subtle bg-popover/95 backdrop-blur-md p-3 shadow-2xl", children: [
      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-strong mb-2", children: label }),
      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredPayload.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-subtle", children: [
          entry.name,
          ":"
        ] }),
        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-strong ml-auto", children: typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value })
      ] }, index)) })
    ] });
  }
  return null;
};
function LineChart({
  data,
  config,
  className,
  showGrid = true,
  showTooltip = true,
  showLegend = false,
  showGradient = true,
  showXAxis = true,
  showYAxis = true,
  xAxisKey = "name",
  xAxisProps,
  yAxisProps,
  tooltipProps,
  legendProps,
  lineProps,
  height = 400,
  width = "100%",
  curved = true
}) {
  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 gradients = Object.entries(config).map(([key, value], index) => {
    const color = getColor(index, value.color);
    const gradientId = `lineGradient-${key}`;
    return { key, gradientId, color };
  });
  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, { data, margin: getChartMargin(showLegend), children: [
    showGradient && /* @__PURE__ */ jsx("defs", { children: gradients.map(({ gradientId, color }) => /* @__PURE__ */ jsxs(
      "linearGradient",
      {
        id: gradientId,
        x1: "0",
        y1: "0",
        x2: "0",
        y2: "1",
        children: [
          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
        ]
      },
      gradientId
    )) }),
    showGrid && /* @__PURE__ */ jsx(CartesianGrid, { ...defaultGridProps }),
    showXAxis && /* @__PURE__ */ jsx(
      XAxis,
      {
        dataKey: xAxisKey,
        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: "var(--border-default)" },
        height: labelSettings.angle !== 0 ? 80 : 30,
        ...xAxisProps
      }
    ),
    showYAxis && /* @__PURE__ */ jsx(
      YAxis,
      {
        stroke: "var(--text-subtle)",
        tick: { fill: "var(--text-subtle)", fontSize: 10 },
        axisLine: false,
        tickLine: false,
        width: yAxisWidth,
        tickFormatter: defaultYAxisTickFormatter,
        ...yAxisProps
      }
    ),
    showTooltip && /* @__PURE__ */ jsx(
      Tooltip,
      {
        content: /* @__PURE__ */ jsx(CustomTooltip, {}),
        cursor: { fill: "var(--bg-subtle)" },
        ...tooltipProps
      }
    ),
    showLegend && /* @__PURE__ */ jsx(Legend, { ...defaultLegendProps, ...legendProps }),
    gradients.map(({ key, gradientId, color }) => {
      const value = config[key];
      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
        showGradient && /* @__PURE__ */ jsx(
          Area,
          {
            type: curved ? "monotone" : "linear",
            dataKey: key,
            fill: `url(#${gradientId})`,
            stroke: "none",
            isAnimationActive: false,
            legendType: "none"
          }
        ),
        /* @__PURE__ */ jsx(
          Line,
          {
            type: curved ? "monotone" : "linear",
            dataKey: key,
            name: value.label || key,
            stroke: color,
            strokeWidth: value.strokeWidth || 1.5,
            strokeDasharray: value.strokeDasharray,
            dot: false,
            activeDot: {
              r: 3,
              strokeWidth: 1.5,
              stroke: "var(--bg-default)",
              fill: color
            },
            isAnimationActive: false,
            ...lineProps
          }
        )
      ] }, key);
    })
  ] }) }) });
}
LineChart.displayName = "LineChart";
export {
  LineChart
};
