import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { motion } from 'motion/react';
import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
import { cn } from '../../../utils/cn.js';
import { kpiTheme } from './KPI.theme.js';

const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, subtitle, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
    const theme = useMemo(() => ({
        ...kpiTheme,
        ...customTheme,
        valueSizes: { ...kpiTheme.valueSizes, ...customTheme.valueSizes },
        barFilledColors: {
            ...kpiTheme.barFilledColors,
            ...customTheme.barFilledColors,
        },
    }), [customTheme]);
    // Format trend label
    const formattedTrend = useMemo(() => {
        if (trendLabel)
            return trendLabel;
        if (trend === undefined)
            return null;
        const sign = trend > 0 ? "+" : "";
        return `${sign}${trend}%`;
    }, [trend, trendLabel]);
    const trendDirection = trend === undefined ? null : trend > 0 ? "up" : trend < 0 ? "down" : "neutral";
    // Calculate filled bar count from progress
    const filledBars = useMemo(() => {
        if (progress === undefined)
            return 0;
        return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
    }, [progress, barCount]);
    const barSize = kpiTheme.barSizes[size];
    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (typeof label === 'string' ? (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] })) : label)] }), formattedTrend && trendDirection && (typeof formattedTrend === 'string' ? (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] })) : formattedTrend)] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
                    const isFilled = i < filledBars;
                    const fadeDistance = filledBars - i;
                    const fillOpacity = isFilled && fadeDistance <= 3
                        ? 0.4 + (fadeDistance / 3) * 0.6
                        : 1;
                    return (jsx("div", { className: cn("relative rounded-sm flex-1", barSize.height, theme.barEmptyColor), children: isFilled && (jsx(motion.div, { className: cn("absolute inset-0 rounded-sm", theme.barFilledColors[color]), initial: { opacity: 0 }, animate: { opacity: fillOpacity }, transition: {
                                duration: 0.25,
                                ease: "easeOut",
                                delay: i * 0.03,
                            } })) }, i));
                }) })), subtitle && (typeof subtitle === 'string' ? (jsx("span", { className: cn(theme.subtitleStyle, size === "sm" ? "text-sm" : "text-base"), children: subtitle })) : subtitle)] }));
});
KPI.displayName = "KPI";

export { KPI };
