"use client";
import { cn } from "./index3.js";
import { useAIInteraction } from "./index407.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
//#region src/components/organisms/ai/AIChart/AIChart.tsx
var DEFAULT_COLORS = [
	"var(--chart-1)",
	"var(--chart-2)",
	"var(--chart-3)",
	"var(--chart-4)",
	"var(--chart-5)"
];
var DEFAULT_HEIGHT = 300;
/**
* Normalize yKey to always be an array
*/
function normalizeYKeys(yKey) {
	if (!yKey) return ["value"];
	return Array.isArray(yKey) ? yKey : [yKey];
}
/**
* Get color for a series index
*/
function getColor(index, colors) {
	const palette = colors && colors.length > 0 ? colors : DEFAULT_COLORS;
	return palette[index % palette.length];
}
/**
* AIChart - Renders charts from JSON schema in AI chat messages.
*
* Supports bar, line, pie, and area chart types with optional interactivity.
* When interactive mode is enabled, click events are emitted through the
* AIInteractionContext.
*/
function AIChart({ schema, className }) {
	const { onInteraction } = useAIInteraction();
	const { id, type, title, data, xKey = "name", yKey, colors, interactive = false, height = DEFAULT_HEIGHT } = schema;
	const yKeys = normalizeYKeys(yKey);
	const handleClick = React.useCallback((clickedData, label) => {
		if (!interactive) return;
		onInteraction?.({
			componentId: id,
			componentType: "chart",
			action: "click",
			value: {
				label: label ?? clickedData[xKey],
				...clickedData
			},
			timestamp: Date.now()
		});
	}, [
		interactive,
		onInteraction,
		id,
		xKey
	]);
	const chartLabel = title ? `${title} - ${type} chart with ${data.length} data points` : `${type} chart with ${data.length} data points`;
	if (!data || data.length === 0) return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-chart",
		role: "img",
		"aria-label": title ? `${title} - No data available` : "Chart - No data available",
		className: cn("flex items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", className),
		style: { height },
		children: "No data available"
	});
	const renderChart = () => {
		switch (type) {
			case "bar": return /* @__PURE__ */ jsxs(BarChart, {
				data,
				children: [
					/* @__PURE__ */ jsx(CartesianGrid, {
						strokeDasharray: "3 3",
						vertical: false,
						className: "stroke-border"
					}),
					/* @__PURE__ */ jsx(XAxis, {
						dataKey: xKey,
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(YAxis, {
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(Tooltip, { contentStyle: {
						backgroundColor: "var(--card)",
						border: "1px solid var(--border)",
						borderRadius: "8px"
					} }),
					yKeys.map((key, index) => /* @__PURE__ */ jsx(Bar, {
						dataKey: key,
						fill: getColor(index, colors),
						radius: [
							4,
							4,
							0,
							0
						],
						cursor: interactive ? "pointer" : void 0,
						onClick: (barData) => handleClick(barData)
					}, key))
				]
			});
			case "line": return /* @__PURE__ */ jsxs(LineChart, {
				data,
				children: [
					/* @__PURE__ */ jsx(CartesianGrid, {
						strokeDasharray: "3 3",
						vertical: false,
						className: "stroke-border"
					}),
					/* @__PURE__ */ jsx(XAxis, {
						dataKey: xKey,
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(YAxis, {
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(Tooltip, { contentStyle: {
						backgroundColor: "var(--card)",
						border: "1px solid var(--border)",
						borderRadius: "8px"
					} }),
					yKeys.map((key, index) => /* @__PURE__ */ jsx(Line, {
						type: "monotone",
						dataKey: key,
						stroke: getColor(index, colors),
						strokeWidth: 2,
						dot: {
							fill: getColor(index, colors),
							r: 4
						},
						activeDot: {
							r: 6,
							cursor: interactive ? "pointer" : void 0,
							onClick: (_event, payload) => {
								const pointPayload = payload;
								if (pointPayload?.payload) handleClick(pointPayload.payload);
							}
						}
					}, key))
				]
			});
			case "area": return /* @__PURE__ */ jsxs(AreaChart, {
				data,
				children: [
					/* @__PURE__ */ jsx(CartesianGrid, {
						strokeDasharray: "3 3",
						vertical: false,
						className: "stroke-border"
					}),
					/* @__PURE__ */ jsx(XAxis, {
						dataKey: xKey,
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(YAxis, {
						tickLine: false,
						axisLine: false,
						tick: {
							fill: "var(--muted-foreground)",
							fontSize: 12
						}
					}),
					/* @__PURE__ */ jsx(Tooltip, { contentStyle: {
						backgroundColor: "var(--card)",
						border: "1px solid var(--border)",
						borderRadius: "8px"
					} }),
					yKeys.map((key, index) => /* @__PURE__ */ jsx(Area, {
						type: "monotone",
						dataKey: key,
						stroke: getColor(index, colors),
						fill: getColor(index, colors),
						fillOpacity: .3,
						strokeWidth: 2,
						activeDot: {
							r: 6,
							cursor: interactive ? "pointer" : void 0,
							onClick: (_event, payload) => {
								const pointPayload = payload;
								if (pointPayload?.payload) handleClick(pointPayload.payload);
							}
						}
					}, key))
				]
			});
			case "pie": return /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx(Pie, {
				data,
				dataKey: yKeys[0],
				nameKey: xKey,
				cx: "50%",
				cy: "50%",
				outerRadius: "80%",
				label: ({ name }) => name,
				labelLine: false,
				cursor: interactive ? "pointer" : void 0,
				onClick: (pieData) => handleClick(pieData, pieData?.name),
				children: data.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: getColor(index, colors) }, `cell-${entry[xKey] ?? index}`))
			}), /* @__PURE__ */ jsx(Tooltip, { contentStyle: {
				backgroundColor: "var(--card)",
				border: "1px solid var(--border)",
				borderRadius: "8px"
			} })] });
			default: return null;
		}
	};
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-chart",
		role: "img",
		"aria-label": chartLabel,
		className: cn("flex flex-col gap-2", className),
		children: [title && /* @__PURE__ */ jsx("h3", {
			className: "text-sm font-medium text-foreground",
			children: title
		}), /* @__PURE__ */ jsx("div", {
			style: { height },
			children: /* @__PURE__ */ jsx(ResponsiveContainer, {
				width: "100%",
				height: "100%",
				children: renderChart()
			})
		})]
	});
}
AIChart.displayName = "AIChart";
//#endregion
export { AIChart as default };

//# sourceMappingURL=index412.js.map