import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { ChartContainer } from "./index46.js";
import { useReducedMotion } from "./index47.js";
import { cva } from "class-variance-authority";
import { ArrowUp, ArrowUpRight, Eye, MoreVertical, TrendingUp } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { Area, AreaChart, Line, LineChart } from "recharts";
//#region src/components/organisms/content/MetricItem/MetricItem.tsx
var metricMiniChartVariants = cva("relative shrink-0", {
	variants: { variant: {
		line: "",
		area: "",
		layers: ""
	} },
	defaultVariants: { variant: "line" }
});
function MetricMiniChart({ data, color, width, height = 56, variant = "line", showMarker = true, trend = "positive", className, ...props }) {
	const gradientId = React.useId();
	const shouldAnimate = !useReducedMotion();
	const chartColor = color || (trend === "positive" ? "var(--success)" : "var(--destructive)");
	const chartData = data.map((value, index) => ({
		index,
		value
	}));
	const chartConfig = { value: { color: chartColor } };
	const lastValue = data[data.length - 1];
	const maxValue = Math.max(...data);
	const markerTop = maxValue === 0 ? 50 : Math.max(10, Math.min(90, 100 - lastValue / maxValue * 100));
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "metric-mini-chart",
		"aria-hidden": "true",
		inert: true,
		className: cn(metricMiniChartVariants({ variant }), className),
		style: {
			width,
			height
		},
		...props,
		children: [/* @__PURE__ */ jsx(ChartContainer, {
			config: chartConfig,
			className: "size-full",
			children: variant === "layers" ? /* @__PURE__ */ jsxs(AreaChart, {
				data: chartData,
				margin: {
					top: 0,
					right: 0,
					bottom: 0,
					left: 0
				},
				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
					id: `fillArea${gradientId}`,
					x1: "0",
					y1: "0",
					x2: "0",
					y2: "1",
					children: [/* @__PURE__ */ jsx("stop", {
						offset: "0%",
						stopColor: chartColor,
						stopOpacity: .3
					}), /* @__PURE__ */ jsx("stop", {
						offset: "100%",
						stopColor: chartColor,
						stopOpacity: .05
					})]
				}) }), /* @__PURE__ */ jsx(Area, {
					type: "monotone",
					dataKey: "value",
					stroke: chartColor,
					strokeWidth: 2,
					fill: `url(#fillArea${gradientId})`,
					isAnimationActive: shouldAnimate
				})]
			}) : /* @__PURE__ */ jsxs(LineChart, {
				data: chartData,
				margin: {
					top: 0,
					right: 0,
					bottom: 0,
					left: 0
				},
				children: [variant === "area" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
					id: `fillLine${gradientId}`,
					x1: "0",
					y1: "0",
					x2: "0",
					y2: "1",
					children: [/* @__PURE__ */ jsx("stop", {
						offset: "0%",
						stopColor: chartColor,
						stopOpacity: .15
					}), /* @__PURE__ */ jsx("stop", {
						offset: "100%",
						stopColor: chartColor,
						stopOpacity: .02
					})]
				}) }), /* @__PURE__ */ jsx(Area, {
					type: "monotone",
					dataKey: "value",
					stroke: "none",
					fill: `url(#fillLine${gradientId})`,
					isAnimationActive: shouldAnimate
				})] }), /* @__PURE__ */ jsx(Line, {
					type: "monotone",
					dataKey: "value",
					stroke: chartColor,
					strokeWidth: 2,
					dot: false,
					isAnimationActive: shouldAnimate
				})]
			})
		}), showMarker && variant === "line" && /* @__PURE__ */ jsxs("div", {
			className: "absolute",
			style: {
				right: 0,
				top: `${markerTop}%`,
				transform: "translate(50%, -50%)"
			},
			children: [/* @__PURE__ */ jsx("div", {
				className: "size-[19px] rounded-full opacity-20",
				style: { backgroundColor: chartColor }
			}), /* @__PURE__ */ jsx("div", {
				className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[10px] rounded-full bg-background border-2",
				style: { borderColor: chartColor }
			})]
		})]
	});
}
MetricMiniChart.displayName = "MetricMiniChart";
var metricChangeVariants = cva("inline-flex items-center gap-0.5", {
	variants: {
		variant: {
			default: "",
			badge: "bg-background border border-border rounded-md shadow-xs px-1.5 py-0.5"
		},
		trend: {
			positive: "",
			negative: ""
		}
	},
	defaultVariants: {
		variant: "default",
		trend: "positive"
	}
});
function MetricChange({ value, variant = "default", trend = "positive", icon = "arrow", className, ...props }) {
	const iconColor = trend === "positive" ? "var(--success)" : "var(--destructive)";
	const textColor = variant === "badge" ? "text-secondary-foreground" : trend === "positive" ? "text-success" : "text-destructive";
	const IconComponent = icon === "none" ? null : icon === "trend" ? TrendingUp : icon === "arrow-right" ? ArrowUpRight : ArrowUp;
	const iconSize = variant === "badge" ? 12 : 16;
	return /* @__PURE__ */ jsxs("div", {
		className: cn(metricChangeVariants({
			variant,
			trend
		}), className),
		...props,
		children: [
			IconComponent && /* @__PURE__ */ jsx(IconComponent, {
				"aria-hidden": "true",
				width: iconSize,
				height: iconSize,
				color: iconColor,
				className: cn(trend === "negative" && "rotate-180")
			}),
			/* @__PURE__ */ jsx("span", {
				className: "sr-only",
				children: trend === "positive" ? "Increased" : "Decreased"
			}),
			/* @__PURE__ */ jsx("span", {
				className: cn("text-sm font-medium", textColor),
				children: value
			})
		]
	});
}
MetricChange.displayName = "MetricChange";
var metricItemVariants = cva("relative flex flex-col gap-2 p-5 bg-background rounded-xl border border-border shadow-xs transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none", {
	variants: {
		type: {
			simple: "",
			"icon-01": "",
			"icon-02": "",
			"icon-03": "",
			"icon-04": "flex-row items-center",
			"chart-01": "",
			"chart-02": "",
			"chart-03": "",
			"chart-04": "p-0 bg-transparent border-0 shadow-none"
		},
		breakpoint: {
			desktop: "",
			mobile: ""
		}
	},
	defaultVariants: {
		type: "simple",
		breakpoint: "desktop"
	}
});
var MetricItem = React.memo(function MetricItem({ title, value, changeValue, changeTrend = "positive", changeIcon, comparisonText, subtitle, showDropdown = false, showActions = false, onViewReport, onDropdownClick, icon, iconBgColor, iconColor, chartData, featuredIconVariant = "circle", type = "simple", breakpoint = "desktop", className, children, ...props }) {
	const displayIcon = icon || /* @__PURE__ */ jsx(TrendingUp, {
		width: 24,
		height: 24
	});
	const defaultIconBgColor = type === "icon-01" ? featuredIconVariant === "modern" ? "var(--muted)" : "var(--success-muted)" : type === "icon-02" || type === "icon-03" || type === "icon-04" ? "var(--muted)" : "var(--success-muted)";
	const defaultIconColor = type === "icon-01" ? featuredIconVariant === "modern" ? "var(--secondary-foreground)" : "var(--success)" : type === "icon-02" ? "var(--secondary-foreground)" : "var(--success)";
	const finalIconBgColor = iconBgColor || defaultIconBgColor;
	const finalIconColor = iconColor || defaultIconColor;
	if (type === "chart-04") return /* @__PURE__ */ jsx("div", {
		"data-slot": "metric-item",
		className: cn(metricItemVariants({
			type,
			breakpoint
		}), className),
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex flex-col gap-0.5 w-full",
			children: [/* @__PURE__ */ jsx("div", {
				className: "flex items-center px-5 pt-3 pb-2 w-full",
				children: /* @__PURE__ */ jsx("p", {
					className: "flex-1 text-sm font-semibold text-foreground",
					children: title
				})
			}), /* @__PURE__ */ jsxs("div", {
				className: "relative bg-background border border-border rounded-xl shadow-xs p-5 flex flex-col gap-5",
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: "flex flex-wrap items-center gap-3",
						children: [/* @__PURE__ */ jsx("p", {
							className: "text-display-sm font-semibold text-foreground",
							children: typeof value === "number" ? value.toLocaleString() : value
						}), changeValue && /* @__PURE__ */ jsxs("div", {
							className: "flex items-center gap-2",
							children: [/* @__PURE__ */ jsx(MetricChange, {
								value: changeValue,
								trend: changeTrend,
								icon: changeIcon ?? "trend"
							}), comparisonText && /* @__PURE__ */ jsx("span", {
								className: "text-sm font-medium text-muted-foreground",
								children: comparisonText
							})]
						})]
					}),
					children ? children : chartData ? /* @__PURE__ */ jsx(MetricMiniChart, {
						data: chartData,
						width: void 0,
						height: 56,
						variant: "line",
						showMarker: false,
						trend: changeTrend,
						className: "w-full"
					}) : null,
					showDropdown && /* @__PURE__ */ jsx("button", {
						type: "button",
						"aria-label": "More options",
						className: "absolute top-2 end-2 p-3 cursor-pointer rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
						onClick: onDropdownClick,
						children: /* @__PURE__ */ jsx(MoreVertical, {
							width: 20,
							height: 20,
							className: "text-muted-foreground"
						})
					})
				]
			})]
		})
	});
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "metric-item",
		className: cn(metricItemVariants({
			type,
			breakpoint
		}), className),
		...props,
		children: [
			type === "icon-01" && /* @__PURE__ */ jsxs("div", {
				className: cn("flex items-center justify-center shrink-0 relative overflow-clip", featuredIconVariant === "modern" ? "rounded-[10px] border border-border shadow-xs" : featuredIconVariant === "square" ? "rounded-[10px] border border-border shadow-xs" : "rounded-full"),
				style: {
					width: 48,
					height: 48,
					backgroundColor: finalIconBgColor,
					color: finalIconColor
				},
				children: [displayIcon, featuredIconVariant === "modern" && /* @__PURE__ */ jsx("div", {
					className: "absolute inset-0 pointer-events-none rounded-[10px]",
					style: { boxShadow: "var(--shadow-inset-ring)" }
				})]
			}),
			(type === "icon-02" || type === "icon-03") && /* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-3 w-full",
				children: [/* @__PURE__ */ jsx("div", {
					className: cn("flex items-center justify-center shrink-0", type === "icon-02" ? "rounded-full" : "rounded-lg border border-border shadow-xs"),
					style: {
						width: 48,
						height: 48,
						backgroundColor: finalIconBgColor,
						color: finalIconColor
					},
					children: icon || /* @__PURE__ */ jsx(Eye, {
						width: 24,
						height: 24
					})
				}), /* @__PURE__ */ jsx("p", {
					className: "flex-1 text-base font-semibold text-foreground",
					children: title
				})]
			}),
			type === "icon-04" && /* @__PURE__ */ jsx("div", {
				className: cn("flex items-center justify-center shrink-0 rounded-md border border-border shadow-xs"),
				style: {
					width: 40,
					height: 40,
					backgroundColor: finalIconBgColor,
					color: finalIconColor
				},
				children: icon || /* @__PURE__ */ jsx(TrendingUp, {
					width: 20,
					height: 20
				})
			}),
			type !== "icon-02" && type !== "icon-03" && /* @__PURE__ */ jsxs("div", {
				className: cn("flex flex-col gap-2", type === "icon-04" ? "flex-1 min-w-0" : "w-full"),
				children: [type === "chart-01" || type === "chart-02" ? /* @__PURE__ */ jsx("p", {
					className: "text-base font-semibold text-foreground",
					children: title
				}) : type === "icon-04" || type === "icon-01" ? /* @__PURE__ */ jsx("p", {
					className: "text-sm font-semibold text-muted-foreground",
					children: title
				}) : /* @__PURE__ */ jsx("p", {
					className: "text-sm font-medium text-muted-foreground",
					children: title
				}), type === "simple" || type === "icon-01" || type === "icon-04" ? /* @__PURE__ */ jsxs("div", {
					className: "flex flex-wrap items-center justify-between gap-3 w-full",
					children: [/* @__PURE__ */ jsx("p", {
						className: "text-display-sm font-semibold text-foreground",
						children: typeof value === "number" ? value.toLocaleString() : value
					}), changeValue && comparisonText ? /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [/* @__PURE__ */ jsx(MetricChange, {
							value: changeValue,
							trend: changeTrend,
							icon: "arrow"
						}), /* @__PURE__ */ jsx("span", {
							className: "text-sm font-medium text-muted-foreground",
							children: comparisonText
						})]
					}) : changeValue ? /* @__PURE__ */ jsx(MetricChange, {
						value: changeValue,
						trend: changeTrend,
						icon: changeIcon ?? "arrow-right",
						variant: "badge"
					}) : subtitle ? /* @__PURE__ */ jsx("span", {
						className: "text-sm font-medium text-muted-foreground",
						children: subtitle
					}) : null]
				}) : null]
			}),
			type === "chart-01" && /* @__PURE__ */ jsxs("div", {
				className: "flex items-end gap-4 w-full",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex-1 flex flex-col gap-3",
					children: [/* @__PURE__ */ jsx("p", {
						className: "text-display-sm font-semibold text-foreground",
						children: typeof value === "number" ? value.toLocaleString() : value
					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
							value: changeValue,
							trend: changeTrend,
							icon: "arrow"
						}), comparisonText && /* @__PURE__ */ jsx("span", {
							className: "text-sm font-medium text-muted-foreground truncate",
							children: comparisonText
						})]
					})]
				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
					data: chartData,
					width: 112,
					height: 56,
					variant: "line",
					trend: changeTrend
				})]
			}),
			type === "chart-02" && /* @__PURE__ */ jsxs("div", {
				className: "flex items-end gap-4 w-full",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex-1 flex items-start gap-2",
					children: [/* @__PURE__ */ jsx("p", {
						className: "text-display-md font-semibold text-foreground",
						children: typeof value === "number" ? value.toLocaleString() : value
					}), changeValue && /* @__PURE__ */ jsx(MetricChange, {
						value: changeValue,
						trend: changeTrend,
						icon: "trend"
					})]
				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
					data: chartData,
					width: 128,
					height: 56,
					variant: "layers",
					showMarker: false,
					trend: changeTrend
				})]
			}),
			type === "chart-03" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col gap-2 w-full",
				children: [/* @__PURE__ */ jsx("p", {
					className: "text-sm font-medium text-muted-foreground",
					children: title
				}), /* @__PURE__ */ jsxs("div", {
					className: "flex flex-wrap items-center justify-between gap-3 w-full",
					children: [/* @__PURE__ */ jsx("p", {
						className: "text-display-sm font-semibold text-foreground",
						children: typeof value === "number" ? value.toLocaleString() : value
					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
							value: changeValue,
							trend: changeTrend,
							icon: "trend"
						}), comparisonText && /* @__PURE__ */ jsx("span", {
							className: "text-sm font-medium text-muted-foreground",
							children: comparisonText
						})]
					})]
				})]
			}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
				data: chartData,
				height: 72,
				variant: "area",
				showMarker: false,
				trend: changeTrend,
				className: "w-full"
			})] }),
			(type === "icon-02" || type === "icon-03") && /* @__PURE__ */ jsxs("div", {
				className: "flex items-end gap-4 w-full",
				children: [/* @__PURE__ */ jsxs("div", {
					className: "flex-1 flex flex-col gap-3",
					children: [/* @__PURE__ */ jsx("p", {
						className: "text-display-md font-semibold text-foreground",
						children: typeof value === "number" ? value.toLocaleString() : value
					}), (changeValue || comparisonText) && /* @__PURE__ */ jsxs("div", {
						className: "flex items-center gap-2",
						children: [changeValue && /* @__PURE__ */ jsx(MetricChange, {
							value: changeValue,
							trend: changeTrend,
							icon: type === "icon-03" ? "trend" : "arrow"
						}), comparisonText && /* @__PURE__ */ jsx("span", {
							className: "text-sm font-medium text-muted-foreground truncate",
							children: comparisonText
						})]
					})]
				}), chartData && /* @__PURE__ */ jsx(MetricMiniChart, {
					data: chartData,
					width: 112,
					height: 56,
					variant: "line",
					trend: changeTrend
				})]
			}),
			showDropdown && /* @__PURE__ */ jsx("button", {
				type: "button",
				"aria-label": "More options",
				className: "absolute top-2 end-2 cursor-pointer rounded-sm p-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors duration-150 ease-out hover:text-foreground",
				onClick: onDropdownClick,
				children: /* @__PURE__ */ jsx(MoreVertical, {
					width: 20,
					height: 20,
					className: "text-muted-foreground"
				})
			}),
			showActions && /* @__PURE__ */ jsx("div", {
				className: "flex items-center gap-2 pt-2",
				children: /* @__PURE__ */ jsx(Button, {
					appearance: "outline",
					variant: "secondary",
					size: "sm",
					onClick: onViewReport,
					children: "View report"
				})
			})
		]
	});
});
MetricItem.displayName = "MetricItem";
//#endregion
export { MetricChange, MetricItem, MetricMiniChart, metricChangeVariants, metricItemVariants, metricMiniChartVariants };

//# sourceMappingURL=index455.js.map