import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useState, useEffect, useCallback } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { pillTheme } from './Pill.theme.js';
import { pillTapVariant } from './Pill.animations.js';
import { cn } from '../../../utils/cn.js';

/**
 * Pill component - Simplified selectable chip for filters and tags
 *
 * A focused component with single outline style. For colorful semantic
 * variations, use Badge instead.
 *
 * @example Basic usage
 * ```tsx
 * <Pill>Design</Pill>
 * ```
 *
 * @example Selectable filter
 * ```tsx
 * const [selected, setSelected] = useState(false);
 * <Pill selected={selected} onSelect={setSelected}>
 *   Frontend
 * </Pill>
 * ```
 *
 * @example Multi-select filters
 * ```tsx
 * const [filters, setFilters] = useState(['design']);
 * <Pill
 *   selected={filters.includes('design')}
 *   onSelect={(selected) => {
 *     setFilters(selected
 *       ? [...filters, 'design']
 *       : filters.filter(f => f !== 'design')
 *     );
 *   }}
 * >
 *   Design
 * </Pill>
 * ```
 */
const Pill = React__default.forwardRef(({ children, size = "md", iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...props }, ref) => {
    // ========== State Management ==========
    var _a, _b;
    const [isSelected, setIsSelected] = useState(selected);
    useEffect(() => {
        setIsSelected(selected);
    }, [selected]);
    const shouldReduceMotion = useReducedMotion();
    // ========== Derived State ==========
    const isSelectable = Boolean(onSelect);
    const isClickable = Boolean(onClick);
    const isInteractive = (isSelectable || isClickable) && !readOnly;
    // ========== Development Warnings ==========
    useEffect(() => {
        if (process.env.NODE_ENV !== "production") {
            if (selected !== undefined && !onSelect) {
                // eslint-disable-next-line no-console
                console.warn('[Pill] Component has "selected" prop but missing "onSelect" handler. The pill will not be interactive.');
            }
        }
    }, [selected, onSelect]);
    // ========== Event Handlers ==========
    const handleClick = useCallback((e) => {
        if (readOnly) {
            e.preventDefault();
            return;
        }
        if (onSelect) {
            const newSelected = !isSelected;
            setIsSelected(newSelected);
            onSelect(newSelected);
        }
        onClick === null || onClick === void 0 ? void 0 : onClick(e);
    }, [readOnly, onSelect, isSelected, onClick]);
    const handleKeyDown = useCallback((e) => {
        if (readOnly || !isSelectable)
            return;
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            const newSelected = !isSelected;
            setIsSelected(newSelected);
            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
        }
    }, [readOnly, isSelectable, isSelected, onSelect]);
    // ========== Theme Merging ==========
    const mergedTheme = {
        baseStyle: theme.baseStyle || pillTheme.baseStyle,
        hoverStyle: theme.hoverStyle || pillTheme.hoverStyle,
        selectedStyle: theme.selectedStyle || pillTheme.selectedStyle,
        sizeStyle: ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || pillTheme.sizes[size],
        iconSizeStyle: ((_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]) || pillTheme.iconSizes[size],
    };
    // ========== Icon Rendering ==========
    const renderStartIcon = useCallback(() => {
        if (iconStart) {
            return (jsx("span", { className: cn("flex-shrink-0", mergedTheme.iconSizeStyle), "aria-hidden": "true", children: iconStart }));
        }
        return null;
    }, [iconStart, mergedTheme.iconSizeStyle]);
    // ========== Render ==========
    return (jsxs(motion.span, { ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.sizeStyle, 
        // Hover only when interactive and NOT selected
        isInteractive && !isSelected && mergedTheme.hoverStyle, 
        // Selected styles
        isSelected && mergedTheme.selectedStyle, 
        // Cursor styling
        isInteractive ? "cursor-pointer" : "cursor-default", className // User overrides (highest priority)
        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-size": size, "data-selected": isSelected ? "true" : "false", "data-readonly": !isInteractive ? "true" : "false", "data-selectable": isSelectable ? "true" : "false", 
        // Accessibility
        role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
        // Animation
        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : undefined, ...props, children: [renderStartIcon(), children] }));
});
Pill.displayName = "Pill";

export { Pill };
