import { cn } from "./index3.js";
import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./index46.js";
import { useReducedMotion } from "./index47.js";
import { useSeriesHighlight } from "./index48.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Area, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
//#region src/components/molecules/charts/LineChart/LineChart.tsx
var DEFAULT_CHART_COLORS = [
	"var(--chart-1)",
	"var(--chart-2)",
	"var(--chart-3)",
	"var(--chart-4)",
	"var(--chart-5)"
];
var lineChartVariants = cva("relative w-full", {
	variants: { size: {
		sm: "h-40",
		default: "h-60",
		lg: "h-80",
		xl: "h-96"
	} },
	defaultVariants: { size: "default" }
});
/** Sanitize series id for use as CSS variable key */
var sanitizeKey = (id) => {
	if (!id) return "";
	return id.replace(/\s+/g, "_");
};
/** Shared legend component for all charts */
var WrapperChartLegend = ({ series, position, maxLabelWidth, onSeriesHover, highlightedSeries }) => {
	const colors = series.map((s, i) => s.color || DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]);
	return /* @__PURE__ */ jsx("ul", {
		className: cn("flex gap-3 overflow-hidden list-none m-0 p-0", position === "top" ? "justify-center flex-wrap" : "flex-col"),
		children: series.map((s, i) => {
			const isActive = !highlightedSeries || highlightedSeries === s.id;
			return /* @__PURE__ */ jsxs("li", {
				className: cn("flex items-center gap-2 min-w-0 transition-opacity duration-200 ease-smooth motion-reduce:transition-none", !onSeriesHover && "hover:opacity-80"),
				style: onSeriesHover ? { opacity: isActive ? 1 : .35 } : void 0,
				onMouseEnter: () => onSeriesHover?.(s.id),
				onMouseLeave: () => onSeriesHover?.(null),
				children: [/* @__PURE__ */ jsx("div", {
					className: "size-2 rounded-full shrink-0",
					style: { backgroundColor: colors[i] }
				}), /* @__PURE__ */ jsx("span", {
					className: "text-sm text-muted-foreground truncate",
					style: { maxWidth: maxLabelWidth ?? 120 },
					title: s.label,
					children: s.label
				})]
			}, s.id);
		})
	});
};
/** Custom active dot with subtle ring/halo effect */
function ActiveDot({ cx = 0, cy = 0, stroke, fill }) {
	const color = stroke || fill || "currentColor";
	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
		cx,
		cy,
		r: 10,
		fill: color,
		fillOpacity: .15
	}), /* @__PURE__ */ jsx("circle", {
		cx,
		cy,
		r: 5,
		fill: color,
		stroke: "var(--background)",
		strokeWidth: 2
	})] });
}
function LineChart$1({ data, series, showYAxis = true, showXAxis = true, yAxisLabel, xAxisLabel, legendPosition = "none", yAxisTicks, yAxisFormat = (v) => v.toLocaleString(), showArea = true, strokeWidth = 2, showDots = false, curveType = "smooth", showTooltip = true, size, className, "aria-label": ariaLabel, ...props }) {
	const prefersReducedMotion = useReducedMotion();
	const instanceId = React.useId().replace(/:/g, "");
	const { highlightedSeries, setHighlightedSeries, getOpacity, dimTransition } = useSeriesHighlight(prefersReducedMotion);
	const chartData = React.useMemo(() => data.map((d) => {
		const point = { label: d.label };
		for (const s of series) {
			const key = sanitizeKey(s.id);
			point[key] = d.values[s.id] ?? 0;
		}
		return point;
	}), [data, series]);
	const chartConfig = React.useMemo(() => {
		const config = {};
		for (const [i, s] of series.entries()) {
			const key = sanitizeKey(s.id);
			config[key] = {
				label: s.label,
				color: s.color || DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]
			};
		}
		return config;
	}, [series]);
	const curveType2 = curveType === "smooth" ? "monotone" : "linear";
	return /* @__PURE__ */ jsx("div", {
		className: cn(lineChartVariants({ size }), className),
		role: "img",
		"aria-label": ariaLabel || "Line chart",
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex h-full gap-1",
			children: [yAxisLabel && /* @__PURE__ */ jsx("div", {
				className: "flex items-center justify-center pb-6",
				children: /* @__PURE__ */ jsx("span", {
					className: "text-xs font-medium text-muted-foreground whitespace-nowrap",
					style: {
						writingMode: "vertical-rl",
						transform: "rotate(180deg)"
					},
					children: yAxisLabel
				})
			}), /* @__PURE__ */ jsxs("div", {
				className: "flex-1 flex flex-col min-w-0",
				children: [
					legendPosition === "top" && /* @__PURE__ */ jsx("div", {
						className: "flex justify-end pb-2",
						children: /* @__PURE__ */ jsx(WrapperChartLegend, {
							series,
							position: "top",
							onSeriesHover: setHighlightedSeries,
							highlightedSeries
						})
					}),
					/* @__PURE__ */ jsxs("div", {
						className: "flex-1 flex",
						children: [/* @__PURE__ */ jsx(ChartContainer, {
							config: chartConfig,
							className: "flex-1 min-h-0 aspect-auto",
							children: /* @__PURE__ */ jsxs(LineChart, {
								data: chartData,
								margin: {
									top: 8,
									right: 8,
									bottom: xAxisLabel ? 20 : 0,
									left: 0
								},
								children: [
									/* @__PURE__ */ jsx(CartesianGrid, {
										strokeDasharray: "0",
										vertical: false,
										className: "stroke-border"
									}),
									showXAxis && /* @__PURE__ */ jsx(XAxis, {
										dataKey: "label",
										tickLine: false,
										axisLine: false,
										tickMargin: 8,
										tick: {
											fill: "var(--muted-foreground)",
											fontSize: 12
										},
										label: xAxisLabel ? {
											value: xAxisLabel,
											position: "bottom",
											offset: 0,
											style: {
												fill: "var(--muted-foreground)",
												fontSize: 12
											}
										} : void 0
									}),
									showYAxis && /* @__PURE__ */ jsx(YAxis, {
										tickLine: false,
										axisLine: false,
										tickMargin: 8,
										tick: {
											fill: "var(--muted-foreground)",
											fontSize: 12
										},
										tickFormatter: yAxisFormat,
										ticks: yAxisTicks,
										width: 48
									}),
									showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
										content: /* @__PURE__ */ jsx(ChartTooltipContent, {}),
										cursor: prefersReducedMotion ? false : { stroke: "var(--border)" }
									}),
									legendPosition !== "none" && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
									showArea && series.map((s) => {
										const key = sanitizeKey(s.id);
										return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
											id: `fill-${instanceId}-${key}`,
											x1: "0",
											y1: "0",
											x2: "0",
											y2: "1",
											children: [/* @__PURE__ */ jsx("stop", {
												offset: "0%",
												stopColor: `var(--color-${key})`,
												stopOpacity: .2
											}), /* @__PURE__ */ jsx("stop", {
												offset: "100%",
												stopColor: `var(--color-${key})`,
												stopOpacity: .02
											})]
										}) }, `gradient-${key}`);
									}),
									showArea && series.map((s) => {
										const key = sanitizeKey(s.id);
										return /* @__PURE__ */ jsx(Area, {
											dataKey: key,
											type: curveType2,
											fill: `url(#fill-${instanceId}-${key})`,
											stroke: "none",
											opacity: getOpacity(s.id),
											style: dimTransition,
											isAnimationActive: !prefersReducedMotion
										}, `area-${key}`);
									}),
									series.map((s) => {
										const key = sanitizeKey(s.id);
										return /* @__PURE__ */ jsx(Line, {
											dataKey: key,
											type: curveType2,
											stroke: `var(--color-${key})`,
											strokeWidth,
											dot: showDots ? {
												fill: `var(--color-${key})`,
												r: 4
											} : false,
											activeDot: /* @__PURE__ */ jsx(ActiveDot, {}),
											opacity: getOpacity(s.id),
											style: dimTransition,
											isAnimationActive: !prefersReducedMotion
										}, key);
									})
								]
							})
						}), legendPosition === "right" && /* @__PURE__ */ jsx("div", {
							className: "ps-3 flex items-start pt-2",
							children: /* @__PURE__ */ jsx(WrapperChartLegend, {
								series,
								position: "right",
								onSeriesHover: setHighlightedSeries,
								highlightedSeries
							})
						})]
					}),
					xAxisLabel && /* @__PURE__ */ jsx("div", {
						className: "flex justify-center pt-2",
						children: /* @__PURE__ */ jsx("span", {
							className: "text-xs font-medium text-muted-foreground",
							children: xAxisLabel
						})
					})
				]
			})]
		})
	});
}
LineChart$1.displayName = "LineChart";
//#endregion
export { DEFAULT_CHART_COLORS, LineChart$1 as LineChart, WrapperChartLegend, lineChartVariants, sanitizeKey };

//# sourceMappingURL=index49.js.map