import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useId } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { CheckIcon } from '@heroicons/react/24/outline';
import { cn } from '../../../utils/cn.js';
import { useSelectableCardContext } from './SelectableCardContext.js';
import { SelectableCardGroup } from './SelectableCardGroup.js';
import { cardVariants } from './SelectableCard.animations.js';

// ─── Radio Indicator ─────────────────────────────────────────────────────────
const RadioIndicator = ({ checked }) => (jsxs("div", { className: "relative flex-shrink-0 flex items-center justify-center size-5", children: [jsx("div", { className: cn("size-5 rounded-full border-2 transition-colors duration-200", checked
                ? "border-[var(--color-primary)]"
                : "border-[var(--color-border)]") }), jsx("div", { className: cn("absolute inset-0 m-auto rounded-full bg-[var(--color-primary)] transition-all duration-200", checked ? "size-2.5 opacity-100" : "size-0 opacity-0") })] }));
// ─── Checkbox Indicator ──────────────────────────────────────────────────────
const CheckboxIndicator = ({ checked }) => (jsx("div", { className: cn("flex-shrink-0 flex items-center justify-center size-5 rounded-[4px] border-2 transition-colors duration-200", checked
        ? "border-[var(--color-primary)] bg-[var(--color-primary)]"
        : "border-[var(--color-border)] bg-[var(--color-background)]"), children: checked && jsx(CheckIcon, { className: "size-3.5 stroke-white", strokeWidth: 3 }) }));
// ─── SelectableCard ──────────────────────────────────────────────────────────
const SelectableCardRoot = React__default.forwardRef(({ value, disabled: cardDisabled, className, children, onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
    const content = children;
    const ctx = useSelectableCardContext();
    const inputId = useId();
    const shouldReduceMotion = useReducedMotion();
    const isDisabled = cardDisabled || ctx.disabled;
    const isSelected = ctx.type === "single"
        ? ctx.value === value
        : Array.isArray(ctx.value) && ctx.value.includes(value);
    const handleClick = () => {
        if (isDisabled)
            return;
        ctx.onChange(value);
    };
    const handleKeyDown = (e) => {
        if (isDisabled)
            return;
        if (e.key === " " || e.key === "Enter") {
            e.preventDefault();
            ctx.onChange(value);
        }
    };
    const inputType = ctx.type === "single" ? "radio" : "checkbox";
    const animated = !shouldReduceMotion && !isDisabled;
    const motionProps = animated
        ? {
            variants: cardVariants,
            initial: "idle",
            whileTap: "tap",
        }
        : {};
    return (jsxs(motion.div, { ref: ref, role: ctx.type === "single" ? "radio" : "checkbox", "aria-checked": isSelected, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, "data-selected": isSelected, "data-disabled": isDisabled || undefined, className: cn(ctx.theme.card, isSelected && ctx.theme.selectedCard, isDisabled && ctx.theme.disabledCard, className), onClick: handleClick, onKeyDown: handleKeyDown, ...motionProps, ...props, children: [jsx("input", { type: inputType, id: inputId, name: ctx.name, value: value, checked: isSelected, disabled: isDisabled, onChange: () => { }, className: "sr-only", tabIndex: -1, "aria-hidden": true }), jsx("div", { className: ctx.theme.contentWrapper, children: content }), ctx.indicator !== "none" && (jsx("div", { className: ctx.theme.indicator, children: ctx.indicator === "radio" ? (jsx(RadioIndicator, { checked: isSelected })) : (jsx(CheckboxIndicator, { checked: isSelected })) }))] }));
});
SelectableCardRoot.displayName = "SelectableCard";
// ─── Compound Export ─────────────────────────────────────────────────────────
const SelectableCard = Object.assign(SelectableCardRoot, {
    Group: SelectableCardGroup,
});

export { SelectableCard };
