import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { ChevronUpDownIcon } from '@heroicons/react/16/solid';
import { cn } from '../../../utils/cn.js';
import { feedTheme } from './Feed.theme.js';
import { collapseLayerExitTiming, collapseLayerEnterTiming, EASE, expandLayerEnterTiming, expandLayerExitTiming, STAGGER_BASE_DELAY, STAGGER_IN, STAGGER_OUT } from './Feed.animations.js';

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------
const FeedContext = createContext(undefined);
const useFeedContext = () => {
    const ctx = useContext(FeedContext);
    if (!ctx)
        return { theme: feedTheme };
    return ctx;
};
// ---------------------------------------------------------------------------
// Feed (root)
// ---------------------------------------------------------------------------
const FeedRoot = React__default.forwardRef(({ children, className, theme: themeOverrides, ...props }, ref) => {
    const theme = useMemo(() => ({ ...feedTheme, ...themeOverrides }), [themeOverrides]);
    const contextValue = useMemo(() => ({ theme }), [theme]);
    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: children }) }) }));
});
FeedRoot.displayName = "Feed";
// ---------------------------------------------------------------------------
// Feed.Item
// ---------------------------------------------------------------------------
const FeedItemInner = ({ icon, indicatorClassName, timestamp, children }) => {
    const { theme } = useFeedContext();
    return (jsxs("div", { className: theme.itemInnerStyle, children: [jsx("span", { "aria-hidden": "true", className: theme.connectorStyle }), jsxs("div", { className: theme.itemContentStyle, children: [icon ? (jsx("div", { className: cn(theme.indicatorStyle, indicatorClassName), children: icon })) : (jsx("div", { className: cn(theme.dotIndicatorStyle, indicatorClassName), children: jsx("span", { className: "size-1.5 rounded-full bg-[var(--color-text-muted)]" }) })), jsxs("div", { className: theme.contentStyle, children: [children, timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] })] })] }));
};
const FeedItem = React__default.forwardRef(({ icon, indicatorClassName, timestamp, children, className, _as = "li", ...props }, ref) => {
    const inner = (jsx(FeedItemInner, { icon: icon, indicatorClassName: indicatorClassName, timestamp: timestamp, children: children }));
    if (_as === "div") {
        return (jsx("div", { className: className, ...props, children: inner }));
    }
    return (jsx("li", { ref: ref, className: className, ...props, children: inner }));
});
FeedItem.displayName = "Feed.Item";
// ---------------------------------------------------------------------------
// Feed.Collapse
// ---------------------------------------------------------------------------
/**
 * SVG curved connector for the collapsed state.
 * Draws a smooth parenthesis ) shape from (1,0) → (APEX,MID) → (1,H).
 * Cubic beziers with vertical tangents at every junction so the curve
 * connects seamlessly to the straight Feed connector above/below.
 *
 * Both CURVE_PATH and STRAIGHT_PATH use identical command structure
 * (M, C, C) so framer-motion interpolates all numeric values smoothly.
 */
const COLLAPSED_HEIGHT = 72;
const CURVE_APEX_X = 24;
const STROKE_WIDTH = 2;
const SVG_WIDTH = CURVE_APEX_X + STROKE_WIDTH;
const MID_Y = COLLAPSED_HEIGHT / 2;
const CURVE_PATH = `M 1 0 C 1 20, ${CURVE_APEX_X} 16, ${CURVE_APEX_X} ${MID_Y} C ${CURVE_APEX_X} 56, 1 52, 1 ${COLLAPSED_HEIGHT}`;
const STRAIGHT_PATH = `M 1 0 C 1 12, 1 24, 1 ${MID_Y} C 1 48, 1 60, 1 ${COLLAPSED_HEIGHT}`;
const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = false, expanded: controlledExpanded, onToggle, children, className, }) => {
    const { theme } = useFeedContext();
    const shouldReduceMotion = useReducedMotion();
    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
    const isControlled = controlledExpanded !== undefined;
    const expanded = isControlled ? controlledExpanded : internalExpanded;
    const count = React__default.Children.count(children);
    const resolvedLabel = label.replace("{count}", String(count));
    const handleToggle = useCallback(() => {
        const next = !expanded;
        if (!isControlled)
            setInternalExpanded(next);
        onToggle === null || onToggle === void 0 ? void 0 : onToggle(next);
    }, [expanded, isControlled, onToggle]);
    // Clone children with _as="div" to avoid nested <li>
    const clonedChildren = React__default.Children.map(children, (child) => {
        if (React__default.isValidElement(child)) {
            return React__default.cloneElement(child, {
                _as: "div",
            });
        }
        return child;
    });
    const collapseIcon = icon !== null && icon !== void 0 ? icon : (jsx(ChevronUpDownIcon, { className: "size-4 text-[var(--color-primary)]" }));
    /* ---- Reduced motion: instant toggle, no staged animations ---- */
    if (shouldReduceMotion) {
        return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [expanded && (jsx("span", { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60" })), !expanded ? (jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx("path", { d: CURVE_PATH, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {
                                left: `calc(1.25rem - 1px + ${CURVE_APEX_X + 12}px)`,
                            }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] })) : (jsxs("div", { children: [clonedChildren, jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) })] }))] }));
    }
    /* ---- Full multi-stage animation ---- */
    return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [jsx(motion.span, { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60", animate: { opacity: expanded ? 1 : 0 }, transition: { duration: 0.2 } }), jsx(motion.div, { animate: {
                    height: expanded ? 0 : COLLAPSED_HEIGHT,
                    opacity: expanded ? 0 : 1,
                }, transition: expanded ? collapseLayerExitTiming : collapseLayerEnterTiming, style: { overflow: "hidden", position: "relative" }, children: jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx(motion.path, { animate: { d: expanded ? STRAIGHT_PATH : CURVE_PATH }, transition: { duration: 0.3, ease: EASE }, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs(motion.button, { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {
                                left: `calc(1.25rem - 1px + ${CURVE_APEX_X + 12}px)`,
                            }, animate: { opacity: expanded ? 0 : 1 }, transition: { duration: 0.2, delay: expanded ? 0 : 0.2 }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] }) }), jsxs(motion.div, { animate: { height: expanded ? "auto" : 0 }, transition: expanded ? expandLayerEnterTiming : expandLayerExitTiming, style: { overflow: "hidden" }, children: [React__default.Children.map(clonedChildren, (child, i) => (jsx(motion.div, { animate: {
                            opacity: expanded ? 1 : 0,
                            y: expanded ? 0 : 8,
                        }, transition: {
                            duration: 0.25,
                            delay: expanded
                                ? STAGGER_BASE_DELAY + i * STAGGER_IN
                                : (count - i) * STAGGER_OUT,
                        }, children: child }, i))), jsx(motion.div, { animate: {
                            opacity: expanded ? 1 : 0,
                            y: expanded ? 0 : 8,
                        }, transition: {
                            duration: 0.25,
                            delay: expanded ? STAGGER_BASE_DELAY + count * STAGGER_IN : 0,
                        }, children: jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) }) })] })] }));
};
FeedCollapse.displayName = "Feed.Collapse";
// ---------------------------------------------------------------------------
// Compound export
// ---------------------------------------------------------------------------
const Feed = Object.assign(FeedRoot, {
    Item: FeedItem,
    Collapse: FeedCollapse,
});

export { Feed, useFeedContext };
