import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { useState, useEffect } from "react";
import { Expand, Shrink } from "lucide-react";
/**
 * A reusable card component with header (icon, title, description) and content area.
 * Originally created for the page wizard but now available as a generic UI component.
 */
export function Card({ children, icon, title, description, className, noPadding, collapsible = "no", defaultCollapsed = "no", summary, footer, showFullscreenButton = false, onFullscreen, headerActions, titleClassName, descriptionClassName, iconClassName = "text-highlight-100", }) {
    const [isExpanded, setIsExpanded] = useState(() => {
        if (defaultCollapsed === "yes")
            return false; // Starts collapsed
        if (defaultCollapsed === "no")
            return true; // Starts expanded
        if (defaultCollapsed === "mobileOnly")
            return false; // Starts collapsed on mobile, but we'll handle desktop separately
        return true; // Default
    });
    const [isFullscreen, setIsFullscreen] = useState(false);
    const isCollapsibleEnabled = collapsible !== "no";
    // Prevent body scroll when fullscreen is active
    useEffect(() => {
        if (isFullscreen) {
            document.body.style.overflow = "hidden";
            return () => {
                document.body.style.overflow = "";
            };
        }
    }, [isFullscreen]);
    // Check if collapsible behavior should be active (considering mobile-only options)
    const isCollapsibleActive = () => {
        if (collapsible === "no")
            return false;
        if (collapsible === "mobileOnly") {
            // Only collapsible on mobile - we'll handle this with CSS classes
            return true;
        }
        return true; // For "yes"
    };
    // Determine what content to show based on collapsible state
    const getContentToShow = () => {
        if (!isCollapsibleEnabled)
            return children;
        return isExpanded ? children : summary;
    };
    const shouldShowContent = () => {
        if (!isCollapsibleEnabled)
            return true;
        // Always show content area if we have either main content or summary
        if (!isExpanded && summary)
            return true;
        if (isExpanded)
            return true;
        return false;
    };
    const toggleExpanded = () => {
        if (isCollapsibleActive()) {
            setIsExpanded(!isExpanded);
        }
    };
    const handleFullscreen = () => {
        setIsFullscreen(true);
        onFullscreen?.();
    };
    const handleExitFullscreen = () => {
        setIsFullscreen(false);
    };
    return (_jsxs(_Fragment, { children: [isFullscreen && (_jsx("div", { className: "bg-neutral-grey-100/20 fixed inset-0 z-40 backdrop-blur-sm md:hidden", onClick: handleExitFullscreen })), _jsxs("div", { className: cn("flex flex-col rounded-lg bg-white transition-all duration-300 ease-in-out", className, isFullscreen && [
                    // Fullscreen styles - only on mobile
                    "fixed inset-0 z-50 mx-0 mt-[30px] h-[calc(100vh-60px)] shadow-xl md:relative md:inset-auto md:mx-auto md:mt-0 md:h-auto md:shadow-none",
                ]), children: [_jsxs("div", { className: cn("flex flex-col justify-between gap-1 p-4 pb-2 md:p-6 md:pb-4", isCollapsibleEnabled && "cursor-pointer"), onClick: isCollapsibleEnabled ? toggleExpanded : undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: cn("flex items-center justify-center", iconClassName), children: icon }), title && (_jsx("div", { className: cn("text-neutral-grey-100 text-base font-medium", titleClassName), children: title }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [headerActions, showFullscreenButton && (_jsx("button", { onClick: handleFullscreen, className: cn("text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200 md:hidden", isFullscreen && "hidden"), "aria-label": "Open fullscreen", children: _jsx(Expand, { className: "h-4 w-4" }) })), showFullscreenButton && isFullscreen && (_jsx("button", { onClick: handleExitFullscreen, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200 md:hidden", "aria-label": "Exit fullscreen", children: _jsx(Shrink, { className: "h-4 w-4" }) })), isCollapsibleEnabled && !summary && (_jsxs(_Fragment, { children: [collapsible === "yes" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200", "aria-label": isExpanded ? "Collapse" : "Expand", children: _jsx("svg", { className: cn("h-4 w-4 transition-transform duration-200", isExpanded ? "rotate-180" : "rotate-0"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })), collapsible === "mobileOnly" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200 md:hidden", "aria-label": isExpanded ? "Collapse" : "Expand", children: _jsx("svg", { className: cn("h-4 w-4 transition-transform duration-200", isExpanded ? "rotate-180" : "rotate-0"), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }))] }))] })] }), _jsx("div", { className: cn("text-neutral-grey-50 mb-1 text-xs", descriptionClassName), children: description })] }), shouldShowContent() && (_jsx("div", { className: cn("flex-1 transition-all duration-300 ease-in-out", noPadding ? "" : "p-4 pt-0 md:p-6 md:pt-0", isFullscreen && "overflow-hidden", 
                        // Handle responsive behavior for mobile-only collapsible options
                        collapsible === "mobileOnly" &&
                            !isExpanded &&
                            summary &&
                            "block md:hidden", collapsible === "mobileOnly" && isExpanded && "block", className), children: !isExpanded && summary && isCollapsibleEnabled ? (_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 cursor-pointer", onClick: toggleExpanded, children: summary }), collapsible === "yes" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200", "aria-label": "Expand", children: _jsx("svg", { className: "h-4 w-4 rotate-0 transition-transform duration-200", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })), collapsible === "mobileOnly" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200 md:hidden", "aria-label": "Expand", children: _jsx("svg", { className: "h-4 w-4 rotate-0 transition-transform duration-200", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }))] })) : (_jsx(_Fragment, { children: isExpanded && isCollapsibleEnabled && summary ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mb-4 flex items-start justify-between gap-2", children: [_jsx("div", { className: "flex-1 cursor-pointer", onClick: toggleExpanded, children: summary }), collapsible === "yes" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200", "aria-label": "Collapse", children: _jsx("svg", { className: "h-4 w-4 rotate-180 transition-transform duration-200", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })), collapsible === "mobileOnly" && (_jsx("button", { onClick: toggleExpanded, className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex-shrink-0 transition-colors duration-200 md:hidden", "aria-label": "Collapse", children: _jsx("svg", { className: "h-4 w-4 rotate-180 transition-transform duration-200", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }))] }), _jsx("div", { children: children })] })) : (getContentToShow()) })) })), collapsible === "mobileOnly" && (_jsx("div", { className: cn("hidden flex-1 transition-all duration-300 ease-in-out md:block", noPadding ? "" : "p-4 pt-0 md:p-6", className), children: children })), footer && (_jsx("div", { className: "border-border-default border-t p-4 pt-0 md:p-6", children: footer }))] })] }));
}
//# sourceMappingURL=card.js.map