import { jsx, jsxs } from "react/jsx-runtime";
import { useId, useState } from "react";
import Sparkline from "@/components/charts/native/Sparkline";
import ChartTooltip from "@/components/charts/ChartTooltip";
import { tokenNameToCssVar } from "./utils/token-resolver.js";
const CARD_RADIUS_PX = 12;
const HORIZONTAL_CARD_OUTER_WIDTH_PX = 328;
const VERTICAL_CARD_OUTER_WIDTH_PX = 206;
const HORIZONTAL_SPARK_TRACK_MIN_PX = 120;
const HORIZONTAL_SPARK_TRACK_HUG_MIN_PX = 92;
const HORIZONTAL_TEXT_REGION_MAX_PX = 188;
const NUMBER_FONT_STACK = "var(--font-number, Inter, ui-sans-serif, system-ui, sans-serif)";
const RATIO_FONT_STACK = "var(--font-number-medium, Inter, ui-sans-serif, system-ui, sans-serif)";
const INDICATOR_SPARKLINE_CURVE_TYPE = "linear";
const INDICATOR_SPARKLINE_STROKE_WIDTH = 1.2;
const INDICATOR_SPARKLINE_STROKE_LINECAP = "round";
const INDICATOR_SPARKLINE_STROKE_LINEJOIN = "round";
const TITLE_CALIBER_TOOLTIP_DEFAULT = "\u6307\u6807\u53E3\u5F84\u89E3\u91CA\u6587\u6848\u5360\u4F4D";
function defaultFormatTooltipValue(n) {
  return String(n);
}
function SmartIndicator({
  title,
  value,
  trend = "\u73AF\u6BD4",
  trendValue = "",
  trendDirection = "flat",
  data = [],
  status = "success",
  accentColorToken,
  layout = "horizontal",
  horizontalKind = "text-first",
  selected = false,
  className,
  style,
  onClick,
  sparklineHeight = 72,
  chartTooltipEnabled = true,
  formatTooltipValue,
  titleTooltip = TITLE_CALIBER_TOOLTIP_DEFAULT,
  valueFontSize = 24,
  hideSparkline = false
}) {
  const titleTipId = useId();
  const [titleHover, setTitleHover] = useState(false);
  const showTitleCaliberTip = titleTooltip !== "" && titleHover;
  const isLayoutVertical = layout === "vertical";
  const isHorizontalChartFirst = horizontalKind === "chart-first";
  const isTrendUp = trendDirection === "up";
  const isTrendDown = trendDirection === "down";
  const isStatusDanger = status === "danger";
  const resolvedValueFontSize = Number.isFinite(Number(valueFontSize)) ? Math.max(14, Number(valueFontSize)) : 24;
  const useHugWidth = !isLayoutVertical && (resolvedValueFontSize < 24 || hideSparkline);
  const accentCssVar = accentColorToken ? tokenNameToCssVar(accentColorToken) : "";
  const chartThemeColorCss = accentCssVar.startsWith("--") ? `var(${accentCssVar})` : isStatusDanger ? "var(--semi-color-danger)" : "var(--semi-color-success)";
  const selectedBorderColorCss = "var(--semi-color-success)";
  const formatTooltipValueResolved = formatTooltipValue ?? defaultFormatTooltipValue;
  const numericValues = data.map((d) => d.value);
  const sparklineMargin = {
    top: 12,
    left: 0,
    right: 0,
    bottom: 0
  };
  const rootPaddingCss = isLayoutVertical ? "19px" : "0";
  const rootGapPx = isLayoutVertical ? 16 : 12;
  const rootBorderWidthPx = 1;
  const rootBorderColorCss = selected ? selectedBorderColorCss : "transparent";
  const cardBackgroundCss = "#F9FAFB";
  const rootWidthCss = isLayoutVertical ? hideSparkline ? "100%" : VERTICAL_CARD_OUTER_WIDTH_PX : useHugWidth ? "100%" : HORIZONTAL_CARD_OUTER_WIDTH_PX;
  const rootMinWidthCss = isLayoutVertical ? hideSparkline ? 0 : VERTICAL_CARD_OUTER_WIDTH_PX : useHugWidth ? 0 : HORIZONTAL_CARD_OUTER_WIDTH_PX;
  const rootStyle = {
    boxSizing: "border-box",
    width: rootWidthCss,
    minWidth: rootMinWidthCss,
    maxWidth: "100%",
    alignSelf: isLayoutVertical && !hideSparkline ? "center" : "stretch",
    display: "flex",
    flexDirection: isLayoutVertical ? "column" : "row",
    alignItems: "stretch",
    gap: rootGapPx,
    padding: rootPaddingCss,
    borderRadius: CARD_RADIUS_PX,
    background: cardBackgroundCss,
    borderWidth: rootBorderWidthPx,
    borderStyle: "solid",
    borderColor: rootBorderColorCss,
    overflow: "visible",
    flexShrink: useHugWidth || hideSparkline ? 1 : 0,
    cursor: typeof onClick === "function" ? "pointer" : void 0,
    ...style
  };
  const textStackGapPx = isLayoutVertical ? 12 : 14;
  const textStackStyle = {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: textStackGapPx,
    minWidth: 0
  };
  const titleStyle = {
    margin: 0,
    display: "inline-block",
    width: "fit-content",
    maxWidth: "100%",
    paddingBottom: 0,
    fontSize: 14,
    lineHeight: "24px",
    fontWeight: 600,
    color: "var(--semi-color-text-0)",
    borderBottomWidth: 1,
    borderBottomStyle: "dashed",
    /** 比分割线 `--border-divider` 深一档：Dashboard 原色 blueGrey-400 */
    borderBottomColor: "var(--color-blueGrey-400, #D0D5DD)",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  };
  const valueStyle = {
    margin: 0,
    marginBottom: -2,
    fontSize: resolvedValueFontSize,
    lineHeight: `${Math.round(resolvedValueFontSize * 1.33)}px`,
    fontWeight: 600,
    fontFamily: NUMBER_FONT_STACK,
    fontVariantNumeric: "tabular-nums",
    color: "var(--semi-color-text-0)",
    whiteSpace: "nowrap"
  };
  const trendRowStyle = {
    display: "flex",
    flexWrap: "nowrap",
    alignItems: "flex-end",
    alignSelf: "flex-end",
    columnGap: 6,
    rowGap: 0,
    whiteSpace: "nowrap",
    paddingBottom: 1.5
  };
  const trendLabelStyle = {
    fontSize: 11,
    lineHeight: "12px",
    color: "var(--semi-color-text-2)",
    whiteSpace: "nowrap"
  };
  const trendSeparatorStyle = {
    width: 1,
    height: 12,
    flexShrink: 0,
    alignSelf: "flex-end",
    background: "var(--semi-color-border)"
  };
  const trendValueGroupStyle = {
    display: "inline-flex",
    alignItems: "flex-end",
    gap: 4,
    fontSize: 11,
    lineHeight: "12px",
    fontWeight: 400,
    fontFamily: RATIO_FONT_STACK,
    color: chartThemeColorCss,
    whiteSpace: "nowrap"
  };
  const valueTrendInlineRowStyle = {
    display: "flex",
    alignItems: "flex-end",
    gap: 10,
    minWidth: 0
  };
  const textRegionStyle = {
    flex: isLayoutVertical ? "0 0 auto" : "0 1 auto",
    width: "auto",
    maxWidth: isLayoutVertical ? "100%" : HORIZONTAL_TEXT_REGION_MAX_PX,
    minWidth: 0,
    flexShrink: isLayoutVertical ? 1 : 0,
    boxSizing: "border-box",
    padding: isLayoutVertical ? "0" : "20px 0 18px 19px",
    display: "flex",
    alignItems: "center"
  };
  const chartTrackMinWidth = useHugWidth ? HORIZONTAL_SPARK_TRACK_HUG_MIN_PX : HORIZONTAL_SPARK_TRACK_MIN_PX;
  const chartRegionWidthCss = isLayoutVertical ? "100%" : "auto";
  const chartRegionStyle = {
    flex: isLayoutVertical ? "0 0 auto" : "1 1 auto",
    width: chartRegionWidthCss,
    minWidth: isLayoutVertical ? 0 : chartTrackMinWidth,
    maxWidth: "100%",
    display: "flex",
    alignItems: "stretch",
    flexShrink: 0,
    overflow: "visible",
    boxSizing: "border-box",
    padding: isLayoutVertical ? "0" : "12px 19px 19px 0",
    minHeight: isLayoutVertical ? void 0 : sparklineHeight + 24
  };
  const chartHostStyle = {
    width: "100%",
    height: isLayoutVertical ? sparklineHeight : "100%",
    minHeight: sparklineHeight,
    overflow: "visible"
  };
  const sparklineFillStops = [
    { offset: "0%", opacity: 0.34 },
    { offset: "62%", opacity: 0.2 },
    { offset: "88%", opacity: 0.1 },
    { offset: "100%", opacity: 0.02 }
  ];
  const trendBlock = hideSparkline ? null : /* @__PURE__ */ jsxs("div", { style: trendRowStyle, children: [
    /* @__PURE__ */ jsx("span", { style: trendLabelStyle, children: trend }),
    /* @__PURE__ */ jsxs("span", { style: trendValueGroupStyle, children: [
      isTrendUp || isTrendDown ? /* @__PURE__ */ jsx(
        "svg",
        {
          viewBox: "0 0 12 12",
          width: "12",
          height: "12",
          "aria-hidden": "true",
          style: {
            display: "block",
            transform: isTrendDown ? "rotate(180deg)" : void 0
          },
          children: /* @__PURE__ */ jsx(
            "path",
            {
              d: "M8.5417 8.16062H3.47596C3.27628 8.16062 3.15719 7.93808 3.26794 7.77194L5.80082 3.97264C5.89977 3.8242 6.11788 3.8242 6.21684 3.97264L8.74971 7.77194C8.86047 7.93808 8.74137 8.16062 8.5417 8.16062Z",
              fill: "currentColor"
            }
          )
        }
      ) : /* @__PURE__ */ jsx("span", { children: "\u2014" }),
      /* @__PURE__ */ jsx("span", { children: trendValue })
    ] })
  ] });
  const bodyInner = /* @__PURE__ */ jsxs("div", { style: textStackStyle, children: [
    /* @__PURE__ */ jsxs(
      "span",
      {
        style: {
          position: "relative",
          display: "inline-block",
          width: "fit-content",
          maxWidth: "100%"
        },
        onMouseEnter: () => titleTooltip !== "" && setTitleHover(true),
        onMouseLeave: () => setTitleHover(false),
        children: [
          /* @__PURE__ */ jsx(
            "p",
            {
              style: titleStyle,
              "aria-describedby": showTitleCaliberTip ? titleTipId : void 0,
              children: title
            }
          ),
          showTitleCaliberTip ? /* @__PURE__ */ jsx(
            "span",
            {
              id: titleTipId,
              role: "tooltip",
              style: {
                position: "absolute",
                left: 0,
                top: "100%",
                marginTop: 6,
                zIndex: 50
              },
              children: /* @__PURE__ */ jsx(ChartTooltip, { variant: "caption", children: titleTooltip })
            }
          ) : null
        ]
      }
    ),
    /* @__PURE__ */ jsxs("div", { style: valueTrendInlineRowStyle, children: [
      /* @__PURE__ */ jsx("p", { style: valueStyle, children: value }),
      trendBlock ? /* @__PURE__ */ jsx("span", { style: trendSeparatorStyle, "aria-hidden": "true" }) : null,
      trendBlock
    ] })
  ] });
  const chartInner = /* @__PURE__ */ jsx("div", { style: chartHostStyle, children: /* @__PURE__ */ jsx(
    Sparkline,
    {
      data,
      color: chartThemeColorCss,
      strokeWidth: INDICATOR_SPARKLINE_STROKE_WIDTH,
      showMeanLine: numericValues.length > 0,
      margin: sparklineMargin,
      tooltipEnabled: chartTooltipEnabled && data.length > 0,
      formatTooltipValue: formatTooltipValueResolved,
      fillStops: sparklineFillStops
    }
  ) });
  const showChartLeading = !isLayoutVertical && isHorizontalChartFirst;
  const textRegion = /* @__PURE__ */ jsx("div", { style: textRegionStyle, children: bodyInner });
  const chartRegion = /* @__PURE__ */ jsx("div", { style: chartRegionStyle, children: chartInner });
  const leadingRegion = showChartLeading ? chartRegion : textRegion;
  const trailingRegion = showChartLeading ? textRegion : chartRegion;
  const rootClassName = ["smart-indicator", className].filter(Boolean).join(" ");
  if (hideSparkline) {
    const compactTextRegionStyle = {
      ...textRegionStyle,
      flex: "1 1 auto",
      maxWidth: "100%",
      padding: isLayoutVertical ? "0" : "16px 20px",
      width: "100%"
    };
    return /* @__PURE__ */ jsx("div", { className: rootClassName, style: rootStyle, onClick, children: /* @__PURE__ */ jsx("div", { style: compactTextRegionStyle, children: bodyInner }) });
  }
  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: rootStyle, onClick, children: [
    leadingRegion,
    trailingRegion
  ] });
}
export {
  INDICATOR_SPARKLINE_CURVE_TYPE,
  INDICATOR_SPARKLINE_STROKE_LINECAP,
  INDICATOR_SPARKLINE_STROKE_LINEJOIN,
  INDICATOR_SPARKLINE_STROKE_WIDTH,
  SmartIndicator as default
};
