import { cn } from "./index3.js";
import { LineChart } from "./index49.js";
import { BarChart } from "./index50.js";
import { cva } from "class-variance-authority";
import { ArrowDown, ArrowUp } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/content/MetricCard/MetricCard.tsx
var metricCardVariants = cva("bg-background border border-border rounded-xl shadow-sm flex flex-col w-full", {
	variants: { size: {
		sm: "gap-3 p-3",
		md: "gap-5 p-5",
		lg: "gap-6 p-6"
	} },
	defaultVariants: { size: "md" }
});
var titleSizeClasses = {
	sm: "text-sm",
	md: "text-md",
	lg: "text-lg"
};
var valueSizeClasses = {
	sm: "text-display-xs",
	md: "text-display-sm",
	lg: "text-display-md"
};
var changeSizeClasses = {
	sm: "text-xs",
	md: "text-sm",
	lg: "text-base"
};
var changeSentimentColors = {
	positive: "text-success",
	negative: "text-destructive",
	neutral: "text-muted-foreground"
};
function MetricCard({ value, title, description = "vs last month", change, changeOverride, changeSentiment = "neutral", data, series, chartType = "line", strokeWidth = 2, showArea = true, showDots = false, curveType = "smooth", valueFormatter = (n) => n.toLocaleString(), changeFormatter = (n) => {
	return `${Math.abs(n).toFixed(0)}%`;
}, size = "md", className, ...props }) {
	const [displayValue, setDisplayValue] = useState(0);
	const hasAnimated = useRef(false);
	const rootRef = useRef(null);
	useEffect(() => {
		if (hasAnimated.current) {
			setDisplayValue(value);
			return;
		}
		hasAnimated.current = true;
		const win = rootRef.current?.ownerDocument.defaultView;
		if (win ? win.matchMedia("(prefers-reduced-motion: reduce)").matches : false) {
			setDisplayValue(value);
			return;
		}
		const duration = 600;
		const startTime = performance.now();
		let frameId;
		const animate = (now) => {
			const elapsed = now - startTime;
			const progress = Math.min(elapsed / duration, 1);
			const eased = 1 - (1 - progress) ** 3;
			setDisplayValue(Math.round(eased * value));
			if (progress < 1) frameId = requestAnimationFrame(animate);
			else setDisplayValue(value);
		};
		frameId = requestAnimationFrame(animate);
		return () => cancelAnimationFrame(frameId);
	}, [value]);
	const calculatedChange = useMemo(() => {
		if (changeOverride !== void 0) return changeOverride;
		if (change !== void 0) return change;
		if (!data || data.length < 2 || !series || series.length === 0) return void 0;
		const seriesId = series[0].id;
		const firstValue = data[0].values[seriesId];
		const lastValue = data[data.length - 1].values[seriesId];
		if (firstValue === 0 || firstValue === void 0) return void 0;
		return (lastValue - firstValue) / firstValue * 100;
	}, [
		data,
		series,
		change,
		changeOverride
	]);
	const changeDirection = calculatedChange && calculatedChange > 0 ? "up" : "down";
	const renderChart = () => {
		if (!data || !series) return null;
		const sharedProps = {
			data,
			series,
			size: "sm",
			showYAxis: false,
			showXAxis: false,
			showTooltip: false,
			className: "h-14 w-28"
		};
		if (chartType === "bar") return /* @__PURE__ */ jsx(BarChart, { ...sharedProps });
		return /* @__PURE__ */ jsx(LineChart, {
			...sharedProps,
			strokeWidth,
			showDots,
			curveType,
			showArea: chartType === "area" || showArea
		});
	};
	return /* @__PURE__ */ jsxs("div", {
		ref: rootRef,
		"data-slot": "metric-card",
		className: cn(metricCardVariants({ size }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", className),
		...props,
		children: [title && /* @__PURE__ */ jsx("h3", {
			className: cn("font-semibold text-foreground", titleSizeClasses[size || "md"]),
			children: title
		}), /* @__PURE__ */ jsxs("div", {
			className: "flex items-end gap-4",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-3 flex-1 min-w-0",
				children: [/* @__PURE__ */ jsx("div", {
					className: cn("font-semibold text-foreground", valueSizeClasses[size || "md"]),
					children: valueFormatter(displayValue)
				}), calculatedChange !== void 0 && /* @__PURE__ */ jsxs("div", {
					className: "flex items-center gap-2",
					children: [/* @__PURE__ */ jsxs("div", {
						className: cn("inline-flex items-center gap-0.5 font-medium", changeSizeClasses[size || "md"], changeSentimentColors[changeSentiment]),
						children: [
							changeDirection === "up" ? /* @__PURE__ */ jsx(ArrowUp, {
								className: "size-4",
								"aria-hidden": "true"
							}) : /* @__PURE__ */ jsx(ArrowDown, {
								className: "size-4",
								"aria-hidden": "true"
							}),
							/* @__PURE__ */ jsx("span", {
								className: "sr-only",
								children: changeDirection === "up" ? "Increased" : "Decreased"
							}),
							/* @__PURE__ */ jsx("span", { children: changeFormatter(calculatedChange) })
						]
					}), description && /* @__PURE__ */ jsx("span", {
						className: cn("font-medium text-muted-foreground", changeSizeClasses[size || "md"]),
						children: description
					})]
				})]
			}), data && series && /* @__PURE__ */ jsx("div", {
				"aria-hidden": "true",
				inert: true,
				children: renderChart()
			})]
		})]
	});
}
MetricCard.displayName = "MetricCard";
//#endregion
export { MetricCard, metricCardVariants };

//# sourceMappingURL=index454.js.map