"use client";

// src/components/ui/key-metrics.tsx
import * as React3 from "react";

// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// src/components/ui/card.tsx
import { jsx } from "react/jsx-runtime";
function Card({
  className,
  size = "default",
  ...props
}) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card",
      "data-size": size,
      className: cn(
        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
        className
      ),
      ...props
    }
  );
}
function CardHeader({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-header",
      className: cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
        className
      ),
      ...props
    }
  );
}
function CardTitle({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-title",
      className: cn(
        "font-sans text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
        className
      ),
      ...props
    }
  );
}
function CardDescription({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-description",
      className: cn("text-sm text-muted-foreground", className),
      ...props
    }
  );
}
function CardContent({ className, ...props }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      "data-slot": "card-content",
      className: cn("px-4 group-data-[size=sm]/card:px-3", className),
      ...props
    }
  );
}

// src/components/ui/select.tsx
import { Select as SelectPrimitive } from "radix-ui";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function Select({
  ...props
}) {
  return /* @__PURE__ */ jsx2(SelectPrimitive.Root, { "data-slot": "select", ...props });
}
function SelectValue({
  ...props
}) {
  return /* @__PURE__ */ jsx2(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
}
function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}) {
  return /* @__PURE__ */ jsxs(
    SelectPrimitive.Trigger,
    {
      "data-slot": "select-trigger",
      "data-size": size,
      className: cn(
        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pe-2 ps-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/15 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props,
      children: [
        children,
        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2("i", { className: "fa-light fa-chevron-down pointer-events-none size-4 text-muted-foreground", "aria-hidden": "true" }) })
      ]
    }
  );
}
function SelectContent({
  className,
  children,
  position = "item-aligned",
  align = "center",
  ...props
}) {
  return /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
    SelectPrimitive.Content,
    {
      "data-slot": "select-content",
      "data-align-trigger": position === "item-aligned",
      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
      position,
      align,
      ...props,
      children: [
        /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
        /* @__PURE__ */ jsx2(
          SelectPrimitive.Viewport,
          {
            "data-position": position,
            className: cn(
              "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
              position === "popper" && ""
            ),
            children
          }
        ),
        /* @__PURE__ */ jsx2(SelectScrollDownButton, {})
      ]
    }
  ) });
}
function SelectItem({
  className,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsxs(
    SelectPrimitive.Item,
    {
      "data-slot": "select-item",
      className: cn(
        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute end-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2("i", { className: "fa-light fa-check pointer-events-none", "aria-hidden": "true" }) }) }),
        /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { children })
      ]
    }
  );
}
function SelectScrollUpButton({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx2(
    SelectPrimitive.ScrollUpButton,
    {
      "data-slot": "select-scroll-up-button",
      className: cn(
        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx2(
        "i",
        {
          className: "fa-light fa-chevron-up",
          "aria-hidden": "true"
        }
      )
    }
  );
}
function SelectScrollDownButton({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx2(
    SelectPrimitive.ScrollDownButton,
    {
      "data-slot": "select-scroll-down-button",
      className: cn(
        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx2(
        "i",
        {
          className: "fa-light fa-chevron-down",
          "aria-hidden": "true"
        }
      )
    }
  );
}

// src/components/ui/separator.tsx
import { Separator as SeparatorPrimitive } from "radix-ui";
import { jsx as jsx3 } from "react/jsx-runtime";
function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}) {
  return /* @__PURE__ */ jsx3(
    SeparatorPrimitive.Root,
    {
      "data-slot": "separator",
      decorative,
      orientation,
      className: cn(
        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
        className
      ),
      ...props
    }
  );
}

// src/components/ui/button.tsx
import * as React from "react";
import { cva } from "class-variance-authority";
import { Slot } from "radix-ui";
import { jsx as jsx4 } from "react/jsx-runtime";
var buttonVariants = cva(
  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline: "border-input bg-background hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:bg-input/15 dark:hover:bg-input/25",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost: "hover:bg-interactive-hover hover:text-interactive-hover-foreground aria-expanded:bg-interactive-hover aria-expanded:text-interactive-hover-foreground dark:hover:bg-interactive-hover-subtle",
        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline"
      },
      size: {
        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
        xs: "h-6 gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3.5 has-data-[icon=inline-start]:ps-3.5",
        icon: "size-9",
        "icon-xs": "size-6 in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
        "icon-sm": "size-8 in-data-[slot=button-group]:rounded-lg",
        "icon-lg": "size-10"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
var Button = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot.Root : "button";
  return /* @__PURE__ */ jsx4(
    Comp,
    {
      ref,
      "data-slot": "button",
      "data-variant": variant,
      "data-size": size,
      className: cn(buttonVariants({ variant, size }), className),
      ...props
    }
  );
});
Button.displayName = "Button";

// src/components/ui/tooltip.tsx
import { Tooltip as TooltipPrimitive } from "radix-ui";
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
function Tooltip({
  ...props
}) {
  return /* @__PURE__ */ jsx5(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
}
function TooltipTrigger({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsx5(
    TooltipPrimitive.Trigger,
    {
      "data-slot": "tooltip-trigger",
      suppressHydrationWarning: true,
      className: cn("cursor-pointer", className),
      ...props
    }
  );
}
function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}) {
  return /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
    TooltipPrimitive.Content,
    {
      "data-slot": "tooltip-content",
      sideOffset,
      className: cn(
        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
        className
      ),
      ...props,
      children: [
        children,
        /* @__PURE__ */ jsx5(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
      ]
    }
  ) });
}

