import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { Textarea } from "./index40.js";
import { AnimatePresence } from "./index308.js";
import { motion } from "./index359.js";
import { cva } from "class-variance-authority";
import { Check, ThumbsDown, ThumbsUp } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AIFeedbackBar/AIFeedbackBar.tsx
var feedbackBarVariants = cva("flex items-center gap-2 rounded-xl border transition-colors", {
	variants: {
		variant: {
			default: "bg-background border-border",
			subtle: "bg-muted border-border",
			inline: "bg-transparent border-transparent"
		},
		size: {
			sm: "px-2 py-1",
			md: "px-3 py-2",
			lg: "px-4 py-3"
		}
	},
	defaultVariants: {
		variant: "default",
		size: "md"
	}
});
var feedbackButtonVariants = cva("flex items-center justify-center rounded-full transition-colors", {
	variants: {
		variant: {
			default: "hover:bg-accent",
			selected: "bg-primary/10 text-primary",
			positive: "bg-success/10 text-success",
			negative: "bg-destructive/10 text-destructive"
		},
		size: {
			sm: "size-9",
			md: "size-10",
			lg: "size-11"
		}
	},
	defaultVariants: {
		variant: "default",
		size: "md"
	}
});
function FeedbackButton({ type, isSelected, onClick, size = "md", disabled = false }) {
	const Icon = type === "positive" ? ThumbsUp : ThumbsDown;
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		onClick,
		disabled,
		className: cn(feedbackButtonVariants({
			variant: isSelected ? type : "default",
			size
		}), "delight-click-ripple focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out motion-reduce:transition-none", disabled && "opacity-50 cursor-not-allowed"),
		"aria-label": type === "positive" ? "Helpful" : "Not helpful",
		"aria-pressed": isSelected,
		children: /* @__PURE__ */ jsx(Icon, { className: {
			sm: "size-4",
			md: "size-5",
			lg: "size-6"
		}[size] })
	});
}
function ReasonChips({ reasons, selected, onSelect }) {
	return /* @__PURE__ */ jsx("div", {
		className: "flex flex-wrap gap-2",
		role: "group",
		"aria-label": "Feedback reasons",
		children: reasons.map((reason) => /* @__PURE__ */ jsx("button", {
			type: "button",
			onClick: () => onSelect(reason.key),
			"aria-pressed": selected === reason.key,
			className: cn("px-3 py-1.5 rounded-full text-sm transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", selected === reason.key ? "bg-primary text-primary-foreground" : "bg-muted text-secondary-foreground hover:bg-accent"),
			children: reason.label
		}, reason.key))
	});
}
function FeedbackForm({ feedbackType, reasons, onSubmit, onCancel, placeholder, commentRequired = false }) {
	const [comment, setComment] = React.useState("");
	const [selectedReason, setSelectedReason] = React.useState();
	const defaultPlaceholder = feedbackType === "negative" ? "What could be improved?" : "What did you find helpful?";
	return /* @__PURE__ */ jsx(motion.div, {
		initial: {
			opacity: 0,
			height: 0
		},
		animate: {
			opacity: 1,
			height: "auto"
		},
		exit: {
			opacity: 0,
			height: 0
		},
		className: "overflow-hidden",
		children: /* @__PURE__ */ jsxs("div", {
			className: "pt-3 space-y-3",
			children: [
				reasons && reasons.length > 0 && /* @__PURE__ */ jsx(ReasonChips, {
					reasons,
					selected: selectedReason,
					onSelect: setSelectedReason
				}),
				/* @__PURE__ */ jsx(Textarea, {
					value: comment,
					onChange: (e) => setComment(e.target.value),
					placeholder: placeholder || defaultPlaceholder,
					rows: 3,
					className: "text-sm",
					required: commentRequired
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex items-center justify-end gap-2",
					children: [/* @__PURE__ */ jsx(Button, {
						appearance: "ghost",
						variant: "secondary",
						size: "sm",
						onClick: onCancel,
						children: "Cancel"
					}), /* @__PURE__ */ jsx(Button, {
						size: "sm",
						onClick: () => onSubmit({
							reason: selectedReason,
							comment
						}),
						disabled: commentRequired && !comment.trim(),
						children: "Submit"
					})]
				})
			]
		})
	});
}
function AIFeedbackBar({ value, onChange, showForm = false, reasons, prompt = "Was this helpful?", thankYouMessage = "Thanks for your feedback!", commentPlaceholder, commentRequired = false, allowChange = true, variant, size, className }) {
	const [feedback, setFeedback] = React.useState(value || null);
	const [showFormState, setShowFormState] = React.useState(false);
	const [submitted, setSubmitted] = React.useState(false);
	React.useEffect(() => {
		if (value !== void 0) setFeedback(value);
	}, [value]);
	const handleFeedbackClick = (type) => {
		if (submitted && !allowChange) return;
		const newFeedback = feedback === type ? null : type;
		setFeedback(newFeedback);
		if (showForm && newFeedback) setShowFormState(true);
		else {
			onChange?.({ type: newFeedback });
			if (newFeedback) setSubmitted(true);
		}
	};
	const handleFormSubmit = ({ reason, comment }) => {
		onChange?.({
			type: feedback,
			reason,
			comment
		});
		setShowFormState(false);
		setSubmitted(true);
	};
	const handleFormCancel = () => {
		setShowFormState(false);
		setFeedback(null);
	};
	if (submitted && !allowChange) return /* @__PURE__ */ jsxs(motion.div, {
		initial: { opacity: 0 },
		animate: { opacity: 1 },
		"data-slot": "ai-feedback-bar",
		className: cn(feedbackBarVariants({
			variant,
			size
		}), "motion-reduce:!opacity-100", className),
		children: [/* @__PURE__ */ jsx(Check, { className: "size-4 text-success delight-check-bounce motion-reduce:!animate-none" }), /* @__PURE__ */ jsx("span", {
			className: "text-sm text-muted-foreground",
			children: thankYouMessage
		})]
	});
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-feedback-bar",
		className: cn("space-y-0", className),
		children: [/* @__PURE__ */ jsxs("div", {
			className: cn(feedbackBarVariants({
				variant,
				size
			})),
			children: [prompt && /* @__PURE__ */ jsx("span", {
				className: "text-sm text-foreground me-1",
				children: prompt
			}), /* @__PURE__ */ jsxs("div", {
				className: "flex items-center gap-1",
				role: "group",
				"aria-label": "Rate this response",
				children: [/* @__PURE__ */ jsx(FeedbackButton, {
					type: "positive",
					isSelected: feedback === "positive",
					onClick: () => handleFeedbackClick("positive"),
					size: size || "md",
					disabled: submitted && !allowChange
				}), /* @__PURE__ */ jsx(FeedbackButton, {
					type: "negative",
					isSelected: feedback === "negative",
					onClick: () => handleFeedbackClick("negative"),
					size: size || "md",
					disabled: submitted && !allowChange
				})]
			})]
		}), /* @__PURE__ */ jsx(AnimatePresence, { children: showFormState && /* @__PURE__ */ jsx(FeedbackForm, {
			feedbackType: feedback,
			reasons,
			onSubmit: handleFormSubmit,
			onCancel: handleFormCancel,
			placeholder: commentPlaceholder,
			commentRequired
		}) })]
	});
}
AIFeedbackBar.displayName = "AIFeedbackBar";
function AIFeedbackIcons({ value, onChange, size = "md", className }) {
	const [feedback, setFeedback] = React.useState(value || null);
	React.useEffect(() => {
		if (value !== void 0) setFeedback(value);
	}, [value]);
	const handleClick = (type) => {
		const newFeedback = feedback === type ? null : type;
		setFeedback(newFeedback);
		onChange?.(newFeedback);
	};
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "ai-feedback-icons",
		className: cn("flex items-center gap-1", className),
		role: "group",
		"aria-label": "Rate this response",
		children: [/* @__PURE__ */ jsx(FeedbackButton, {
			type: "positive",
			isSelected: feedback === "positive",
			onClick: () => handleClick("positive"),
			size
		}), /* @__PURE__ */ jsx(FeedbackButton, {
			type: "negative",
			isSelected: feedback === "negative",
			onClick: () => handleClick("negative"),
			size
		})]
	});
}
AIFeedbackIcons.displayName = "AIFeedbackIcons";
//#endregion
export { AIFeedbackBar, AIFeedbackIcons, FeedbackButton, feedbackBarVariants, feedbackButtonVariants };

//# sourceMappingURL=index423.js.map