// src/components/ui/key-metrics-context.tsx
import * as React2 from "react";
import { jsx as jsx6 } from "react/jsx-runtime";
var KeyMetricsContext = React2.createContext({});
function useKeyMetricsContext() {
  return React2.useContext(KeyMetricsContext);
}
function KeyMetricsProvider({
  value,
  children
}) {
  const memo2 = React2.useMemo(
    () => ({
      defaultInsightAction: value.defaultInsightAction,
      shortcutHint: value.shortcutHint,
      defaultActionLabel: value.defaultActionLabel
    }),
    [value.defaultInsightAction, value.shortcutHint, value.defaultActionLabel]
  );
  return /* @__PURE__ */ jsx6(KeyMetricsContext.Provider, { value: memo2, children });
}

// src/components/ui/key-metrics.tsx
import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
function InsightDefaultTooltip({
  actionLabel,
  children
}) {
  const { shortcutHint, defaultActionLabel = "Ask Leo" } = useKeyMetricsContext();
  const label = actionLabel ?? defaultActionLabel;
  const showShortcut = !!shortcutHint && (!actionLabel || actionLabel === defaultActionLabel);
  if (!showShortcut) {
    return /* @__PURE__ */ jsxs3(Tooltip, { children: [
      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children }),
      /* @__PURE__ */ jsx7(TooltipContent, { side: "top", children: label })
    ] });
  }
  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children }),
    /* @__PURE__ */ jsxs3(TooltipContent, { side: "top", className: "flex flex-wrap items-center gap-1.5", children: [
      /* @__PURE__ */ jsx7("span", { children: label }),
      shortcutHint
    ] })
  ] });
}
function metricTrendTone(trend, polarity = "higher_is_better") {
  if (trend === "neutral") return "muted";
  if (polarity === "informational") return "muted";
  if (polarity === "higher_is_better") {
    return trend === "up" ? "positive" : "negative";
  }
  return trend === "up" ? "negative" : "positive";
}
function metricTrendAriaQualifier(trend, polarity = "higher_is_better") {
  if (trend === "neutral") return "no net change";
  if (polarity === "informational") {
    return trend === "up" ? "increased" : "decreased";
  }
  if (polarity === "higher_is_better") {
    return trend === "up" ? "increased, favorable" : "decreased, unfavorable";
  }
  return trend === "up" ? "increased, unfavorable" : "decreased, favorable";
}
function flatMetricsHairlineClass(itemCount, metricsHalfWidthLayout) {
  if (itemCount <= 1) return "gap-0";
  const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]";
  if (itemCount === 2) {
    return cn("gap-0", childBorder, "[&>*:first-child]:border-e");
  }
  if (itemCount === 4) {
    const narrow2x2 = metricsHalfWidthLayout ? "@[max-width:25.99rem]" : "@[max-width:29.99rem]";
    return cn(
      "gap-0",
      childBorder,
      /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
      "[&>*:not(:last-child)]:border-e",
      /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
      `${narrow2x2}:[&>*:not(:last-child)]:border-e-0`,
      `${narrow2x2}:[&>*:nth-child(odd)]:border-e`,
      `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`
    );
  }
  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-e");
}
function metricsRowColumnsClass(rowLength, metricsHalfWidthLayout) {
  const half = metricsHalfWidthLayout;
  switch (rowLength) {
    case 1:
      return "grid-cols-1";
    case 2:
      return half ? "grid-cols-1 @[14rem]:grid-cols-2" : "grid-cols-1 @[18rem]:grid-cols-2";
    case 3:
      return half ? "grid-cols-1 @[18rem]:grid-cols-3" : "grid-cols-1 @[24rem]:grid-cols-3";
    case 4:
      return half ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-4" : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-4";
    default:
      return half ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-3 @[40rem]:grid-cols-6" : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-3 @[56rem]:grid-cols-6";
  }
}
var DEFAULT_PERIODS = [
  { value: "week", label: "vs last week" },
  { value: "month", label: "vs last month" },
  { value: "quarter", label: "vs last quarter" },
  { value: "year", label: "vs last year" }
];
var MetricCell = React3.memo(function MetricCell2({
  label,
  value,
  delta,
  trend,
  trendPolarity = "higher_is_better",
  description,
  href,
  onClick,
  metricVariant = "default",
  dense = false,
  edgeGutter = true
}) {
  const isUp = trend === "up";
  const isDown = trend === "down";
  const tone = metricTrendTone(trend, trendPolarity);
  const isInteractive = !!(href || onClick);
  const isHero = metricVariant === "hero";
  const deltaText = typeof delta === "number" ? delta === 0 ? "" : String(delta) : String(delta ?? "").trim();
  const showTrendChip = isUp || isDown || deltaText.length > 0;
  const inner = /* @__PURE__ */ jsxs3(Fragment2, { children: [
    /* @__PURE__ */ jsxs3(
      "div",
      {
        className: cn(
          "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 gap-y-0.5",
          dense ? "min-h-[2.125rem]" : "min-h-[2.625rem]"
        ),
        children: [
          /* @__PURE__ */ jsx7(
            "p",
            {
              className: cn(
                "min-w-0 text-muted-foreground leading-snug wrap-break-word",
                dense ? "text-xs" : "text-sm",
                isHero && "font-medium"
              ),
              children: label
            }
          ),
          isInteractive ? /* @__PURE__ */ jsx7("span", { className: "mt-0.5 inline-flex shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-right text-xs text-foreground/70 transition-colors duration-150 group-hover:text-interactive-hover-foreground sm:group-hover:translate-x-0.5" }) }) : null
        ]
      }
    ),
    /* @__PURE__ */ jsxs3("div", { className: "flex items-baseline gap-2 flex-wrap", children: [
      /* @__PURE__ */ jsx7(
        "span",
        {
          className: cn(
            "font-bold tabular-nums leading-none text-foreground",
            dense ? isHero ? "text-lg sm:text-xl" : "text-base sm:text-lg" : isHero ? "text-2xl sm:text-[1.625rem]" : "text-xl sm:text-2xl"
          ),
          children: value
        }
      ),
      showTrendChip && /* @__PURE__ */ jsxs3(
        "span",
        {
          className: cn(
            "inline-flex items-center gap-1 font-medium leading-none",
            dense ? "text-xs sm:text-xs" : "text-xs sm:text-sm",
            tone === "positive" && "text-chart-2",
            tone === "negative" && "text-destructive",
            tone === "muted" && "text-muted-foreground"
          ),
          "aria-label": `${metricTrendAriaQualifier(trend, trendPolarity)} ${deltaText}`.trim(),
          children: [
            isUp && /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-trend-up text-[0.8rem]", "aria-hidden": "true" }),
            isDown && /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-trend-down text-[0.8rem]", "aria-hidden": "true" }),
            !isUp && !isDown && deltaText.length > 0 && /* @__PURE__ */ jsx7("i", { className: "fa-light fa-minus text-[0.8rem]", "aria-hidden": "true" }),
            deltaText.length > 0 && /* @__PURE__ */ jsx7("span", { children: deltaText })
          ]
        }
      )
    ] }),
    description ? /* @__PURE__ */ jsx7(
      "p",
      {
        className: cn(
          "min-w-0 text-muted-foreground leading-snug wrap-break-word line-clamp-2",
          dense ? "text-[11px]" : "text-xs"
        ),
        title: description,
        children: description
      }
    ) : null
  ] });
  const sharedClass = cn(
    "group flex min-w-0 flex-col gap-2 text-start outline-none",
    edgeGutter && "first:ps-0 last:pe-0",
    dense ? "gap-1.5 p-2 sm:px-3 sm:py-3" : "gap-2 p-3 sm:px-5 sm:py-4",
    isHero && "gap-2.5",
    isInteractive && [
      "cursor-pointer transition-colors duration-150",
      "hover:bg-foreground/5",
      "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
    ]
  );
  if (href) {
    return /* @__PURE__ */ jsx7("a", { href, className: sharedClass, "aria-label": `${label}: ${value}`, children: inner });
  }
  if (onClick) {
    return /* @__PURE__ */ jsx7("button", { type: "button", onClick, className: sharedClass, "aria-label": `${label}: ${value}`, children: inner });
  }
  return /* @__PURE__ */ jsx7("div", { className: sharedClass, children: inner });
});
function insightRailBody(insight) {
  const d = insight.description?.trim();
  if (d) return d;
  return insight.statement?.trim() ?? "";
}
function InsightRailStatementAction({
  insight,
  compact
}) {
  const badgeSize = compact ? "sm" : "default";
  const surface = compact ? "border border-border/50 bg-gradient-to-b from-muted/35 to-card" : "bg-card";
  const body = insightRailBody(insight);
  return /* @__PURE__ */ jsx7(
    Card,
    {
      role: "region",
      "aria-label": "Insight",
      className: cn(
        "flex h-full min-h-0 flex-col overflow-hidden rounded-lg border-0 p-0 shadow-none ring-1 ring-foreground/8",
        surface
      ),
      children: /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 flex-col p-3 sm:px-4 sm:py-4", children: [
        /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2.5", children: [
          /* @__PURE__ */ jsx7(InsightBadge, { severity: insight.severity, size: badgeSize }),
          /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
            /* @__PURE__ */ jsx7("p", { className: "text-sm font-semibold leading-snug text-foreground", children: insight.title }),
            body ? /* @__PURE__ */ jsx7("p", { className: "mt-1 text-sm leading-snug text-muted-foreground", children: body }) : null
          ] }),
          insight.href && /* @__PURE__ */ jsx7(
            "a",
            {
              href: insight.href,
              className: "mt-0.5 shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
              "aria-label": `Open ${insight.title} \u2014 details`,
              children: /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
            }
          )
        ] }),
        /* @__PURE__ */ jsx7("div", { className: "mt-auto flex shrink-0 justify-end pt-3", children: /* @__PURE__ */ jsx7(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs3(
          Button,
          {
            variant: compact ? "outline" : "ghost",
            size: "sm",
            className: cn(
              "h-8 w-full gap-1.5 text-xs sm:w-auto",
              compact ? "border-border/60 bg-background px-3 text-foreground hover:bg-background" : "px-3 text-muted-foreground hover:text-interactive-hover-foreground"
            ),
            onClick: insight.onAction,
            "aria-label": insight.actionLabel ?? "Ask Leo",
            children: [
              /* @__PURE__ */ jsx7(
                "i",
                {
                  className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
                  "aria-hidden": "true"
                }
              ),
              insight.actionLabel ?? "Ask Leo"
            ]
          }
        ) }) })
      ] })
    }
  );
}
function InsightBadge({
  severity = "warning",
  size = "default"
}) {
  const styles = {
    warning: {
      bg: "bg-[var(--insight-severity-warning-bg)]",
      icon: "fa-circle-exclamation",
      color: "text-[var(--insight-severity-warning-fg)]"
    },
    info: {
      bg: "bg-[var(--insight-severity-info-bg)]",
      icon: "fa-circle-info",
      color: "text-[var(--insight-severity-info-fg)]"
    },
    error: { bg: "bg-destructive/15", icon: "fa-circle-xmark", color: "text-destructive" }
  }[severity];
  return /* @__PURE__ */ jsx7(
    "span",
    {
      className: cn(
        "inline-flex shrink-0 items-center justify-center rounded-full",
        size === "sm" ? "size-6 text-xs" : "size-7 text-sm",
        styles.bg,
        styles.color
      ),
      "aria-hidden": "true",
      children: /* @__PURE__ */ jsx7("i", { className: `fa-light ${styles.icon}` })
    }
  );
}
function KeyMetricsInner({
  title,
  description,
  period,
  periods,
  metrics,
  rows,
  insight,
  onPeriodChange,
  innerPadding = "",
  showHeader = true,
  insightCompact = false,
  insightFullWidth = false,
  metricsSingleRow = false,
  metricsHalfWidthLayout = false,
  metricsCellSurfaceClassName = "bg-background",
  surfaceVariant = "default"
}) {
  const isFlatBand = surfaceVariant === "flat";
  const metricsGridClassName = isFlatBand ? flatMetricsHairlineClass(metrics.length, metricsHalfWidthLayout) : "gap-px bg-border";
  const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout;
  const stackedRailInsight = insight && !insightFullWidth && metricsHalfWidthLayout;
  return /* @__PURE__ */ jsxs3("div", { "data-slot": "key-metrics", className: "contents", children: [
    showHeader && /* @__PURE__ */ jsxs3("div", { className: cn(
      "flex flex-col gap-2 pb-3",
      "sm:flex-row sm:items-center sm:justify-between sm:gap-4",
      innerPadding
    ), children: [
      /* @__PURE__ */ jsxs3("div", { children: [
        /* @__PURE__ */ jsx7("p", { className: "text-base font-semibold text-foreground leading-tight", children: title }),
        /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description })
      ] }),
      /* @__PURE__ */ jsxs3(Select, { value: period, onValueChange: onPeriodChange, children: [
        /* @__PURE__ */ jsx7(
          SelectTrigger,
          {
            className: "h-8 w-full sm:w-auto sm:min-w-[9rem] shrink-0 text-sm",
            "aria-label": "Select comparison period",
            children: /* @__PURE__ */ jsx7(SelectValue, {})
          }
        ),
        /* @__PURE__ */ jsx7(SelectContent, { align: "end", sideOffset: 4, children: periods.map((p) => /* @__PURE__ */ jsx7(SelectItem, { value: p.value, children: p.label }, p.value)) })
      ] })
    ] }),
    /* @__PURE__ */ jsxs3(
      "div",
      {
        className: cn(
          "flex flex-col gap-0",
          /* 60% KPIs / 40% insight (3fr:2fr); lg+ only so phones/tablets stack KPIs + insight */
          insightSideBySide && "lg:grid lg:grid-cols-[minmax(0,3fr)_minmax(13rem,2fr)] lg:items-stretch lg:gap-x-6 lg:gap-y-0",
          innerPadding
        ),
        children: [
          /* @__PURE__ */ jsxs3(
            "div",
            {
              className: cn(
                "min-w-0 lg:flex lg:min-h-0 lg:flex-col",
                !insightSideBySide && "w-full",
                insightSideBySide && "lg:self-start"
              ),
              children: [
                metricsHalfWidthLayout ? /* @__PURE__ */ jsx7(
                  "div",
                  {
                    className: cn(
                      "@container/metrics-strip grid lg:hidden",
                      metricsSingleRow ? metricsRowColumnsClass(
                        metrics.length,
                        /* half */
                        true
                      ) : "grid-cols-2",
                      metricsGridClassName
                    ),
                    children: metrics.map((m) => /* @__PURE__ */ jsx7("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx7(MetricCell, { ...m, dense: true, edgeGutter: false }) }, m.id))
                  }
                ) : /* @__PURE__ */ jsx7(
                  "div",
                  {
                    className: cn(
                      "@container/metrics-strip grid lg:hidden",
                      metricsRowColumnsClass(
                        metrics.length,
                        /* half */
                        false
                      ),
                      metricsGridClassName
                    ),
                    children: metrics.map((m) => /* @__PURE__ */ jsx7("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx7(MetricCell, { ...m, dense: false, edgeGutter: false }) }, m.id))
                  }
                ),
                /* @__PURE__ */ jsx7("div", { className: "@container/metrics-strip hidden lg:block", children: rows.map((row, rowIdx) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
                  rowIdx > 0 && !isFlatBand && /* @__PURE__ */ jsx7(Separator, { "aria-hidden": "true", className: "my-1" }),
                  /* @__PURE__ */ jsx7(
                    "div",
                    {
                      className: cn(
                        "grid",
                        metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
                        isFlatBand ? flatMetricsHairlineClass(row.length, metricsHalfWidthLayout) : metricsGridClassName
                      ),
                      children: row.map((m) => /* @__PURE__ */ jsx7("div", { className: cn("min-w-0", metricsCellSurfaceClassName), children: /* @__PURE__ */ jsx7(MetricCell, { ...m, dense: metricsHalfWidthLayout, edgeGutter: false }) }, m.id))
                    }
                  )
                ] }, rowIdx)) })
              ]
            }
          ),
          insight && /* @__PURE__ */ jsxs3(Fragment2, { children: [
            insightFullWidth ? /* @__PURE__ */ jsx7(
              Separator,
              {
                "aria-hidden": "true",
                className: cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")
              }
            ) : stackedRailInsight ? /* @__PURE__ */ jsx7(
              Separator,
              {
                "aria-hidden": "true",
                className: cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")
              }
            ) : /* @__PURE__ */ jsx7(
              Separator,
              {
                "aria-hidden": "true",
                className: cn("my-3 lg:hidden", isFlatBand && "bg-foreground/[0.055]")
              }
            ),
            /* @__PURE__ */ jsx7(
              "div",
              {
                className: cn(
                  "flex min-h-0 min-w-0 w-full flex-col",
                  /* Divider + padding replace vertical Separator so grid stays 2 columns */
                  insightSideBySide && !insightFullWidth && cn(
                    "lg:h-full lg:ps-6",
                    /* Flat band: insight card ring is the divider — skip `border-l` (double line). */
                    !isFlatBand && "lg:border-s lg:border-border"
                  )
                ),
                children: insight && !insightFullWidth ? /* @__PURE__ */ jsx7(InsightRailStatementAction, { insight, compact: insightCompact }) : /* @__PURE__ */ jsx7(
                  Card,
                  {
                    role: "region",
                    "aria-label": "Insight",
                    className: cn(
                      "overflow-hidden rounded-lg p-0 ring-1 ring-foreground/8 shadow-none",
                      "flex min-h-0 flex-col bg-muted/25"
                    ),
                    children: insightCompact ? /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-8 md:p-5", children: [
                      /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
                        /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-2.5", children: [
                          /* @__PURE__ */ jsx7(InsightBadge, { severity: insight.severity, size: "sm" }),
                          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
                            /* @__PURE__ */ jsx7("p", { className: "text-base font-semibold leading-tight text-foreground", children: insight.title }),
                            insight.href && /* @__PURE__ */ jsx7(
                              "a",
                              {
                                href: insight.href,
                                className: "shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
                                "aria-label": `Open ${insight.title} \u2014 details`,
                                children: /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
                              }
                            )
                          ] })
                        ] }),
                        insight.description ? /* @__PURE__ */ jsx7("p", { className: "text-sm leading-relaxed text-muted-foreground", children: insight.description }) : null
                      ] }),
                      /* @__PURE__ */ jsx7("div", { className: "flex w-full shrink-0 md:w-auto", children: /* @__PURE__ */ jsx7(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs3(
                        Button,
                        {
                          variant: "ghost",
                          size: "sm",
                          className: "h-9 w-full gap-1.5 px-4 text-xs text-muted-foreground hover:text-interactive-hover-foreground md:min-w-[8.5rem]",
                          onClick: insight.onAction,
                          "aria-label": insight.actionLabel ?? "Ask Leo",
                          children: [
                            /* @__PURE__ */ jsx7(
                              "i",
                              {
                                className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
                                "aria-hidden": "true"
                              }
                            ),
                            insight.actionLabel ?? "Ask Leo"
                          ]
                        }
                      ) }) })
                    ] }) : /* @__PURE__ */ jsxs3("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between md:gap-8 md:p-5", children: [
                      /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
                        /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
                          /* @__PURE__ */ jsx7(InsightBadge, { severity: insight.severity }),
                          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
                            /* @__PURE__ */ jsx7("p", { className: "text-base font-semibold leading-snug text-foreground", children: insight.title }),
                            insight.href && /* @__PURE__ */ jsx7(
                              "a",
                              {
                                href: insight.href,
                                className: "shrink-0 text-muted-foreground transition-colors hover:text-interactive-hover-foreground focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring",
                                "aria-label": `Open ${insight.title} \u2014 details`,
                                children: /* @__PURE__ */ jsx7("i", { className: "fa-light fa-arrow-up-right text-xs", "aria-hidden": "true" })
                              }
                            )
                          ] })
                        ] }),
                        insight.description ? /* @__PURE__ */ jsx7("p", { className: "text-sm leading-relaxed text-muted-foreground", children: insight.description }) : null
                      ] }),
                      /* @__PURE__ */ jsx7("div", { className: "flex w-full shrink-0 md:w-auto", children: /* @__PURE__ */ jsx7(InsightDefaultTooltip, { actionLabel: insight.actionLabel, children: /* @__PURE__ */ jsxs3(
                        Button,
                        {
                          variant: "ghost",
                          size: "sm",
                          className: "h-9 w-full gap-1.5 px-4 text-xs text-muted-foreground hover:text-interactive-hover-foreground md:min-w-[8.5rem]",
                          onClick: insight.onAction,
                          "aria-label": insight.actionLabel ?? "Ask Leo",
                          children: [
                            /* @__PURE__ */ jsx7(
                              "i",
                              {
                                className: insight.actionIcon ? `fa-light ${insight.actionIcon} text-xs` : "fa-duotone fa-solid fa-star-christmas text-xs text-brand",
                                "aria-hidden": "true"
                              }
                            ),
                            insight.actionLabel ?? "Ask Leo"
                          ]
                        }
                      ) }) })
                    ] })
                  }
                )
              }
            )
          ] })
        ]
      }
    )
  ] });
}
function chunkMetricPairs(metrics) {
  const out = [];
  for (let i = 0; i < metrics.length; i += 2) out.push(metrics.slice(i, i + 2));
  return out;
}
var EMPTY_METRICS = [];
function KeyMetrics({
  variant = "card",
  title = "Key Metrics",
  description = "Overview of performance indicators",
  metrics = EMPTY_METRICS,
  insight,
  periods = DEFAULT_PERIODS,
  defaultPeriod = "week",
  onPeriodChange,
  showHeader = true,
  insightCompact = false,
  insightFullWidth = false,
  metricsSingleRow = false,
  metricsHalfWidthLayout = false,
  className
}) {
  const [period, setPeriod] = React3.useState(defaultPeriod);
  const {
    defaultInsightAction,
    defaultActionLabel = "Ask Leo"
  } = useKeyMetricsContext();
  function handlePeriodChange(v) {
    setPeriod(v);
    onPeriodChange?.(v);
  }
  const rows = metricsSingleRow ? metrics.length ? metricsHalfWidthLayout ? chunkMetricPairs(metrics) : [metrics] : [] : (() => {
    const out = [];
    for (let i = 0; i < metrics.length; i += 3) {
      out.push(metrics.slice(i, i + 3));
    }
    return out;
  })();
  const metricsCellSurfaceClassName = variant === "flat" ? "bg-transparent" : "bg-card dark:bg-transparent";
  const innerProps = {
    title,
    description,
    period,
    periods,
    metrics,
    rows,
    insight,
    onPeriodChange: handlePeriodChange,
    insightCompact,
    insightFullWidth,
    metricsSingleRow,
    metricsHalfWidthLayout,
    metricsCellSurfaceClassName,
    surfaceVariant: variant === "flat" ? "flat" : "default"
  };
  const glowStyle = {
    background: "var(--key-metrics-card-glow-radial)"
  };
  const flatBandStyle = {
    background: "var(--key-metrics-flat-band-radial)",
    boxShadow: "var(--key-metrics-flat-band-shadow)"
  };
  if (variant === "card") {
    return /* @__PURE__ */ jsxs3(Card, { className: cn("shadow-xs overflow-hidden flex flex-col", className), style: glowStyle, children: [
      /* @__PURE__ */ jsx7(CardHeader, { className: cn("shrink-0 pb-2", metricsHalfWidthLayout && "space-y-2"), children: /* @__PURE__ */ jsxs3(
        "div",
        {
          className: cn(
            "flex gap-2",
            metricsHalfWidthLayout ? "flex-col min-[400px]:flex-row min-[400px]:items-start min-[400px]:justify-between" : "items-start"
          ),
          children: [
            /* @__PURE__ */ jsxs3("div", { className: "flex-1 min-w-0", children: [
              /* @__PURE__ */ jsx7(CardTitle, { className: "text-sm font-semibold leading-tight", children: title }),
              /* @__PURE__ */ jsx7(CardDescription, { className: "text-xs mt-0.5", children: description })
            ] }),
            /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-1.5 shrink-0", children: [
              defaultInsightAction ? /* @__PURE__ */ jsx7(InsightDefaultTooltip, { actionLabel: defaultActionLabel, children: /* @__PURE__ */ jsxs3(
                Button,
                {
                  size: "sm",
                  variant: "outline",
                  className: "h-7 shrink-0 text-xs gap-1.5 px-2",
                  "aria-label": `${defaultActionLabel} about these metrics`,
                  onClick: defaultInsightAction,
                  type: "button",
                  children: [
                    /* @__PURE__ */ jsx7("i", { className: "fa-duotone fa-solid fa-star-christmas text-xs text-brand", "aria-hidden": "true" }),
                    /* @__PURE__ */ jsx7("span", { children: defaultActionLabel })
                  ]
                }
              ) }) : null,
              /* @__PURE__ */ jsxs3(Select, { value: period, onValueChange: handlePeriodChange, children: [
                /* @__PURE__ */ jsx7(
                  SelectTrigger,
                  {
                    size: "sm",
                    className: "w-auto min-w-[9rem] shrink-0 text-sm",
                    "aria-label": "Select comparison period",
                    children: /* @__PURE__ */ jsx7(SelectValue, {})
                  }
                ),
                /* @__PURE__ */ jsx7(SelectContent, { align: "end", sideOffset: 4, children: periods.map((p) => /* @__PURE__ */ jsx7(SelectItem, { value: p.value, children: p.label }, p.value)) })
              ] })
            ] })
          ]
        }
      ) }),
      /* @__PURE__ */ jsx7(CardContent, { className: "flex-1 pb-4", children: /* @__PURE__ */ jsx7(KeyMetricsInner, { ...innerProps, showHeader: false }) })
    ] });
  }
  if (variant === "compact") {
    return /* @__PURE__ */ jsx7(Card, { className: cn("shadow-xs overflow-hidden", className), style: glowStyle, children: /* @__PURE__ */ jsx7(CardContent, { className: "py-3 px-4", children: /* @__PURE__ */ jsx7(KeyMetricsInner, { ...innerProps, showHeader: false }) }) });
  }
  return /* @__PURE__ */ jsx7(
    "section",
    {
      "aria-label": title,
      className: cn("relative w-full overflow-hidden pt-5 pb-8", className),
      style: flatBandStyle,
      children: /* @__PURE__ */ jsx7(
        KeyMetricsInner,
        {
          ...innerProps,
          innerPadding: "px-4 lg:px-6",
          showHeader
        }
      )
    }
  );
}
function KeyMetricsContent({
  metrics = EMPTY_METRICS,
  insight,
  insightCompact = false,
  insightFullWidth = false
}) {
  const rows = [];
  for (let i = 0; i < metrics.length; i += 3) rows.push(metrics.slice(i, i + 3));
  return /* @__PURE__ */ jsx7(
    KeyMetricsInner,
    {
      title: "",
      description: "",
      period: "",
      periods: [],
      metrics,
      rows,
      insight,
      onPeriodChange: () => {
      },
      showHeader: false,
      insightCompact,
      insightFullWidth,
      metricsCellSurfaceClassName: "bg-card dark:bg-transparent"
    }
  );
}
export {
  KeyMetrics,
  KeyMetricsContent,
  KeyMetricsProvider,
  metricTrendAriaQualifier,
  metricTrendTone,
  useKeyMetricsContext
};
//# sourceMappingURL=key-metrics.js.map